/* TIPOGRAFIA DELLE PAGINE DI LETTURA LUNGA — articoli del blog, case study, /docs/.
   Vive SOPRA _template/pagina.css: qui non si ridefinisce nessuna variabile del sistema
   (colori, font, accento), si aggiunge solo ciò che il sistema non ha ancora — la misura
   di lettura e la gerarchia del testo lungo. Le landing sono fatte di fasce corte; un
   articolo di 12 sezioni chiede regole sue.

   Due scelte da giudicare, non sono ovvie:
   1. TESTATA SCURA, CORPO AVORIO. Le landing aprono scure (atto-scuro) e l'articolo
      riprende quel gesto, così il passaggio dalla pagina nuova all'articolo non è uno
      stacco. Il corpo va sull'avorio del sistema e non sul verde del fondo: su una
      colonna di 900 parole il verde affatica, l'avorio no.
   2. MISURA 68 CARATTERI. È la larghezza di lettura, non una scelta estetica: il
      sistema non ne aveva una perché nessuna fascia supera le tre righe. */

.corpo-articolo { background: var(--avorio); }

/* ---------- Testata ----------
   Fondo e colore NON si dichiarano qui: la testata porta anche la classe .atto-scuro
   del sistema, che li dà. Serve per una ragione funzionale, non estetica — pagina.js
   cerca gli elementi .atto-scuro per far diventare scura la barra fissa mentre ci
   passa sopra. Senza quella classe il menu resterebbe chiaro su fondo scuro. */

.art-testata {
  padding: calc(var(--alt-barra, 57px) + clamp(48px, 7svh, 96px)) max(7vw, calc((100vw - 1720px) / 2)) clamp(40px, 6svh, 80px);
}

/* Testata con lo sfondo fotografico del caso (dal sito d'origine). Il velo e'
   NEUTRO scuro, non il verde del sistema: i case study non stanno nei menu del
   sito e la foto deve risaltare — «il verdone e' il villain» (SD 06-08). La foto
   e' decorativa: qui il cover e' legittimo. */
.art-testata-foto {
  background:
    linear-gradient(rgb(12 14 13 / .42), rgb(12 14 13 / .68)),
    var(--hero-bg) center / cover no-repeat,
    #141715;
}

.art-occhiello {
  margin: 0 0 14px;
  font-size: clamp(13px, 0.85vw, 15px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--avorio-dim);
}

