/* ================================================================
   DS Lista Notizie — widget.css  v1.5
   ================================================================ */

/* ── CSS Custom Properties (Light) ───────────────────────────── */
.dsn-wrapper {
    --dsn-accent:        #C0171D;
    --dsn-accent-hover:  #8f1015;
    --dsn-title:         #111111;
    --dsn-title-hover:   #C0171D;
    --dsn-bg:            #ffffff;
    --dsn-bg-hover:      #FFFDF9;
    --dsn-border:        #E2DDD8;
    --dsn-cat-bg:        #C0171D;
    --dsn-cat-color:     #ffffff;
    --dsn-date-color:    #888888;
    --dsn-excerpt-color: #555555;
    --dsn-corr1:         #C0171D;
    --dsn-corr2:         #1a5fa8;
    --dsn-img-bg:        #1a1a1a;
    --dsn-reading-color: #888888;
}

/* ── Dark mode — tutte le classi usate da Foxiz ───────────────── */
body.dark-scheme          .dsn-wrapper,
body.is-dark              .dsn-wrapper,
body[data-foxiz-dark="1"] .dsn-wrapper,
.dark-scheme              .dsn-wrapper,
[data-theme="dark"]       .dsn-wrapper {
    --dsn-accent:        #e05555;
    --dsn-accent-hover:  #b83333;
    --dsn-title:         #e8e6e1;
    --dsn-title-hover:   #e05555;
    --dsn-bg:            #1e1e1e;
    --dsn-bg-hover:      #252525;
    --dsn-border:        #2e2e2e;
    --dsn-cat-bg:        #c0171d;
    --dsn-cat-color:     #ffffff;
    --dsn-date-color:    #777777;
    --dsn-excerpt-color: #aaaaaa;
    --dsn-corr1:         #e05555;
    --dsn-corr2:         #5b9bd5;
    --dsn-img-bg:        #111111;
    --dsn-reading-color: #777777;
}

/* ── Wrapper ──────────────────────────────────────────────────── */
.dsn-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    font-family: 'Source Serif 4', Georgia, serif;
}

/* ── Grid ─────────────────────────────────────────────────────── */
.dsn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--dsn-border);
}
@media (max-width: 768px) { .dsn-grid { grid-template-columns: 1fr; } }

/* ── Card ─────────────────────────────────────────────────────── */
.dsn-card {
    display: flex;
    flex-direction: column;
    background: var(--dsn-bg);
    border-bottom: 1px solid var(--dsn-border);
    border-right: 1px solid var(--dsn-border);
    transition: background .2s;
    position: relative;
    overflow: hidden;
}
.dsn-card:nth-child(even) { border-right: none; }
@media (max-width: 768px) { .dsn-card { border-right: none; } }
.dsn-card:hover { background: var(--dsn-bg-hover); }
.dsn-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--dsn-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.dsn-card:hover::after { transform: scaleX(1); }

/* ── Immagine ─────────────────────────────────────────────────── */
.dsn-img-link {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--dsn-img-bg);
    text-decoration: none;
    flex-shrink: 0;
}
.dsn-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.dsn-card:hover .dsn-img-link img { transform: scale(1.03); }
.dsn-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
    display: block;
}

/* ── Body ─────────────────────────────────────────────────────── */
.dsn-body {
    padding: 22px 28px 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
@media (max-width: 640px) { .dsn-body { padding: 18px 18px 22px; } }

/* ── Meta: categoria + data + lettura ────────────────────────── */
.dsn-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.dsn-cat {
    font-family: 'Barlow', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dsn-cat-color);
    background: var(--dsn-cat-bg);
    padding: 3px 10px;
    text-decoration: none;
    transition: background .2s;
    flex-shrink: 0;
}
.dsn-cat:hover { background: var(--dsn-accent-hover); }
.dsn-date {
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    color: var(--dsn-date-color);
    letter-spacing: .3px;
    white-space: nowrap;
}
.dsn-reading {
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    color: var(--dsn-reading-color);
    letter-spacing: .3px;
    white-space: nowrap;
}
.dsn-reading::before { content: '· '; }

