/* Blog — articoli.php (/blog/…) e articolo-singolo.php (/blog/<slug>).
   Base grafica: css/home.css (variabili --nh-*, .nh-post, .nh-btn) e css/servizio.css (.sv-eyebrow, .sv-cta).
   Compatibilità: niente "inset", riserva per aspect-ratio, margini al posto del gap dove serve. */

/* --------------------------------------------------------------------------
   Elenco: intestazione e filtri
   -------------------------------------------------------------------------- */
/* Introduzione: atmosfera salvia chiarissima che sfuma nel bianco; ingresso più vicino alle briciole */
.bl-intro {
    padding-top: clamp(40px, 5vw, 64px);          /* prima: 72–136 px */
    padding-bottom: clamp(32px, 4vw, 52px);
    background: linear-gradient(180deg, #eef5f2 0%, #f3f8f6 45%, #fafcfb 78%, #fff 100%);
}
.bl-title { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem); max-width: 14em; }
.bl-title:focus { outline: none; }
.bl-lead { margin-top: 18px; }

.bl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: clamp(28px, 4vw, 44px);
}

.bl-filter {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 980px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--nh-line);
    color: var(--nh-ink-2);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-decoration: none;
    white-space: nowrap;
    transition: box-shadow .2s ease, color .2s ease, background-color .2s ease;
}

