/* Gresio — blog. Vestito della fase restyling; i token sono in style.css (:root).
   Copre l'indice delle guide (mockup "Blog.dc.html") e l'articolo singolo
   (mockup "Articolo Blog.dc.html"), desktop e mobile 390px.
   Regole: solo var(--gresio-*) per i colori, spigoli vivi, ombra card
   var(--gresio-ombra-card). */

/* ==========================================================================
   CONTENITORI — Storefront limita .col-full a ~1064px: il blog respira di più
   (mockup: 1440 meno 48 di padding per lato). L'articolo resta più stretto
   per la leggibilità.
   ========================================================================== */
.gresio-blog-indice .site-content .col-full {
    max-width: 1320px;
}

.gresio-articolo .site-content .col-full {
    max-width: 1160px;
}

.gresio-blog-indice #primary,
.gresio-articolo #primary {
    float: none;
    width: 100%;
    margin: 0;
}

/* La testata nativa di Storefront (categoria/tag/ricerca) è sostituita dalla
   nostra: su categoria e tag è già svuotata via filtro PHP, qui si toglie
   anche lo spazio che occuperebbe. */
.gresio-blog-indice .page-header {
    display: none;
}

/* Sull'indice site-main torna un blocco: la griglia è il div interno. */
.gresio-blog-indice .site-main {
    display: block;
}

/* ==========================================================================
   ELEMENTI COMUNI — kicker, bottoni, chip
   ========================================================================== */
.gresio-blog-indice .gresio-kicker,
.gresio-articolo .gresio-kicker {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gresio-blue);
    margin: 0 0 10px;
}

.gresio-blog-indice .gresio-kicker a,
.gresio-articolo .gresio-kicker a {
    color: inherit;
    text-decoration: none;
}

.gresio-blog-indice .gresio-kicker-piccolo,
.gresio-articolo .gresio-kicker-piccolo {
    font-size: 12px;
    letter-spacing: 0.12em;
}

.gresio-blog-indice .gresio-kicker-scuro {
    color: var(--gresio-accent);
}

.gresio-blog-indice .gresio-btn-primario,
.gresio-articolo .gresio-btn-primario {
    display: inline-block;
    background: var(--gresio-ink);
    color: var(--gresio-accent);
    font-size: 16px;
    font-weight: 800;
    padding: 15px 30px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
}

.gresio-blog-indice .gresio-btn-primario:hover,
.gresio-articolo .gresio-btn-primario:hover {
    background: var(--gresio-footer);
    color: var(--gresio-accent);
    text-decoration: none;
}

.gresio-articolo .gresio-btn-secondario {
    display: inline-block;
    border: 1.5px solid var(--gresio-blue-dark);
    color: var(--gresio-blue);
    background: transparent;
    font-size: 14.5px;
    font-weight: 700;
    padding: 12px 22px;
    text-decoration: none;
}

.gresio-articolo .gresio-btn-secondario:hover {
    opacity: 0.82;
    text-decoration: none;
}

.gresio-blog-indice .gresio-btn-blocco,
.gresio-articolo .gresio-btn-blocco {
    display: block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.gresio-articolo .gresio-btn-scuro {
    display: inline-block;
    background: var(--gresio-accent);
    color: var(--gresio-accent-ink);
    font-size: 15px;
    font-weight: 800;
    padding: 14px 26px;
    text-decoration: none;
    flex: 0 0 auto;
}

.gresio-articolo .gresio-btn-scuro:hover {
    background: var(--gresio-accent-hover);
    color: var(--gresio-accent-ink);
    text-decoration: none;
}

.gresio-articolo .gresio-btn-mini {
    display: inline-block;
    border: 1px solid var(--gresio-input-border);
    background: var(--gresio-superficie);
    color: var(--gresio-ink);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
}

.gresio-articolo .gresio-btn-mini:hover {
    border-color: var(--gresio-blue-dark);
    color: var(--gresio-blue);
    text-decoration: none;
}

.gresio-blog-indice .gresio-chip,
.gresio-articolo .gresio-chip {
    display: inline-block;
    border: 1px solid var(--gresio-input-border);
    background: var(--gresio-superficie);
    color: var(--gresio-ink);
    font-size: 13.5px;
    font-weight: 700;
    padding: 8px 16px;
    text-decoration: none;
}

.gresio-blog-indice .gresio-chip:hover,
.gresio-articolo .gresio-chip:hover {
    border-color: var(--gresio-blue-dark);
    color: var(--gresio-blue);
    text-decoration: none;
}

.gresio-blog-indice .gresio-chip-attivo,
.gresio-blog-indice .gresio-chip-attivo:hover {
    background: var(--gresio-ink);
    border-color: var(--gresio-ink);
    color: var(--gresio-scuro-testo);
}

/* ==========================================================================
   INDICE — testata
   ========================================================================== */
.gresio-blog-testata {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 48px;
    padding: 8px 0 32px;
}

.gresio-blog-h1 {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 800;
    line-height: 1.12;
    margin: 0 0 10px;
    text-wrap: pretty;
}

.gresio-blog-sottotitolo {
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--gresio-secondario);
    margin: 0;
    max-width: 640px;
}