/* ── Breaking News ────────────────────────────────────────────── */
.dsn-breaking-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #C0171D;
    color: #fff;
    font-family: 'Barlow', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 10px;
    margin-bottom: 8px;
    align-self: flex-start;
}
.dsn-breaking-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    animation: dsn-blink 1.2s ease-in-out infinite;
}
@keyframes dsn-blink {
    0%, 100% { opacity: 1;  transform: scale(1);   }
    50%       { opacity: .3; transform: scale(.65); }
}

/* ── Titolo ──────────────────────────────────────────────────── */
.dsn-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--dsn-title);
    margin: 0 0 10px;
}
.dsn-title a { color: inherit; text-decoration: none; transition: color .2s; }
.dsn-title a:hover { color: var(--dsn-title-hover); }

/* ── Excerpt ─────────────────────────────────────────────────── */
.dsn-excerpt {
    font-size: 14px;
    line-height: 1.65;
    color: var(--dsn-excerpt-color);
    margin: 0 0 14px;
    font-weight: 300;
    flex: 1;
}

/* ── Correlati ───────────────────────────────────────────────── */
.dsn-correlati {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--dsn-border);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.dsn-corr-link {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    line-height: 1.35;
    transition: opacity .2s;
    display: block;
}
.dsn-corr-link:hover { opacity: .7; }
.dsn-corr-link.dsn-link-rosso { color: var(--dsn-corr1) !important; }
.dsn-corr-link.dsn-link-blu   { color: var(--dsn-corr2) !important; }

/* ── Paginazione ─────────────────────────────────────────────── */
.dsn-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dsn-pagination a,
.dsn-pagination span {
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 8px 16px;
    border: 1px solid var(--dsn-border);
    text-decoration: none;
    color: var(--dsn-title);
    transition: all .2s;
}
.dsn-pagination a:hover         { background: var(--dsn-accent); color: #fff; border-color: var(--dsn-accent); }
.dsn-pagination span.current    { background: var(--dsn-accent); color: #fff; border-color: var(--dsn-accent); }


/* ================================================================
   MOBILE — Layout stile Palermotoday + Scroll Snap
   ================================================================
   RICHIEDE nel CSS globale del tema (Foxiz → Custom CSS):

   @media (max-width: 767px) {
     html { scroll-snap-type: y mandatory; }
   }
   ================================================================ */
@media (max-width: 767px) {

    /* Ogni card = una "pagina" a schermo intero */
    .dsn-card {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        min-height: 100dvh;          /* dvh = viewport reale su mobile */
        border-bottom: none;
        border-right: none;
        display: flex;
        flex-direction: column;
    }

    /* Immagine: occupa ~55% dello schermo */
    .dsn-img-link {
        aspect-ratio: unset !important;
        height: 55dvh;
        flex: 0 0 55dvh;
    }

    /* Body: occupa il restante 45% */
    .dsn-body {
        flex: 1;
        padding: 20px 20px 24px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
    }

    /* Categoria: solo testo colorato, senza pillola */
    .dsn-cat {
        background: none !important;
        color: var(--dsn-accent) !important;
        padding: 0;
        font-size: 11px;
        letter-spacing: 2.5px;
    }
    .dsn-cat:hover { background: none !important; opacity: .7; }

    /* Data e lettura: più piccole */
    .dsn-date, .dsn-reading {
        font-size: 10px;
    }

    /* Titolo: grande e impattante come nello screenshot */
    .dsn-title {
        font-size: clamp(24px, 7vw, 32px) !important;
        font-weight: 900;
        line-height: 1.15;
        margin-top: 4px;
        margin-bottom: 10px;
    }

    /* Excerpt: visibile ma compatto */
    .dsn-excerpt {
        font-size: 14px;
        line-height: 1.55;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex: 0;
        margin-bottom: 12px;
    }

    /* Correlati: nascosti su mobile per non affollare */
    .dsn-correlati { display: none; }

    /* Breaking badge: allineato in alto */
    .dsn-breaking-badge {
        align-self: flex-start;
        margin-bottom: 6px;
    }
}


/* ================================================================
   INFINITE SCROLL / LOAD MORE
   ================================================================ */

/* ── Bottone Carica altri ─────────────────────────────────────── */
.dsn-loadmore-btn {
    display: block;
    margin: 32px auto 0;
    padding: 12px 36px;
    background: transparent;
    border: 2px solid var(--dsn-accent);
    color: var(--dsn-accent);
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.dsn-loadmore-btn:hover:not(:disabled) {
    background: var(--dsn-accent);
    color: #fff;
}
.dsn-loadmore-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ── Spinner tre pallini ──────────────────────────────────────── */
.dsn-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 28px 0;
}
.dsn-loader-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dsn-accent);
    animation: dsn-bounce 1.2s ease-in-out infinite;
}
.dsn-loader-dot:nth-child(2) { animation-delay: .2s; }
.dsn-loader-dot:nth-child(3) { animation-delay: .4s; }
@keyframes dsn-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: .4; }
    40%           { transform: scale(1);   opacity: 1;  }
}