.bl-filter:hover { box-shadow: inset 0 0 0 1px var(--nh-sage); color: var(--nh-sage); }
.bl-filter[aria-current="page"] { background: var(--nh-sage-deep); box-shadow: none; color: #fff; font-weight: 600; }
.bl-filter--sm { min-height: 30px; padding: 0 12px; font-size: .8125rem; }

/* Telefono: i filtri scorrono in orizzontale su una riga */
@media (max-width: 699px) {
    .bl-filters {
        flex-wrap: nowrap;
        margin-left: calc(-1 * var(--nh-gutter));
        margin-right: calc(-1 * var(--nh-gutter));
        padding: 0 var(--nh-gutter) 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .bl-filters::-webkit-scrollbar { display: none; }
}

.bl-content { transition: opacity .25s ease; }
.bl-content.is-loading { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------------
   Griglia (stesse schede della home: .nh-post) e pagine
   -------------------------------------------------------------------------- */
/* Griglia: fondo appena differenziato, che parte dal bianco dell'introduzione */
.bl-list {
    padding-top: clamp(24px, 3vw, 40px);
    padding-bottom: var(--nh-section);
    background: linear-gradient(180deg, #fff 0%, #f7f9f8 180px, #f7f9f8 100%);
}

/* "Continua a leggere": stesso fondo differenziato della griglia del blog */
.bl-related { background: linear-gradient(180deg, #fff 0%, #f7f9f8 180px, #f7f9f8 100%); }

/* Sul fondo differenziato le schede sono bianche, con un contorno quasi invisibile */
.bl-list .nh-post,
.bl-related .nh-post {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(13, 38, 37, .05), 0 1px 2px rgba(13, 38, 37, .05);
}

.bl-grid {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
}

@media (min-width: 700px)  { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bl-grid__item { display: flex; min-width: 0; }

/* Schede del blog: stesse proporzioni per tutte, testi limitati a poche righe */
.bl-grid .nh-post__media { aspect-ratio: 3 / 2; }
.bl-grid .nh-post__body { flex: 1 1 auto; gap: 6px; padding: 20px 22px 22px; }
.bl-grid .nh-post__cat { font-size: .8125rem; letter-spacing: .01em; }
.bl-grid .nh-post__title { font-size: 1.1875rem; line-height: 1.25; -webkit-line-clamp: 2; }
.bl-grid .nh-post__excerpt { font-size: .9375rem; line-height: 1.45; -webkit-line-clamp: 2; }
.bl-grid .nh-post__date { margin-top: auto; padding-top: 10px; font-size: .75rem; letter-spacing: .01em; color: #86868b; }

/* Ingresso: comparsa con lieve salita, una sola volta (JS in articoli.php). Ombra al passaggio del
   mouse: quella di .nh-post in home.css, con un sollevamento più contenuto. */
@media (prefers-reduced-motion: no-preference) {
    .nh-motion [data-bl-card="wait"] { opacity: 0; transform: translate3d(0, 18px, 0); }
    .nh-motion [data-bl-card="in"] {
        opacity: 1;
        transform: none;
        transition: opacity .6s ease, transform .7s var(--nh-ease);
        transition-delay: calc(var(--i, 0) * 90ms);
    }
}

@media (hover: hover) and (pointer: fine) {
    .nh-motion .bl-grid .nh-post:hover { transform: translate3d(0, -4px, 0); }
}
.bl-empty { padding: 24px 0; }

.bl-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(40px, 5vw, 64px);
}

.bl-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--nh-mist);
    color: var(--nh-ink);
    font-weight: 600;
    text-decoration: none;
}

.bl-page:hover { background: var(--nh-sage-tint); color: var(--nh-sage); }
.bl-page[aria-current="page"] { background: var(--nh-sage); color: #fff; }

/* --------------------------------------------------------------------------
   Articolo: barra di lettura
   -------------------------------------------------------------------------- */
.bl-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: 3px;
    pointer-events: none;
}

.bl-progress span {
    display: block;
    height: 100%;
    background: var(--nh-sage, #246b6a);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* --------------------------------------------------------------------------
   Articolo: testata e copertina
   -------------------------------------------------------------------------- */
/* Testata: stessa atmosfera salvia dell'elenco, a tutta larghezza, che sfuma nel bianco del testo */
.bl-art-top { background: linear-gradient(180deg, #eef5f2 0%, #f3f8f6 45%, #fafcfb 78%, #fff 100%); }

.bl-art-head {
    max-width: calc(720px + 2 * var(--nh-gutter));
    padding-top: clamp(32px, 4.5vw, 64px);          /* prima: 40–88 px, come l'elenco del blog */
    padding-bottom: clamp(36px, 5vw, 64px);
}

.bl-art-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.bl-art-title { font-size: clamp(2.125rem, 1.3rem + 3.4vw, 4rem); line-height: 1.05; }
.bl-art-lead { margin-top: 20px; }

.bl-art-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.bl-art-meta__avatar {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 22%;
}

.bl-art-meta p { display: grid; gap: 2px; margin: 0; font-size: .9375rem; color: var(--nh-ink-2); }
.bl-art-meta__name { color: var(--nh-ink); font-weight: 600; text-decoration: none; }
.bl-art-meta__name:hover { color: var(--nh-sage); }

/* Copertina discreta accanto al titolo (sotto il titolo su telefono) */
.bl-art-thumb { margin: 28px 0 0; }

.bl-art-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 150px;
    border-radius: var(--nh-r-m);
    object-fit: cover;
    background: var(--nh-mist);
}

@media (min-width: 700px) {
    .bl-art-head--media {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(180px, 24vw, 220px);
        gap: clamp(24px, 4vw, 36px);
        align-items: center;
    }
    .bl-art-thumb { margin: 0; }
    .bl-art-thumb img { aspect-ratio: 4 / 3; max-height: none; }
}


/* --------------------------------------------------------------------------
   Articolo: impaginazione testo + indice
   -------------------------------------------------------------------------- */
.bl-art-layout {
    display: grid;
    gap: 28px;
    max-width: calc(720px + 2 * var(--nh-gutter));   /* stessa colonna della testata */
    padding-bottom: var(--nh-section);
}
.bl-art-main { min-width: 0; max-width: 720px; }

/* PC: indice a sinistra (240 px), testo a destra (720 px); titolo allineato al testo */
@media (min-width: 1024px) {
    .bl-art-layout { grid-template-columns: minmax(0, 720px); justify-content: center; }
    .bl-art-layout--toc {
        max-width: calc(1024px + 2 * var(--nh-gutter));
        grid-template-columns: 240px minmax(0, 720px);
        gap: 64px;
        justify-content: center;
    }
    .bl-article--toc .bl-art-head {
        max-width: calc(1024px + 2 * var(--nh-gutter));
        padding-left: calc(var(--nh-gutter) + 304px);
    }
    .bl-toc { position: relative; }
    .bl-toc__box { position: -webkit-sticky; position: sticky; top: 140px; }
}

.bl-toc__box {
    padding: 18px 20px;
    border-radius: var(--nh-r-m);
    background: var(--nh-mist);
}

.bl-toc__title {
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nh-ink-2);
}

.bl-toc__list {
    display: grid;
    gap: 2px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: bl-toc;
}

.bl-toc__list a {
    display: block;
    padding: 7px 10px;
    border-radius: 10px;
    color: var(--nh-ink-2);
    font-size: .9375rem;
    line-height: 1.35;
    text-decoration: none;
}

.bl-toc__list a:hover { background: #fff; color: var(--nh-sage); }
.bl-toc__list a[aria-current] { background: #fff; color: var(--nh-sage); font-weight: 600; }

/* --------------------------------------------------------------------------
   Articolo: testo scritto nell'editor del pannello
   -------------------------------------------------------------------------- */
.bl-prose {
    font-size: 1.125rem;
    line-height: 1.75;
    color: #2b2f33;
    overflow-wrap: break-word;
}

.bl-prose > :first-child { margin-top: 0; }
.bl-prose p, .bl-prose ul, .bl-prose ol, .bl-prose blockquote, .bl-prose table { margin: 0 0 1.25em; }
.bl-prose p:empty { display: none; }

.bl-prose h2, .bl-prose h3, .bl-prose h4 {
    color: var(--nh-ink);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.022em;
    scroll-margin-top: 140px;
}

.bl-prose h2 { margin: 2em 0 .6em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.bl-prose h3 { margin: 1.7em 0 .5em; font-size: 1.3125rem; }
.bl-prose h4 { margin: 1.5em 0 .4em; font-size: 1.125rem; }

.bl-prose ul { list-style: disc; padding-left: 1.3em; }
.bl-prose ol { list-style: decimal; padding-left: 1.3em; }
.bl-prose li { margin-bottom: .45em; padding-left: .2em; }
.bl-prose li::marker { color: var(--nh-sage); }

.bl-prose strong, .bl-prose b { color: var(--nh-ink); font-weight: 700; }

.bl-prose a { color: var(--nh-sage); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bl-prose a:hover { text-decoration-thickness: 2px; }

.bl-prose blockquote {
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--nh-sage);
    color: var(--nh-ink-2);
    font-size: 1.1875rem;
}

.bl-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2em auto;
    border-radius: var(--nh-r-m);
}

.bl-prose iframe {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    margin: 2em 0;
    border: 0;
    border-radius: var(--nh-r-m);
    background: #000;
}

.bl-prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.bl-prose th, .bl-prose td { padding: 10px 12px; border-bottom: 1px solid var(--nh-line); text-align: left; }

/* Pulsanti inseriti dall'editor (classi "rounded-full bg-[#246b6a] text-white …") */
.bl-prose a.text-white {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 1.4em;
    border-radius: 980px;
    background: var(--nh-sage);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
}

.bl-prose a.text-white:hover { background: var(--nh-sage-hover); }

/* Avviso "video a fine lettura" inserito dall'editor */
.bl-prose .border-l-4 { margin-bottom: 1.5em; line-height: 1.4; }
.bl-prose .border-l-4 span { color: var(--nh-sage); }

/* --------------------------------------------------------------------------
   Articolo: condivisione e autrice
   -------------------------------------------------------------------------- */
.bl-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--nh-line);
}

.bl-share__back { display: inline-flex; align-items: center; gap: 8px; }
.bl-share__links { display: flex; align-items: center; gap: 8px; }
.bl-share__label { margin-right: 4px; font-size: .875rem; font-weight: 600; color: var(--nh-ink-2); }

.bl-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--nh-mist);
    color: var(--nh-ink);
    font-size: 1.0625rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.bl-share__btn[hidden] { display: none; }
.bl-share__btn:hover { background: var(--nh-sage); color: #fff; }
.bl-share__btn--wa:hover { background: #25d366; }
.bl-share__btn--fb:hover { background: #1877f2; }
.bl-share__done { font-size: .875rem; color: var(--nh-sage); }

.bl-author {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 40px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--nh-r-l);
    background: var(--nh-sage-tint);
}

.bl-author__photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 22%;
}

.bl-author__body p { margin: 0; }
.bl-author__eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--nh-sage); }
.bl-author__name { margin-top: 2px !important; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.bl-author__role { margin-top: 4px !important; font-size: .9375rem; color: var(--nh-ink-2); }

.bl-author__titles {
    display: grid;
    gap: 4px;
    margin: 14px 0 16px;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
}

.bl-author__titles li { position: relative; padding-left: 18px; }
.bl-author__titles li::before {
    content: "";
    position: absolute;
    top: .6em;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--nh-sage);
}

@media (min-width: 600px) {
    .bl-author__photo { width: 96px; height: 96px; }
}

/* Riserva per i Safari precedenti al supporto di aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .bl-art-cover img { height: auto; }
    .bl-prose iframe { height: 56.25vw !important; max-height: 405px; }
}

@media print {
    .bl-progress, .bl-toc, .bl-share, .bl-related, .sv-cta { display: none !important; }
}

/* Titolo accanto alla foto: scala ridotta, resta su poche righe anche quando è lungo */
.bl-art-head--media .bl-art-title { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.125rem); }

/* --------------------------------------------------------------------------
   Ingresso delle testate e riflesso del titolo: stessa sequenza delle altre pagine
   (keyframes nh-rise e .nh-sheen in css/home.css)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .bl-intro [data-nh-enter],
    .bl-art-head [data-nh-enter] {
        animation: nh-rise .9s var(--nh-ease) both;
        animation-delay: calc(var(--i, 0) * 70ms);
    }
    .bl-content[data-ajax] [data-nh-enter] { animation: none; }   /* cambio di filtro: nessuna ripetizione */
    .nh-motion [data-bl-live]:not([data-live]) .nh-sheen { animation-play-state: paused; }
}

/* Etichetta discreta sulla prima scheda ("Ultimo pubblicato"): stesse dimensioni delle altre */
.bl-grid .nh-post__media { position: relative; }

.nh-post__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 10px;
    border-radius: 980px;
    background: linear-gradient(135deg, #2c8582 0%, var(--nh-sage) 55%, #1b5453 100%);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    box-shadow: 0 6px 16px -6px rgba(13, 38, 37, .55), 0 1px 2px rgba(13, 38, 37, .25),
                inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Punto luminoso davanti al testo */
.nh-post__badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9fe0d6;
    box-shadow: 0 0 0 3px rgba(159, 224, 214, .25);
}

/* Miniatura accanto al titolo: passe-partout bianco, ombra a più livelli e un foglio salvia
   leggermente ruotato dietro, come una stampa appoggiata sulla pagina */
.bl-art-thumb {
    position: relative;
    z-index: 0;
}

.bl-art-thumb::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 10px;
    right: -8px;
    bottom: -10px;
    left: 8px;
    border-radius: calc(var(--nh-r-m) + 6px);
    background: linear-gradient(145deg, #d7e9e4 0%, #bcd8d1 100%);
    transform: rotate(2.5deg);
}

.bl-art-thumb img {
    padding: 6px;
    border-radius: calc(var(--nh-r-m) + 6px);
    background: #fff;
    box-shadow:
        0 1px 2px rgba(13, 38, 37, .08),
        0 10px 24px -10px rgba(13, 38, 37, .28),
        0 28px 48px -28px rgba(13, 38, 37, .35);
}

/* Telefono: fascia bassa, foglio di sfondo appena accennato */
@media (max-width: 699px) {
    .bl-art-thumb::before { top: 8px; right: -4px; bottom: -6px; left: 4px; transform: rotate(1.2deg); }
}