/* nei /docs/ l'occhiello e' un link che risale all'indice (categoria) */
.art-occhiello a { color: inherit; text-decoration: none; }
.art-occhiello a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* i bersagli delle ancore (titoli del sommario, schede dell'indice docs) non
   devono finire sotto la barra fissa quando ci si salta sopra */
.art-corpo h2[id], .art-corpo h3[id], .di-cat[id] {
  scroll-margin-top: calc(var(--alt-barra, 57px) + 18px);
}

.art-testata h1 {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(30px, 3.6vw, 58px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
}

.art-riga {
  margin: 22px 0 0;
  font-size: clamp(15px, 1vw, 17px);
  color: var(--avorio-dim);
}

/* ---------- Copertina ---------- */

.art-copertina {
  margin: 0;
  padding: 0 max(7vw, calc((100vw - 1720px) / 2)) 0;
}

.art-copertina img {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;   /* OBBLIGATORIO con gli attributi width/height nell'HTML: senza,
                     il browser tiene l'altezza dell'attributo su larghezza forzata
                     e l'immagine si stira (regressione vista da SD il 06-08) */
  margin: 0 auto;
  border-radius: 8px 8px 0 0;  /* appena smussata (regola immagini SD 06-08) */
  transform: translateY(1px); /* il bordo tondo appoggia sul fondo chiaro senza filo */
}

/* ---------- Corpo ---------- */

/* MISURA DI LETTURA — ritarata il 06-08 (rilievo SD: 740px erano troppo stretti).
   900px di testo con corpo fino a 22px ≈ 73 caratteri per riga: il limite alto
   della leggibilità, senza l'effetto nastro sugli schermi larghi. Il cap del font
   sale con la colonna: a 2560 un corpo fermo a 20px sembrava minuscolo. */
.art-corpo {
  max-width: 960px;   /* 900 di testo + 30 di respiro per lato */
  margin: 0 auto;
  padding: clamp(44px, 6svh, 78px) 30px clamp(30px, 4svh, 56px);
  font-size: clamp(17px, 1.15vw, 22px);
  line-height: 1.7;
  overflow-wrap: break-word;  /* i token lunghi (URL nel testo, nomi tecnici) si
                                 spezzano invece di sfondare la colonna: a 390px
                                 tre pagine scrollavano di lato (QA #173 07-08) */
}

.art-corpo > p { margin: 0 0 1.35em; }

/* Il «lead» ingrandito vale SOLO per l'apertura dell'articolo del blog, dove il
   corpo segue la copertina. Agganciato a quella sequenza perche' il case study ha
   TANTI blocchi .art-corpo (uno per sezione, tra bande e citazioni) e il primo
   paragrafo di ogni sezione veniva ingrandito — l'originale ha corpo uniforme
   (rilievo SD 07-08). Nei /docs/ (nessuna copertina) il lead non scatta: giusto
   cosi', anche li' l'originale e' uniforme. */
.art-copertina + .art-corpo > p:first-of-type {
  font-size: 1.12em;
  line-height: 1.62;
  color: var(--ink);
}

.art-corpo h2 {
  margin: 2.1em 0 .55em;
  font-size: clamp(23px, 1.9vw, 34px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.005em;
}

.art-corpo h3 {
  margin: 1.7em 0 .45em;
  font-size: clamp(19px, 1.35vw, 25px);
  font-weight: 700;
  line-height: 1.3;
}

.art-corpo a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.art-corpo a:hover { text-decoration-thickness: 2.5px; }

.art-corpo ul, .art-corpo ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.art-corpo li { margin-bottom: .5em; }
.art-corpo li::marker { color: var(--accent); }

.art-corpo blockquote {
  margin: 1.8em 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--accent);
  font-size: 1.08em;
  font-style: normal;
  color: var(--ink-dim);
}

/* Le immagini SBORDANO dalla misura di lettura (112%, centrate): il testo tiene
   i suoi ~73 caratteri, la figura respira oltre. (Il primo tentativo usava
   min(100%,116%), che vale sempre 100%: non sbordava niente — corretto il 06-08.) */
.art-corpo figure:not(.art-cit) {
  margin: 2.2em 0;
  width: 112%;      /* solo le IMMAGINI sbordano: la citazione resta nella misura
                       di lettura, il suo box non e' una figura da far respirare
                       (ereditava il 112% ed era parte della sovrapposizione,
                       rilievo SD 07-08) */
  margin-left: -6%;
}

@media (max-width: 1100px) {
  .art-corpo figure { width: 100%; margin-left: 0; }
}

.art-corpo figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;  /* appena smussata (regola immagini SD 06-08) */
  border: 1px solid var(--hairline);
}

.art-corpo figcaption {
  margin-top: .7em;
  font-size: .84em;
  line-height: 1.5;
  color: var(--ink-dim);
  text-align: center;
}

.art-corpo pre {
  margin: 1.8em 0;
  padding: 20px 22px;
  overflow-x: auto;
  background: var(--scuro);
  color: var(--avorio);
  border-radius: 12px;
  font-size: .86em;
  line-height: 1.6;
}

.art-corpo :not(pre) > code {
  padding: .12em .38em;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 5px;
  font-size: .9em;
}

.art-corpo table {
  width: 100%;
  margin: 1.8em 0;
  border-collapse: collapse;
  font-size: .92em;
}

/* Tabelle piu' larghe della colonna (schede proprieta' dei /docs/): scorrono nel
   loro riquadro come i blocchi di codice, la pagina non scrolla mai di lato.
   Nel pacchetto #173 ogni tabella e' figlia diretta di una figure (wrapping WP).
   (QA #173 07-08: a 390px cinque pagine docs sbordavano di 60-190px.) */
.art-corpo figure:has(> table) { overflow-x: auto; }

.art-corpo th, .art-corpo td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

.art-corpo th { font-weight: 700; }

/* ---------- Sommario dei /docs/ ----------
   Sostituto statico del pannello «Contenuti» di BetterDocs: un box in testa
   all'articolo, generato da converti.py solo dove ci sono almeno 3 titoli.
   Niente colonna laterale (decisione SD 07-08: navigazione minima). */

/* Avviso «documentazione storica» dei /docs/ (piano 28-07, attivo dal 07-08 con
   la conversione in v1): striscia discreta sotto la testata, si toglie insieme
   alla riga AVVISO_STORICO di converti.py il giorno che le docs si aggiornano. */
.art-avviso-storico {
  margin: 0 0 1.8em;
  padding: 10px 18px;
  background: var(--card);
  border-left: 3px solid var(--hairline);
  border-radius: 8px;
  font-size: .85em;
  color: var(--ink-dim);
}

/* variante per l'indice docs: fuori dall'art-corpo, stessa gabbia della lista */
.di-avviso {
  margin: clamp(28px, 4svh, 44px) max(7vw, calc((100vw - 1720px) / 2))
          calc(-1 * clamp(12px, 2svh, 24px));
}

.art-sommario {
  margin: 0 0 2.4em;
  padding: 18px 26px 20px;
  background: var(--card);
  border-radius: 12px;
  font-size: .92em;
}

.art-sommario p {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: .82em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.art-sommario ul { list-style: none; margin: 0; padding: 0; }
.art-sommario li { margin: 0 0 7px; }
.art-sommario li:last-child { margin-bottom: 0; }
.art-sommario li.som-h3 { padding-left: 20px; }

/* piu' specifico di «.art-corpo a»: il sommario non usa il link sottolineato */
.art-corpo .art-sommario a { color: var(--ink); text-decoration: none; }
.art-corpo .art-sommario a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Indice dei /docs/ ----------
   Le ~18 categorie della Knowledge Base come schede a colonne (multicol: le
   schede hanno altezze molto diverse e la griglia lascerebbe buchi). Dentro,
   l'elenco delle pagine nell'ordine della sidebar del sito vecchio. */

.di-lista {
  padding: clamp(40px, 6svh, 72px) max(7vw, calc((100vw - 1720px) / 2)) clamp(48px, 7svh, 88px);
  columns: 3;
  column-gap: clamp(20px, 2vw, 32px);
}

@media (max-width: 1100px) { .di-lista { columns: 2; } }
@media (max-width: 640px)  { .di-lista { columns: 1; } }

.di-cat {
  break-inside: avoid;
  margin: 0 0 clamp(20px, 2vw, 32px);
  padding: 24px 28px 20px;
  background: var(--card);
  border-radius: 10px;
}

.di-cat h2 {
  margin: 0 0 6px;
  font-size: clamp(19px, 1.35vw, 24px);
  font-weight: 700;
  line-height: 1.3;
}

.di-conta {
  display: block;
  margin: 0 0 10px;
  font-size: clamp(12.5px, 0.8vw, 14px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.di-cat ul { list-style: none; margin: 0; padding: 0; }

.di-cat a {
  display: block;
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-dim);
  text-decoration: none;
  font-size: clamp(15px, 1vw, 16.5px);
  line-height: 1.45;
}

.di-cat li:first-child a { border-top: 0; }
.di-cat a:hover { color: var(--accent); }

/* ---------- Coda ---------- */

.art-coda {
  max-width: 1160px;  /* piu' larga della misura di lettura: la riga di perimetro
                         («…software house, reparti IT e freelance») a corpo pieno
                         chiede ~1030px e a 960 andava a capo su «freelance»
                         (rilievo SD 07-08, valeva per blog e case study) */
  margin: 0 auto;
  padding: clamp(30px, 4svh, 50px) 30px clamp(56px, 8svh, 96px);
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.art-coda p {
  margin: 0 0 22px;
  font-size: clamp(15px, 1vw, 17px);
  color: var(--ink-dim);
}

.art-sep { opacity: .5; padding: 0 .3em; }

/* ---------- Moduli del case study ----------
   Il case study del sito vecchio non e' prosa: alterna blocchi di racconto, bande
   scure coi numeri, citazioni del cliente e la presentazione dell'azienda. Qui i
   moduli equivalenti nel sistema nuovo. Le bande usano .atto-scuro, cosi' il menu
   fisso le segue come fa con le fasce scure delle landing. */

.art-sotto {
  margin: 16px 0 0;
  max-width: 56ch;
  font-size: clamp(17px, 1.2vw, 21px);
  line-height: 1.5;
  color: var(--avorio-dim);
}

.art-logo-cliente {
  max-width: 960px;
  margin: calc(-1 * clamp(26px, 4svh, 44px)) auto 0;  /* a cavallo della testata */
  padding: 0 30px;
  position: relative;
  z-index: 1;
}

/* biglietto bianco per il logo (rilievo SD 06-08: «una cosa tipo questa») */
.art-logo-badge {
  display: inline-block;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 20px 30px;
  box-shadow: 0 8px 26px color-mix(in srgb, var(--ink) 14%, transparent);
}

/* il logo si normalizza per LARGHEZZA come sul sito d'origine (card ~220px,
   logo a tutta larghezza): con l'altezza fissa a 46px i loghi compatti
   (i-factory) uscivano minuscoli (rilievo SD 07-08 sera) */
.art-logo-badge img { display: block; width: clamp(140px, 13vw, 180px); height: auto; }

/* Citazione «da citazione» (rilievo SD 06-08): box su velo d'accento con la
   virgola alta decorativa, firma in evidenza a destra. */
.art-cit { margin: 0; padding: clamp(8px, 1.5svh, 18px) 0; }

.art-cit blockquote {
  position: relative;
  margin: 0;
  /* il padding ALTO riserva la fascia al virgolettone assoluto: il glifo a 5.2em
     scende fino a ~55px dal bordo e con 30px di padding finiva SOTTO la prima
     riga (sovrapposizione, rilievo SD 07-08) — il testo parte dopo la fascia */
  padding: clamp(62px, 8svh, 82px) clamp(28px, 3vw, 52px) clamp(20px, 2.5svh, 32px);
  background: color-mix(in srgb, var(--accent) 8%, #FFFFFF);
  border: 0;              /* spegne la barra delle blockquote generiche del corpo */
  border-radius: 16px;
  font-size: clamp(19px, 1.45vw, 25px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.art-cit blockquote::before {
  content: '“';
  position: absolute;
  top: 0.02em;
  left: 20px;
  /* serif di sistema: in Quicksand la virgoletta e' un glifo minuscolo,
     il «virgolettone» pieno esiste solo nei serif (Georgia) */
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 5.2em;
  line-height: 1;
  font-weight: 700;
  color: color-mix(in srgb, var(--accent) 30%, transparent);
  pointer-events: none;
}

.art-cit figcaption {
  padding: 14px clamp(28px, 3vw, 52px) 0 0;
  text-align: right;
  font-weight: 700;
  font-size: clamp(14px, 1vw, 17px);
  color: var(--ink);
}

.art-banda {
  margin: clamp(28px, 4svh, 48px) 0;
  padding: clamp(44px, 6svh, 76px) max(7vw, calc((100vw - 1720px) / 2));
}

/* Banda con la foto d'origine sotto un velo neutro scuro (rilievo SD 06-08:
   «via la banda verde, tieni solo l'immagine sotto»). */
.art-banda-foto {
  background:
    linear-gradient(rgb(12 14 13 / .58), rgb(12 14 13 / .58)),
    var(--banda-bg) center / cover no-repeat,
    #141715;
}

.art-banda h2 {
  margin: 0 0 clamp(28px, 4svh, 44px);
  text-align: center;
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 700;
}

/* Coppie numero+testo AFFIANCATE come sul sito d'origine (QA 07-08: la griglia
   fissa a 3 card centrate era simmetrica solo con 3 coppie — il campione Albalog —
   e sbilanciata con 2, 4 o 5, con le righe incomplete appese a sinistra).
   Il flex centrato tiene il gruppo E ogni riga in asse (rilievo SD 06-08 sulla
   centratura resta rispettato), qualunque sia il numero di coppie. */
.art-banda dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(26px, 3vw, 56px);
  margin: 0 auto;
  max-width: 1180px;
}

.art-dato {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  /* la coppia si DIMENSIONA sul contenuto (basis auto, NIENTE grow): con la
     larghezza fissa un numero largo si mangiava il box («15%-35%» tepui) e col
     grow i box si gonfiavano di spazio vuoto interno spostando la massa visiva
     rispetto al titolo centrato (rilievo SD 07-08 sera, terzo giro). Contenuto
     a misura + justify-center = riga geometricamente centrata sotto il titolo.
     Il testo e' vincolato fra 15 e 32ch dalla regola del dd qui sotto. */
  flex: 0 1 auto;
  max-width: 520px;
}

.art-dato dt {
  font-size: clamp(40px, 3.4vw, 58px);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;   /* il numero non si comprime mai */
}

.art-dato dd { min-width: 15ch; max-width: 32ch; }  /* colonna di testo leggibile */
.art-dato-lungo { max-width: 640px; }
.art-dato-lungo dd { max-width: 46ch; }  /* etichette >90 char: piu' respiro */

.art-dato dd {
  margin: 0;
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.5;
  color: var(--avorio-dim);
}

/* coppia senza numero (es. reacto «Piena soddisfazione…»): solo il testo,
   nella posizione di coppia, come sul sito d'origine */
.art-dato-nota { justify-content: center; }

.art-spunte {
  list-style: none;
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
  font-size: clamp(16px, 1.1vw, 19px);
}

.art-spunte li { position: relative; padding-left: 32px; margin-bottom: 14px; }

.art-spunte li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 700;
}

.art-chi {
  margin: clamp(10px, 2svh, 24px) 0;
  padding: clamp(26px, 3svh, 38px) clamp(28px, 3vw, 44px);
  background: var(--card);
  border-radius: 16px;
  /* dimensione di LETTURA, non da postilla (rilievo SD 06-08: «troppo piccola») */
  font-size: inherit;
  line-height: 1.65;
}

.art-chi p { margin: 0 0 1em; }
.art-chi p:last-child { margin-bottom: 0; }

/* sito, email e telefono del cliente (i «dati» che mancavano) */
.art-contatti {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(22px, 2.5vw, 44px);
  padding-top: 8px;
  /* taglia da metadato: col font di lettura (22px a schermo largo) i 3 contatti
     sforavano la card e andavano a capo 2+1 (rilievo SD 07-08, partnerlab) */
  font-size: clamp(15px, 0.95vw, 17px);
}

.art-contatti a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.art-contatti a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.art-contatti svg { flex: none; }

/* ---------- Chi ha scritto ----------
   Il tema vecchio lo mette sotto l'articolo insieme a mailto e form dei commenti:
   qui restano solo avatar, nome, ruolo e bio (SD, 06-08). */

.art-autore {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  max-width: 960px;
  margin: 0 auto;
  padding: 26px 30px;
  background: var(--card);
  border-radius: 16px;
}

.art-avatar {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
}

.art-autore-nome {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: clamp(16px, 1.05vw, 18px);
}

.art-autore-ruolo {
  font-weight: 500;
  color: var(--ink-dim);
}

.art-autore-ruolo::before { content: '· '; opacity: .5; }

.art-autore-bio {
  margin: 0;
  font-size: clamp(15px, 1vw, 16.5px);
  line-height: 1.6;
  color: var(--ink-dim);
}

/* ---------- Indice del blog ----------
   L'indice NON usa la colonna di lettura degli articoli (rilievo SD 06-08: le pagine
   di prosa sono venute troppo strette — quello si corregge la; qui si parte larghi):
   il contenuto occupa la larghezza delle fasce del sistema, come le landing.
   Struttura: articolo in evidenza (il piu' recente, card orizzontale) + griglia a 3
   + paginazione (riferimento visivo: immagine SD 06-08 — riquadri chiari, numero
   attivo in accento, ellissi e freccia nude). */

.bi-testata h1 { max-width: none; }

.bi-lista {
  padding: clamp(40px, 6svh, 72px) max(7vw, calc((100vw - 1720px) / 2)) clamp(48px, 7svh, 88px);
}

.bi-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 10px;   /* «pochissimo»: gli angoli dell'immagine si smussano appena */
  overflow: hidden;
  text-decoration: none;
  transition: translate .15s ease, box-shadow .15s ease;
}

.bi-card:hover {
  translate: 0 -3px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 12%, transparent);
}

/* REGOLA DELLE IMMAGINI (decisione SD 06-08, chiude un difetto che il sito vecchio
   si porta da 4 anni): il contenitore SI ADATTA all'immagine, mai il contrario.
   Niente object-fit: cover, niente proporzioni imposte: le copertine hanno il logo
   negli angoli e ogni ritaglio lo tronca. Angoli appena arrotondati (poco), che e'
   il compromesso accettato al posto del taglio. */

/* Finestra di proporzione FISSA (le card si allineano) ma immagine CONTAIN, mai
   cover: l'immagine si rimpicciolisce finche' entra tutta — dove le proporzioni
   non combaciano resta un filo di fondo neutro, mai un ritaglio. E' il compromesso
   che tiene insieme allineamento e regola «niente troncature» (SD 06-08). */
.bi-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--ink) 7%, var(--bg));
}