/* ── Sentinel (invisibile) ────────────────────────────────────── */
.dsn-sentinel { height: 1px; }


/* ================================================================
   STAGGER ANIMATION — entrata card
   ================================================================ */
@keyframes dsn-fade-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dsn-card {
    animation: dsn-fade-up .45s ease both;
    animation-delay: calc(var(--dsn-i, 0) * 75ms);
}
/* Card iniettate via AJAX: riparte l'animazione */
.dsn-card.dsn-entering {
    animation: dsn-fade-up .4s ease both;
    animation-delay: calc(var(--dsn-i, 0) * 60ms);
}
/* Rispetta preferenza "ridurre le animazioni" */
@media (prefers-reduced-motion: reduce) {
    .dsn-card, .dsn-card.dsn-entering { animation: none; }
}

/* ================================================================
   BLUR-UP — immagini
   ================================================================ */
.dsn-img-link {
    position: relative;
    overflow: hidden;
    background-color: var(--dsn-img-bg);
}
/* Placeholder sfocato (tiny thumbnail come bg) */
.dsn-img-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--dsn-thumb-tiny);
    background-size: cover;
    background-position: center;
    filter: blur(12px);
    transform: scale(1.08);
    transition: opacity .6s ease;
    opacity: 1;
    z-index: 1;
}
/* Quando l'immagine reale è caricata */
.dsn-img-link.ds-img-loaded::before { opacity: 0; }
.dsn-img-link img {
    position: relative;
    z-index: 2;
    transition: opacity .4s ease, transform .4s ease;
    opacity: 0;
}
.dsn-img-link.ds-img-loaded img { opacity: 1; }

/* ================================================================
   SKELETON LOADING — sostituisce spinner
   ================================================================ */
.dsn-skeleton-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--dsn-border);
}
@media (max-width: 768px) { .dsn-skeleton-grid { grid-template-columns: 1fr; } }

.dsn-skeleton-card {
    background: var(--dsn-bg);
    border-bottom: 1px solid var(--dsn-border);
    border-right: 1px solid var(--dsn-border);
}
.dsn-skeleton-card:nth-child(even) { border-right: none; }
@media (max-width: 768px) { .dsn-skeleton-card { border-right: none; } }

.dsn-skeleton-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--dsn-skeleton-base, #e8e4df);
}
.dsn-skeleton-body { padding: 22px 28px 26px; }
.dsn-skeleton-line {
    border-radius: 2px;
    background: var(--dsn-skeleton-base, #e8e4df);
    margin-bottom: 10px;
}

/* Shimmer animato */
.dsn-skeleton-img,
.dsn-skeleton-line {
    background: linear-gradient(
        90deg,
        var(--dsn-skeleton-base, #e8e4df) 25%,
        var(--dsn-skeleton-shine, #f5f2ee) 50%,
        var(--dsn-skeleton-base, #e8e4df) 75%
    );
    background-size: 200% 100%;
    animation: dsn-shimmer 1.6s infinite linear;
}
@keyframes dsn-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
/* Dark mode skeleton */
body.dark-scheme .dsn-skeleton-img,
body.dark-scheme .dsn-skeleton-line,
body.is-dark .dsn-skeleton-img,
body.is-dark .dsn-skeleton-line {
    --dsn-skeleton-base:  #2a2a2a;
    --dsn-skeleton-shine: #383838;
}