.gresio-blog-cerca {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.gresio-blog-cerca input[type="search"] {
    border: 1px solid var(--gresio-input-border);
    background: var(--gresio-superficie);
    padding: 12px 16px;
    font-size: 14.5px;
    width: 240px;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    color: var(--gresio-ink);
}

.gresio-blog-cerca button {
    border: 0;
    background: var(--gresio-ink);
    color: var(--gresio-accent);
    font-weight: 700;
    font-size: 14.5px;
    padding: 12px 20px;
    cursor: pointer;
}

.gresio-blog-cerca button:hover {
    background: var(--gresio-footer);
    color: var(--gresio-accent);
}

.gresio-blog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding-bottom: 32px;
}

/* ==========================================================================
   INDICE — articolo in evidenza (card scura split)
   ========================================================================== */
.gresio-evidenza {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    background: var(--gresio-ink);
    color: var(--gresio-scuro-testo);
    text-decoration: none;
    margin-bottom: 44px;
}

.gresio-evidenza:hover {
    text-decoration: none;
    color: var(--gresio-scuro-testo);
    opacity: 0.94;
}

.gresio-evidenza-foto {
    width: 100%;
    height: 100%;
    min-height: 320px;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.gresio-evidenza-corpo {
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.gresio-evidenza-titolo {
    display: block;
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 14px;
    color: var(--gresio-scuro-testo);
    text-wrap: pretty;
}

.gresio-evidenza-estratto {
    display: block;
    font-size: 16px;
    line-height: 1.6;
    color: var(--gresio-scuro-secondario);
    margin-bottom: 22px;
    max-width: 60ch;
}

.gresio-evidenza-cta {
    font-size: 15px;
    font-weight: 700;
    color: var(--gresio-accent);
}

.gresio-evidenza-lettura {
    color: var(--gresio-scuro-muted);
    font-weight: 600;
    margin-left: 10px;
}

/* ==========================================================================
   INDICE — griglia e card
   ========================================================================== */
.gresio-blog-griglia {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

/* Nella griglia ci sono gli <article> di Storefront: la card vera è il link. */
.gresio-blog-indice article.post {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    display: block;
}

.gresio-bcard {
    display: block;
    background: var(--gresio-superficie);
    box-shadow: var(--gresio-ombra-card);
    color: var(--gresio-ink);
    text-decoration: none;
    height: 100%;
}

.gresio-bcard:hover {
    text-decoration: none;
    color: var(--gresio-ink);
    box-shadow: 0 4px 22px rgba(38, 48, 42, .13);
}

.gresio-bcard-foto {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    margin: 0;
}

/* ATTENZIONE alla specificità: style.css impone
   `.gresio-blog-indice article.post img { width:100%; margin:0 0 4px }`
   (0,2,2), che batte `.gresio-bcard-foto` (0,1,0). Senza questa versione
   "pesante" (0,3,2) la foto della card ignora le nostre misure — ed è quello
   che rompeva la card orizzontale su telefono (v. media query 760px). */
.gresio-blog-indice article.post img.gresio-bcard-foto {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    display: block;
    margin: 0;
}

.gresio-bcard-corpo {
    display: block;
    /* Difesa strutturale: dentro un contenitore flex un figlio non scende
       sotto la larghezza del proprio contenuto (min-width:auto). Con una foto
       a larghezza fissa accanto, senza questo il testo può essere schiacciato
       a zero e i titoli si impilano una lettera per riga. */
    min-width: 0;
    padding: 22px 24px 26px;
}

.gresio-bcard-titolo {
    display: block;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 800;
    margin: 0 0 10px;
    color: var(--gresio-ink);
    text-wrap: pretty;
    overflow-wrap: break-word;
}

.gresio-bcard-estratto {
    display: block;
    font-size: 14px;
    line-height: 1.55;
    color: var(--gresio-secondario);
    margin-bottom: 14px;
}

.gresio-bcard-lettura {
    display: block;
    font-size: 13px;
    color: var(--gresio-muted);
}

/* ==========================================================================
   INDICE — paginazione numerata
   ========================================================================== */
.gresio-blog-pagine {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 40px 0 8px;
    font-size: 14.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gresio-blog-pagine .page-numbers {
    display: inline-block;
    border: 1px solid var(--gresio-input-border);
    background: var(--gresio-superficie);
    color: var(--gresio-ink);
    padding: 10px 16px;
    text-decoration: none;
    line-height: 1;
}

.gresio-blog-pagine a.page-numbers:hover {
    border-color: var(--gresio-blue-dark);
    color: var(--gresio-blue);
    text-decoration: none;
}

.gresio-blog-pagine .page-numbers.current {
    background: var(--gresio-ink);
    border-color: var(--gresio-ink);
    color: var(--gresio-accent);
}

.gresio-blog-pagine .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    color: var(--gresio-muted);
}

/* ==========================================================================
   BANDE A PIENA LARGHEZZA (stampate dopo #content: niente trucchi 100vw)
   ========================================================================== */
.gresio-banda-campioni {
    background: var(--gresio-blue-tint);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin-top: 56px;
}

.gresio-banda-campioni-sola {
    grid-template-columns: 1fr;
}

.gresio-banda-campioni-testo {
    padding: 52px 48px;
    max-width: 660px;
    margin-left: auto;
}

.gresio-banda-campioni-sola .gresio-banda-campioni-testo {
    margin: 0 auto;
    max-width: 900px;
    text-align: center;
}

.gresio-banda-campioni h2 {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 16px;
}

.gresio-banda-campioni-copy {
    font-size: 16px;
    line-height: 1.6;
    color: var(--gresio-ink-2);
    margin: 0 0 28px;
    max-width: 56ch;
}

.gresio-banda-campioni-foto {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
}

.gresio-banda-newsletter {
    background: var(--gresio-ink);
    color: var(--gresio-scuro-testo);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
    padding: 40px 48px;
}

.gresio-banda-newsletter-testo strong {
    font-size: 22px;
    display: block;
    margin-bottom: 4px;
}

.gresio-banda-newsletter-testo span {
    font-size: 14.5px;
    color: var(--gresio-scuro-muted);
}

.gresio-banda-newsletter-form {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.gresio-banda-newsletter-form input {
    border: 1px solid var(--gresio-scuro-muted);
    background: var(--gresio-footer);
    color: var(--gresio-scuro-testo);
    padding: 14px 18px;
    font-size: 15px;
    width: 300px;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.gresio-banda-newsletter-form button {
    background: var(--gresio-accent);
    color: var(--gresio-accent-ink);
    border: 0;
    padding: 14px 26px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

/* ==========================================================================
   ARTICOLO — impaginazione a due colonne
   ========================================================================== */
.gresio-articolo .site-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 56px;
    align-items: start;
}

.gresio-art-testata {
    grid-column: 1 / -1;
    padding-bottom: 8px;
}

.gresio-articolo article.post {
    grid-column: 1;
    max-width: none;
    margin: 0;
    min-width: 0;
    padding: 0;
    border: 0;
}

.gresio-art-colonna {
    grid-column: 2;
    position: sticky;
    top: 24px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

/* ==========================================================================
   ARTICOLO — testata
   ========================================================================== */
.gresio-art-titolo {
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 800;
    line-height: 1.12;
    margin: 0 0 18px;
    max-width: 900px;
    text-wrap: pretty;
}

.gresio-art-firma {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    align-items: center;
    font-size: 14px;
    color: var(--gresio-muted);
    margin-bottom: 30px;
}

.gresio-art-autore {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gresio-art-autore strong {
    color: var(--gresio-ink);
}

.gresio-art-sigla {
    width: 36px;
    height: 36px;
    background: var(--gresio-ink);
    color: var(--gresio-accent);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.gresio-art-lettura {
    font-variant-numeric: tabular-nums;
}

.gresio-art-azioni {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.gresio-art-foto,
.gresio-articolo article.post img.wp-post-image {
    width: 100%;
    height: 440px;
    object-fit: cover;
    display: block;
    margin: 0 0 8px;
    aspect-ratio: auto;
}

/* ==========================================================================
   ARTICOLO — corpo
   ========================================================================== */
.gresio-articolo .entry-content {
    padding-top: 36px;
}

.gresio-articolo .entry-content h2 {
    font-size: clamp(21px, 2.4vw, 27px);
    font-weight: 800;
    margin: 36px 0 14px;
    scroll-margin-top: 24px;
}

.gresio-articolo .entry-content h3 {
    font-size: clamp(18px, 2vw, 21px);
    font-weight: 800;
    margin: 26px 0 10px;
}

.gresio-articolo .entry-content p,
.gresio-articolo .entry-content li {
    font-size: 16px;
    line-height: 1.75;
    color: var(--gresio-ink-2);
    max-width: 68ch;
}

.gresio-articolo .entry-content a {
    color: var(--gresio-blue);
    font-weight: 600;
    text-decoration: underline;
}

.gresio-articolo .entry-content a:hover {
    opacity: 0.82;
}

.gresio-articolo .entry-content img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   INFOGRAFICHE SVG — leggibili anche su schermo stretto.

   Problema: style.css le fa scalare (`svg { width:100% }`) dentro un riquadro
   `overflow-x: visible`. Il disegno ha viewBox 720 di larghezza; su un telefono
   il riquadro è ~292px, quindi la scala scende a 0,40 e un testo dichiarato
   11px viene disegnato a 4,5px reali (3,6px a 320). Illeggibile, e senza
   scorrimento non c'è modo di ingrandirlo.

   Perché NON si ingrandisce il testo dentro l'SVG: le coordinate sono fisse.
   Nell'infografica "linea del tempo" l'ultima etichetta arriva già a x=713 su
   720 disponibili; portando il font da 11 a 13 unità il testo uscirebbe dal
   viewBox e verrebbe tagliato. Quindi il disegno si tiene alla sua scala e si
   rende scorrevole il riquadro, come già si fa con le tabelle (DESIGN.md).

   `min-width` sotto i 1200px = 800: alla scala 800/720 = 1,11 il testo più
   piccolo dell'infografica (11) risulta 12,2px reali, cioè sopra il minimo di
   12px richiesto dal progetto. Sopra i 1200px il riquadro è già largo ~746px
   (scala 1,04, disegno tutto visibile): lì non si tocca nulla e non compare
   nessuna barra di scorrimento.
   -------------------------------------------------------------------------- */
.gresio-articolo .gresio-infografica {
    overflow-x: auto;
    /* Lo scorrimento orizzontale non deve propagarsi alla pagina né innescare
       il "torna indietro" con lo swipe sul telefono. */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Segnale visivo "si può scorrere": due velature ai bordi che compaiono
       SOLO quando c'è altro da vedere e spariscono a fine corsa (le due
       sfumature di copertura sono `local`, quindi scorrono col disegno e
       nascondono l'ombra corrispondente quando si è al bordo).
       Non è decorazione: è la stessa funzione dell'ombra di rilievo, con la
       stessa tinta già usata in questo file per l'ombra della card. */
    background-color: var(--gresio-bg);
    background-image:
        linear-gradient(to right, var(--gresio-bg), transparent),
        linear-gradient(to left, var(--gresio-bg), transparent),
        linear-gradient(to right, rgba(38, 48, 42, .16), transparent),
        linear-gradient(to left, rgba(38, 48, 42, .16), transparent);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 26px 100%, 26px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
}

.gresio-articolo .gresio-infografica svg {
    display: block;
    width: 100%;
    /* Mai sotto la dimensione nativa del disegno: sotto i 720px il testo
       scenderebbe di nuovo sotto la misura con cui è stato disegnato. */
    min-width: 720px;
    max-width: none;
    height: auto;
}

.gresio-articolo .gresio-infografica figcaption {
    /* La didascalia resta alla larghezza della colonna, non del disegno. */
    position: sticky;
    left: 0;
}

/* Box "Risposta breve": passa al fondo sabbia chiara (prima era bordato). */
.gresio-articolo .answer {
    background: var(--gresio-blue-tint);
    border: 0;
    padding: 26px 30px;
    margin: 0 0 36px;
}

.gresio-articolo .answer .klabel {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gresio-blue);
    margin-bottom: 10px;
}

.gresio-articolo .answer p {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--gresio-ink);
    max-width: 68ch;
    margin: 0;
}

/* Card "prodotto citato" (shortcode [gresio_prodotto id="…"]) */
.cp-prodotto-citato {
    display: flex;
    gap: 20px;
    align-items: center;
    background: var(--gresio-superficie);
    border: 1px solid var(--gresio-border);
    padding: 22px 26px;
    margin: 0 0 32px;
}

.cp-prodotto-citato .cp-citato-media {
    flex: 0 0 auto;
    line-height: 0;
}

.cp-prodotto-citato .cp-citato-foto {
    width: 88px;
    height: 88px;
    object-fit: cover;
    display: block;
}

.cp-prodotto-citato .cp-citato-testo {
    flex: 1;
    min-width: 0;
}

.cp-prodotto-citato .cp-citato-kicker {
    display: block;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--gresio-muted);
    margin-bottom: 4px;
}

.cp-prodotto-citato .cp-citato-nome {
    display: block;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 4px;
}

.cp-prodotto-citato .cp-citato-prezzo {
    display: block;
    font-size: 14px;
    color: var(--gresio-secondario);
    font-variant-numeric: tabular-nums;
}

.cp-prodotto-citato .cp-citato-cta {
    flex: 0 0 auto;
    border: 1.5px solid var(--gresio-blue-dark);
    color: var(--gresio-blue);
    font-size: 14px;
    font-weight: 700;
    padding: 11px 20px;
    text-decoration: none;
}

.cp-prodotto-citato .cp-citato-cta:hover {
    opacity: 0.82;
    text-decoration: none;
}

/* CTA campione a fondo articolo + tag */
.gresio-art-cta {
    background: var(--gresio-ink);
    color: var(--gresio-scuro-testo);
    padding: 30px 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    margin-top: 40px;
}

.gresio-art-cta strong {
    font-size: 19px;
    display: block;
    margin-bottom: 6px;
}

.gresio-art-cta span {
    font-size: 14.5px;
    color: var(--gresio-scuro-secondario);
}

.gresio-art-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 32px;
}

.gresio-art-tag-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gresio-muted);
}

.gresio-articolo .gresio-art-tag .gresio-chip {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 13px;
}

/* ==========================================================================
   ARTICOLO — colonna laterale
   ========================================================================== */
.gresio-art-box {
    border: 1px solid var(--gresio-border);
    background: var(--gresio-superficie);
    padding: 22px 24px;
}

.gresio-art-box-titolo {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: var(--gresio-ink);
}

.gresio-art-indice,
.gresio-art-correlate {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gresio-art-indice li {
    margin-bottom: 10px;
}

.gresio-art-indice li:last-child {
    margin-bottom: 0;
}

.gresio-art-indice a {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--gresio-ink-2);
    text-decoration: none;
    line-height: 1.35;
    display: block;
}

.gresio-art-indice a:hover {
    color: var(--gresio-blue);
    text-decoration: none;
}

.gresio-art-box-campioni {
    background: var(--gresio-blue-tint);
    border: 0;
    padding: 24px;
}

.gresio-art-box-campioni p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--gresio-ink-2);
    margin: 0 0 16px;
}

.gresio-articolo .gresio-art-box-campioni .gresio-btn-primario {
    font-size: 14.5px;
    padding: 13px;
}

.gresio-art-correlate li {
    margin-bottom: 16px;
}

.gresio-art-correlate li:last-child {
    margin-bottom: 0;
}

.gresio-art-correlate a {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: var(--gresio-ink);
}

.gresio-art-correlate a:hover {
    opacity: 0.82;
    text-decoration: none;
}

.gresio-art-correlate img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    flex: 0 0 auto;
    display: block;
}