/* L'immagine e' in ASSOLUTO dentro la finestra: aspect-ratio da solo e' un vincolo
   debole e le immagini 3:2 gonfiavano il box a 365px invece di 308 (misurato il
   06-08 — e' il bug delle card disallineate). Fuori dal flusso, l'immagine non puo'
   piu' dettare l'altezza: la finestra resta 16:9 per tutte, contain mostra tutto. */
.bi-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* contain mostra tutto; cover (vietato) taglia */
}

/* solo il segnaposto senza immagine ha una proporzione sua: non c'e' nulla da troncare */
.bi-noimg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 70%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    color-mix(in srgb, var(--ink) 7%, var(--bg));
}

.bi-testo {
  display: flex;
  flex: 1;               /* si stira fino al fondo della card: serve all'ancora dell'autore */
  flex-direction: column;
  gap: 10px;
  padding: 22px 26px 24px;
}

.bi-riga {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(13px, 0.85vw, 14.5px);
  color: var(--ink-dim);
}

.bi-cat {
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .92em;
  color: var(--accent);
}

.bi-titolo {
  font-size: clamp(19px, 1.35vw, 24px);
  font-weight: 700;
  line-height: 1.28;
}

.bi-descr {
  margin: 0;
  font-size: clamp(15px, 1vw, 16.5px);
  line-height: 1.55;
  color: var(--ink-dim);
}

/* margin-top:auto ancora l'autore al fondo: cosi' anche la base delle card e' allineata */
.bi-autore { margin-top: auto; font-size: clamp(13px, 0.85vw, 14.5px); color: var(--ink-dim); }

/* Card in evidenza: orizzontale, immagine a sinistra, per l'articolo piu' recente */
.bi-evidenza {
  flex-direction: row;
  margin-bottom: clamp(28px, 4svh, 44px);
}

/* La finestra dell'evidenza e' 16:9 ESATTA (richiesta SD 06-08): un'immagine 16:9
   la riempie al pixel, senza bordi di fondo, e l'altezza della card la detta
   l'immagine — il testo si adatta. Un'immagine di altra proporzione mostra le
   bande laterali come nelle card della griglia: mai un ritaglio. */
.bi-evidenza .bi-media {
  flex: 1 1 58%;
  aspect-ratio: 16 / 9;
  align-self: flex-start;
}

/* sotto i 900px la card in evidenza va in colonna: immagine sopra a piena
   larghezza (sempre 16:9 piena), testo sotto */
@media (max-width: 900px) {
  .bi-evidenza { flex-direction: column; }
  .bi-evidenza .bi-media { width: 100%; flex: none; align-self: stretch; }
}

.bi-evidenza .bi-testo {
  flex: 1 1 42%;
  justify-content: center;
  gap: 14px;
  padding: clamp(26px, 3vw, 48px);
}