.gresio-art-correlate span {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.gresio-art-box-wa {
    border: 1.5px solid var(--gresio-blue-dark);
}

.gresio-art-box-wa strong {
    font-size: 15.5px;
    display: block;
    margin-bottom: 6px;
}

.gresio-art-box-wa p {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gresio-secondario);
    margin: 0 0 14px;
}

/* ==========================================================================
   ARTICOLO — "Continua a leggere"
   ========================================================================== */
.gresio-art-continua {
    background: var(--gresio-muted-bg);
    padding: 56px 48px;
    margin-top: 24px;
}

.gresio-art-continua-testa {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    margin: 0 auto 28px;
    max-width: 1320px;
}

.gresio-art-continua-testa h2 {
    font-size: clamp(22px, 2.8vw, 32px);
    font-weight: 800;
    margin: 0;
}

.gresio-art-continua-testa a {
    font-size: 15px;
    font-weight: 700;
    color: var(--gresio-blue);
    text-decoration: none;
    flex: 0 0 auto;
}

.gresio-art-continua .gresio-blog-griglia {
    max-width: 1320px;
    margin: 0 auto;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Sotto i 1200px la colonna dell'articolo si stringe e l'infografica non ci sta
   più alla sua scala: si passa a 800px di larghezza minima (scorrevole), che
   tiene il testo più piccolo del disegno a 12,2px reali. Sopra questa soglia il
   contenitore è al massimo (~746px) e il disegno resta intero, senza barra. */
@media (max-width: 1200px) {
    .gresio-articolo .gresio-infografica svg {
        min-width: 800px;
    }
}

@media (max-width: 1100px) {
    .gresio-blog-griglia {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 940px) {
    .gresio-articolo .site-main {
        display: block;
    }

    .gresio-art-colonna {
        position: static;
        margin-top: 40px;
    }

    .gresio-evidenza {
        grid-template-columns: 1fr;
    }

    .gresio-evidenza-foto {
        min-height: 0;
        max-height: none;
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .gresio-evidenza-corpo {
        padding: 26px 24px 30px;
    }

    .gresio-banda-campioni {
        grid-template-columns: 1fr;
    }

    .gresio-banda-campioni-testo {
        margin: 0;
        max-width: none;
        padding: 36px 24px;
    }

    .gresio-banda-campioni-foto {
        height: 220px;
    }

    .gresio-art-foto,
    .gresio-articolo article.post img.wp-post-image {
        height: 260px;
    }

    .gresio-art-continua {
        padding: 40px 24px;
    }
}

@media (max-width: 760px) {
    .gresio-blog-testata {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding-bottom: 22px;
    }

    .gresio-blog-cerca {
        width: 100%;
    }

    .gresio-blog-cerca input[type="search"] {
        width: 100%;
        flex: 1;
    }

    /* La riga di chip scorre invece di andare a capo (mockup mobile). */
    .gresio-blog-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 22px;
        -webkit-overflow-scrolling: touch;
    }

    .gresio-blog-indice .gresio-chip {
        flex: 0 0 auto;
        font-size: 12px;
        padding: 8px 14px;
    }

    /* Card orizzontali: foto a sinistra, testo a destra (mockup mobile). */
    .gresio-blog-griglia {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .gresio-bcard {
        display: flex;
        gap: 13px;
        padding: 12px;
        align-items: flex-start;
    }

    /* Il secondo selettore (0,3,2) serve a battere
       `.gresio-blog-indice article.post img { width:100% }` di style.css:
       senza, la foto prendeva tutta la card (305,7px su 375) e al testo
       restavano ZERO pixel. */
    .gresio-bcard-foto,
    .gresio-blog-indice article.post img.gresio-bcard-foto {
        width: 96px;
        height: 80px;
        aspect-ratio: auto;
        flex: 0 0 auto;
        margin: 0;
    }

    .gresio-bcard-corpo {
        padding: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    .gresio-bcard-titolo {
        font-size: 14.5px;
        margin-bottom: 6px;
    }

    .gresio-bcard-estratto {
        display: none;
    }

    .gresio-bcard-lettura {
        font-size: 12px;
    }

    .gresio-banda-newsletter {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 26px 20px;
    }

    .gresio-banda-newsletter-form {
        flex-direction: column;
    }

    .gresio-banda-newsletter-form input,
    .gresio-banda-newsletter-form button {
        width: 100%;
    }

    .gresio-art-firma {
        gap: 10px 16px;
        font-size: 12.5px;
    }

    .gresio-art-azioni {
        margin-left: 0;
        width: 100%;
    }

    .gresio-art-cta {
        flex-direction: column;
        align-items: stretch;
        padding: 22px 20px;
    }

    .gresio-articolo .gresio-btn-scuro {
        text-align: center;
    }

    .cp-prodotto-citato {
        flex-wrap: wrap;
        gap: 13px;
        padding: 14px;
    }

    .cp-prodotto-citato .cp-citato-foto {
        width: 56px;
        height: 56px;
    }

    .cp-prodotto-citato .cp-citato-cta {
        border: 0;
        padding: 0;
        font-size: 13px;
    }
}