.bi-evidenza .bi-titolo { font-size: clamp(24px, 2vw, 36px); line-height: 1.2; }
.bi-evidenza .bi-descr { font-size: clamp(16px, 1.1vw, 18.5px); }

/* 3 colonne fisse: le card sotto l'evidenza sono 9, e 3x3 e' l'unica forma senza
   orfane (auto-fill a 2560 ne faceva 4+4+1). */
.bi-griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 32px);
}

@media (max-width: 1100px) { .bi-griglia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .bi-griglia { grid-template-columns: 1fr; } }

/* ---------- Paginazione ---------- */

.bi-paginazione {
  display: flex;
  flex-wrap: wrap;       /* rete di sicurezza: con la finestra mobile compatta
                            (vedi .bi-pag-vicina) non dovrebbe piu' scattare */
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  margin-top: clamp(40px, 6svh, 64px);
  font-size: clamp(16px, 1.05vw, 19px);
  font-weight: 600;
}

.bi-pag, .bi-pag-freccia { flex: none; }

.bi-pag {
  display: grid;
  place-items: center;
  width: clamp(44px, 3vw, 54px);
  height: clamp(44px, 3vw, 54px);
  background: var(--card);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink-dim);
  transition: background .15s ease, color .15s ease;
}

.bi-pag:hover { background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--ink); }

.bi-pag-attiva { color: var(--accent); }

.bi-pag-ellissi { color: var(--ink-dim); padding: 0 2px; }

/* Finestra mobile compatta (rilievo SD 07-08: l'a-capo a 390 era brutto).
   Sotto i 640px i numeri VICINI alla corrente spariscono e resta
   «‹ 1 … [corrente] … ultima ›», che sta su una riga anche a 390.
   Le ellissi marcate solo-mobile esistono solo in questa vista. */
.bi-pag-solo-mobile { display: none; }

@media (max-width: 640px) {
  .bi-pag-vicina { display: none; }
  .bi-pag-solo-mobile { display: inline; }
}

.bi-pag-freccia {
  display: grid;
  place-items: center;
  width: clamp(44px, 3vw, 54px);
  height: clamp(44px, 3vw, 54px);
  font-size: 1.35em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink-dim);
  border-radius: 14px;
  transition: background .15s ease, color .15s ease;
}

.bi-pag-freccia:hover { background: var(--card); color: var(--ink); }

/* ---------- Piede ----------
   Il footer condiviso nello stampo vive dentro una sezione che gli dà i margini
   laterali e il centraggio: qui quella sezione non c'è, quindi glieli diamo noi. */

.art-piede {
  padding: 0 max(7vw, calc((100vw - 1720px) / 2)) 8px;
  text-align: center;
}

.art-piede .foot-riga { justify-content: center; }

/* ---------- Schermi stretti ---------- */

@media (max-width: 720px) {
  .art-corpo { padding-left: 6vw; padding-right: 6vw; }
  .art-autore { flex-direction: column; gap: 14px; margin: 0 6vw; padding: 22px; }
  .art-avatar { width: 64px; height: 64px; }
  .art-corpo figure { width: 100%; margin-left: 0; transform: none; }
  .art-testata { padding-left: 6vw; padding-right: 6vw; }
  .art-copertina { padding-left: 0; padding-right: 0; }
  .art-copertina img { border-radius: 0; }
  .art-coda { padding-left: 6vw; padding-right: 6vw; }
}