/* ════════════════════════════════════════════════════════════════
   6 — PAGINE INTERNE
   Componenti delle pagine diverse dalla homepage: filtri, schede
   persona, gruppi di documenti, fasce sponsor, richiamo finale.
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   Filtri a pastiglia — notizie, galleria, documenti
   ───────────────────────────────────────────────────────────── */
.filtri {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: var(--wrap);
  margin: 0 auto 40px;
}
.filtro {
  background: var(--white);
  color: var(--text-muted);
  border: 1px solid var(--slate-border);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 9px 18px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filtro:hover { border-color: var(--blue-accent); color: var(--blue-accent); }
.filtro.is-active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ─────────────────────────────────────────────────────────────
   Organigramma — presidente in evidenza + griglia persone
   ───────────────────────────────────────────────────────────── */
.org-gruppo { max-width: var(--wrap); margin: 0 auto 56px; }
.org-gruppo:last-child { margin-bottom: 0; }
.org-gruppo-title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 10px;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}

/* La presidenza sta su una riga centrata: le schede si affiancano
   finché c'è spazio, poi vanno a capo. */
.presidenza {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.presidenza .persona { flex: 0 1 300px; }
.persona.presidente {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  padding: 32px 44px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.persona.presidente:hover { transform: translateY(-6px); }
.persona.presidente::before {
  content: '';
  position: absolute;
  top: -27px;
  right: -27px;
  width: 108px;
  height: 108px;
  background: rgba(250,204,21,0.10);
  border-radius: 50%;
}
.persona.presidente .persona-avatar {
  background: var(--gold);
  color: var(--navy);
  width: 76px;
  height: 76px;
  font-size: 27px;
  box-shadow: 0 4px 14px rgba(250,204,21,0.4);
}
.persona.presidente .persona-nome { color: var(--white); font-size: 16px; }
.persona.presidente .persona-ruolo {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 14px;
}

.persone {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.persona {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  padding: 24px 18px;
  text-align: center;
  border-bottom: 3px solid transparent;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.persona:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--gold);
}
.persona-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--navy-light) 0%, var(--blue-accent) 100%);
  color: var(--white);
  overflow: hidden;
  transition: transform var(--dur) var(--ease);
}
.persona-avatar img { width: 100%; height: 100%; object-fit: cover; }
.persona:hover .persona-avatar { transform: scale(1.08); }
.persona-nome {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
  line-height: 1.3;
}
.persona-ruolo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.persona-email {
  display: block;
  font-size: 11.5px;
  color: var(--blue-accent);
  margin-top: 10px;
  word-break: break-all;
}

/* ─────────────────────────────────────────────────────────────
   Documenti — righe raggruppate per categoria
   ───────────────────────────────────────────────────────────── */
.doc-gruppo { max-width: 900px; margin: 0 auto 40px; }
.doc-gruppo-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--slate-border);
}
.doc-riga {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--slate-border);
  transition: background var(--dur) var(--ease);
}
.doc-riga:hover { background: var(--light-bg); }
.doc-icona {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--gold);
  font-size: 18px;
}
.doc-testo { flex: 1; min-width: 0; }
.doc-titolo {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.doc-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ─────────────────────────────────────────────────────────────
   Sponsor — livelli
   ───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   Pagina sponsor — tre fasce a tutta larghezza

   Prima erano tre griglie di riquadri bianchi, tutte uguali fra
   loro, distinte solo da una scritta piccola sopra. Con trentotto
   sponsor quella pagina era un muro indistinto.

   Adesso ogni livello ha la sua fascia e il suo fondo — navy,
   bianco, grigio — e la gerarchia sta nella misura dei loghi. Niente
   riquadro attorno a ciascuno: senza cornici i marchi respirano.
   ───────────────────────────────────────────────────────────── */

/* Le fasce escono dal contenitore centrato della pagina e arrivano
   ai bordi dello schermo. Senza questo, resterebbero larghe 1140px
   con due margini bianchi ai lati e l'effetto fascia sparirebbe.
   La sezione che le contiene ha il riempimento laterale azzerato
   nell'HTML, o le fasce risulterebbero rientrate. */
.spb-fascia {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  padding: 52px 28px;
}
.spb-dentro { max-width: var(--wrap); margin: 0 auto; }

.spb-titolo {
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 32px;
}

.spb-loghi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 52px;
}
.spb-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur) var(--ease);
}
.spb-logo:hover { transform: translateY(-3px); }
.spb-logo img { display: block; object-fit: contain; }
.spb-nome {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--navy);
}

/* I due limiti sotto lavorano in coppia, e serve tenerli a mente
   prima di ritoccarli. L'altezza governa i marchi quadrati, la
   larghezza quelli lunghi e bassi: FLR è 1800x410, quindi è il
   limite in larghezza a decidere quanto viene alto. Se si stringe
   la larghezza per far stare più roba in riga, i loghi a striscia
   si schiacciano mentre i quadrati restano intatti — ed è così che
   nella prima versione FLR finiva alto 43px accanto a Pitittu alto
   72px. Nessuno dei due limiti può ingrandire un'immagine oltre il
   suo file: i loghi caricati vanno da 154px a 1800px di lato, tutti
   ampiamente sopra queste misure, quindi qui non si sgrana nulla. */

/* Main: fondo navy, il logo su una targa bianca. */
.spb-main { background: var(--navy); padding: 64px 28px; }
.spb-main .spb-titolo { color: var(--gold); }
.spb-main .spb-logo {
  background: var(--white);
  padding: 34px 52px;
  min-width: 380px;
  min-height: 250px;
}
.spb-main .spb-logo img { max-height: 180px; max-width: 400px; }

/* Official: fondo bianco, loghi grandi. */
.spb-official { background: var(--white); }
.spb-official .spb-titolo { color: var(--navy); }
.spb-official .spb-loghi { gap: 42px 56px; }
.spb-official .spb-logo img { max-height: 112px; max-width: 310px; }

/* Partner: fondo grigio, loghi più fitti ma non minuti — sono
   ventotto, e su una pagina dedicata a loro devono restare
   leggibili senza avvicinarsi allo schermo. */
.spb-partner { background: var(--light-bg); }
.spb-partner .spb-titolo { color: var(--text-muted); }
.spb-partner .spb-loghi { gap: 32px 42px; }
.spb-partner .spb-logo img { max-height: 82px; max-width: 240px; }
.spb-partner .spb-nome { font-size: 15px; }

@media (max-width: 700px) {
  .spb-fascia { padding: 34px 18px; }
  .spb-main { padding: 40px 18px; }
  .spb-titolo { margin-bottom: 24px; }
  .spb-loghi,
  .spb-official .spb-loghi { gap: 28px 32px; }
  .spb-partner .spb-loghi { gap: 24px 26px; }
  .spb-main .spb-logo {
    min-width: 0;
    width: 100%;
    max-width: 300px;
    min-height: 0;
    padding: 24px 26px;
  }
  .spb-main .spb-logo img { max-height: 130px; max-width: 250px; }
  .spb-official .spb-logo img { max-height: 78px; max-width: 210px; }
  .spb-partner .spb-logo img { max-height: 56px; max-width: 158px; }
}

/* ─────────────────────────────────────────────────────────────
   Fascia di richiamo — fondo pagina sponsor
   ───────────────────────────────────────────────────────────── */
.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  padding: 56px 40px;
  text-align: center;
}
.cta-band h2 {
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 1.5px;
  color: var(--white);
  margin-bottom: 12px;
}
.cta-band p {
  color: rgba(255,255,255,0.7);
  max-width: 560px;
  margin: 0 auto 26px;
  font-size: 15px;
}

/* ─────────────────────────────────────────────────────────────
   Campionati — statistiche in evidenza
   ───────────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--slate-border);
  border: 1px solid var(--slate-border);
  max-width: var(--wrap);
  margin: 0 auto 44px;
}
.stat {
  background: var(--white);
  padding: 26px 18px;
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.stat-lab {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ─────────────────────────────────────────────────────────────
   Risultati — righe partita
   ───────────────────────────────────────────────────────────── */


/* ═════════════════════════════════════════════════════════════
   CLASSIFICA

   Prima era una tabella con bordi grigi e tutte le colonne dello
   stesso peso: corretta e inerte. Il problema non era il chiaro in
   sé — la pagina è chiara e resta chiara — ma che nulla guidava
   l'occhio.

   Ora ci sono tre livelli di lettura: la posizione in una pastiglia,
   il nome con lo stemma, i punti grandi in navy. Giocate, vinte,
   nulle e perse restano volutamente piccole e grigie: sono il
   dettaglio che si guarda dopo aver trovato la riga.
   ═════════════════════════════════════════════════════════════ */

.cls-scorri {
  max-width: 1000px;
  margin: 0 auto 54px;
  overflow-x: auto;
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.cls {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/* ─── Intestazione ──────────────────────────────────────────── */

.cls thead th {
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-align: center;
  padding: 13px 10px;
  white-space: nowrap;
}
.cls thead th.cls-squadra { text-align: left; }

/* ─── Righe ─────────────────────────────────────────────────── */

.cls tbody td {
  padding: 0 10px;
  height: 54px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--slate-border);
}
/* Zebra tenue: separa le righe senza disegnare una griglia. */
.cls tbody tr:nth-child(even) td { background: #FAFBFD; }
.cls tbody tr:last-child td { border-bottom: none; }
.cls tbody tr { transition: background var(--dur) var(--ease); }
.cls tbody tr:hover td { background: var(--light-bg); }

/* ─── Posizione ─────────────────────────────────────────────── */

.cls-pos { width: 58px; }
.cls-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--light-bg);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

/* ─── Squadra ───────────────────────────────────────────────── */

.cls td.cls-squadra { text-align: left; }
.cls-nome {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-dark);
  min-width: 0;
}
.cls-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}
.cls-logo-vuoto {
  background: var(--light-bg);
  border: 1px dashed var(--slate-border);
}

/* ─── Punti ─────────────────────────────────────────────────── */

.cls td.cls-punti {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--navy);
  width: 72px;
}

/* ─── Gol e differenza ──────────────────────────────────────── */

.cls-gol { white-space: nowrap; }
.cls-gol i { font-style: normal; opacity: 0.4; margin: 0 1px; }

.cls td.cls-diff { font-weight: 700; width: 66px; }
.cls td.cls-diff.is-su  { color: var(--esito-vinta); }
.cls td.cls-diff.is-giu { color: var(--esito-persa); }

/* ─── La nostra riga ────────────────────────────────────────── */

.cls tbody tr.is-noi td {
  background: var(--velo-prossima);
  border-bottom-color: var(--gold-deep);
  color: var(--navy);
}
/* La fascia oro sul bordo sinistro si trova scorrendo l'elenco,
   senza dover cercare il nome fra quattordici squadre. */
.cls tbody tr.is-noi td:first-child {
  box-shadow: inset 4px 0 0 var(--gold-deep);
}
.cls tbody tr.is-noi .cls-numero {
  background: var(--gold-deep);
  color: var(--navy);
}
.cls tbody tr.is-noi .cls-nome { color: var(--navy); font-weight: 800; }
.cls tbody tr.is-noi:hover td { background: #FCE9A8; }

/* ─── Schermi stretti ───────────────────────────────────────── */

@media (max-width: 720px) {
  .cls tbody td { height: 48px; font-size: 12.5px; }
  .cls-nome { font-size: 13px; gap: 9px; }
  .cls-logo { width: 26px; height: 26px; }
  .cls td.cls-punti { font-size: 19px; }
}

/* ═════════════════════════════════════════════════════════════
   CALENDARIO E RISULTATI

   Prima ogni gara era una riga bianca con i nomi in fila e l'orario
   in fondo: leggibile ma inerte, e a colpo d'occhio non diceva né
   contro chi si giocava né com'era finita.

   Ora ogni gara è una scheda con i due stemmi che si guardano
   attraverso il punteggio. L'esito si legge in tre modi diversi —
   la fascia colorata a sinistra, la lettera V/N/P a destra, il nome
   del vincitore in grassetto — perché il colore da solo non basta a
   chi non distingue rosso e verde.
   ═════════════════════════════════════════════════════════════ */

.fix-elenco {
  max-width: 940px;
  margin: 0 auto;
}

/* La fascia blu del calendario, uguale alle sezioni della home.
   Sta dentro una `.section` che ha 40px di respiro ai lati: per
   arrivare ai bordi della finestra li si annulla con un margine
   negativo della stessa misura. Non si usa `100vw`, che include la
   barra di scorrimento e produrrebbe uno scorrimento laterale.
   In basso il margine negativo annulla anche il respiro finale della
   sezione, altrimenti sotto la fascia resterebbe una striscia chiara
   che la fa sembrare troncata. */
.fix-fascia {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  margin: 20px -40px calc(var(--sec-pad-y) * -1);
  padding: var(--sec-pad-y) 40px;
}
.fix-fascia .section-title { color: var(--white); }

/* Il mese fa da spartiacque: ventisei giornate di fila sono un muro.
   Sul blu è oro, come gli occhielli di sezione altrove nel sito. */
.fix-mese-titolo {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 8px;
  margin: 34px 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.fix-mese-titolo:first-child { margin-top: 0; }

/* ─── La scheda ─────────────────────────────────────────────── */

.fix {
  display: grid;
  grid-template-columns: 64px 1fr 128px;
  align-items: center;
  gap: 20px;
  background: var(--white);
  border: 1px solid var(--slate-border);
  /* La fascia a sinistra è il segnale d'esito più immediato: si vede
     scorrendo, senza leggere. Grigia finché non c'è un risultato. */
  border-left: 4px solid var(--slate-border);
  padding: 14px 20px;
  margin-bottom: 8px;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.fix:hover {
  transform: translateX(2px);
  box-shadow: var(--shadow-md);
}

/* Le gare in casa: sono quelle a cui il pubblico può andare, e in un
   elenco di ventisei righe devono saltare fuori da sole. Fondo appena
   virato al navy e fascia sinistra piena.
   Sta prima dell'esito di proposito: a partita giocata conta com'è
   finita, e il verde o il rosso passano sopra a questo. */
.fix.is-casa {
  border-left-color: var(--gold-deep);
  background: var(--velo-casa);
}

.fix.is-vinta { border-left-color: var(--esito-vinta); background: var(--velo-vinta); }
.fix.is-persa { border-left-color: var(--esito-persa); background: var(--velo-persa); }
.fix.is-pari  { border-left-color: var(--esito-pari); }

/* La prossima gara ha la precedenza su tutto: è l'unica riga che
   interessa davvero a chi apre la pagina a stagione in corso. */
.fix.is-prossima {
  border-left-color: var(--gold);
  border: 2px solid var(--gold-deep);
  border-left-width: 5px;
  background: var(--velo-prossima);
  box-shadow: 0 8px 24px -10px rgba(234, 179, 8, 0.8);
}

/* ─── Data ──────────────────────────────────────────────────── */

.fix-quando {
  text-align: center;
  line-height: 1;
  border-right: 1px solid var(--slate-border);
  padding-right: 16px;
}
.fix-giorno {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.fix-settimana {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 5px;
}

/* ─── La sfida ──────────────────────────────────────────────── */

.fix-sfida {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.fix-squadra {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
/* La squadra di casa si ribalta e si accosta al centro: cosi i due
   stemmi si guardano attraverso il punteggio, invece di puntare
   entrambi verso destra con il nome che gli scappa davanti. */
.fix-squadra.is-casa {
  flex-direction: row-reverse;
  justify-content: flex-start;
  text-align: right;
}
.fix-squadra.is-ospite { justify-content: flex-start; }

.fix-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}
.fix-logo-vuoto {
  background: var(--light-bg);
  border: 1px dashed var(--slate-border);
}

.fix-nome {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: break-word;
}
.fix-squadra.is-noi .fix-nome { color: var(--navy); font-weight: 800; }
.fix-squadra.is-vincente .fix-nome { font-weight: 800; }

/* ─── Punteggio e orario ────────────────────────────────────── */

.fix-centro {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
}

.fix-punteggio {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-display);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  padding: 6px 14px;
  line-height: 1;
}
/* Solo il numero del vincitore è pieno: l'altro resta smorzato, così
   il risultato si legge senza confrontare le due cifre. */
.fix-punteggio b { font-weight: 400; }
.fix-punteggio b.is-vincente { color: var(--gold); font-weight: 600; }
.fix-punteggio i { font-style: normal; opacity: 0.4; font-size: 16px; }

.fix-ora {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

/* ─── Esito e campo ─────────────────────────────────────────── */

.fix-coda {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  text-align: right;
}

.fix-esito {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--white);
}
.fix-esito.is-vinta { background: var(--esito-vinta); }
.fix-esito.is-persa { background: var(--esito-persa); }
.fix-esito.is-pari  { background: var(--esito-pari); }

.fix-esito.is-prossima {
  background: var(--gold);
  color: var(--navy);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  height: auto;
  padding: 6px 11px;
}
/* Una gara futura ma non la prossima: nessun colore, solo una nota. */
.fix-esito.is-attesa {
  background: none;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  height: auto;
  padding: 0;
}

.fix-dove {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  white-space: nowrap;
}
.fix-dove i { opacity: 0.6; margin-right: 3px; }

/* "In casa" diventa una pastiglia piena: la trasferta resta una nota
   di servizio, la gara al PalaSport è un invito. */
.fix-dove.is-casa {
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  padding: 3px 9px;
}
.fix-dove.is-casa i { opacity: 0.85; }

/* ─── Schermi stretti ───────────────────────────────────────── */

@media (max-width: 768px) {
  /* La sezione qui stringe da 40 a 20px di respiro: il margine
     negativo della fascia deve seguirla, o sborda dalla pagina. */
  .fix-fascia {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 720px) {
  .fix {
    grid-template-columns: 54px 1fr;
    gap: 14px;
    padding: 12px 14px;
  }
  .fix-quando { padding-right: 12px; }
  .fix-giorno { font-size: 22px; }

  /* I nomi lunghi non stanno accanto agli stemmi: le due squadre
     passano una sopra l'altra, col punteggio in mezzo. */
  .fix-sfida {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
  }
  .fix-centro { grid-row: 1 / span 2; }
  .fix-squadra.is-casa { flex-direction: row; text-align: left; }

  .fix-coda {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 4px;
  }
  .fix-nome { font-size: 13px; }
  .fix-logo { width: 28px; height: 28px; }
}

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .cta-band h2 { font-size: 26px; }
  .org-gruppo-title { font-size: 21px; }
}

/* Il presidente sta su fondo navy: link e bordo vanno riadattati. */
.persona.presidente .persona-email { color: var(--gold); }
.persona.presidente:hover { border-bottom-color: var(--gold); }

/* ─────────────────────────────────────────────────────────────
   Pagina galleria — schede album e modale a griglia

   Ripristina l'impaginazione originale del sito: copertina in alto
   con il conteggio, corpo chiaro sotto, e un pannello che mostra
   tutte le foto dell'album insieme invece di una per volta.
   ───────────────────────────────────────────────────────────── */
.album-card {
  background: var(--white);
  border: 1px solid var(--slate-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  cursor: pointer;
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  font: inherit;
}
.album-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}
/* La scheda album è un <button>, quindi dentro può stare solo
   contenuto inline: copertina, corpo e titolo sono <span>. Su un
   elemento inline però `height` non ha effetto — il riquadro della
   copertina collassava all'altezza di una riga di testo e la foto
   di sfondo non si vedeva affatto. Vanno dichiarati a blocco. */
.album-cover,
.album-body { display: block; }

.album-cover {
  height: 240px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.album-count-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(15,26,60,0.85);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(4px);
}
.album-body { padding: 20px; }
.album-title {
  /* Anche questo è uno <span>: senza blocco, `margin-top` non
     avrebbe effetto e finirebbe sulla stessa riga dell'etichetta. */
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--navy);
  margin-top: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.album-sfoglia {
  display: block;
  font-size: 13px;
  color: var(--blue-accent);
  font-weight: 700;
  margin-top: 8px;
}

/* Pannello album — tutte le foto insieme */
.album-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,26,60,0.92);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.album-overlay.is-open { display: flex; }
.album-panel {
  background: var(--white);
  max-width: 1100px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
}
.album-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--navy);
  background: none;
  border: none;
  padding: 4px 8px;
}
.album-close:hover { color: var(--gold-deep); }
.album-panel-head { margin-bottom: 24px; padding-right: 40px; }
.album-panel-head h2 {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--navy);
  letter-spacing: 1px;
}
.album-foto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.album-foto button {
  position: relative;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.album-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform var(--dur) var(--ease);
}
.album-foto button:hover img { transform: scale(1.05); }

/* La didascalia di una foto dell'album: in basso, in piccolo, sopra una
   sfumatura scura che la rende leggibile su qualunque foto. Due righe
   al massimo — una didascalia lunga non deve coprire la foto che
   descrive; per intero si legge nel visore. */
.album-foto-didascalia {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 10px 8px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--white);
  text-align: left;
  background: linear-gradient(to top, rgba(10, 18, 42, 0.85), rgba(10, 18, 42, 0));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
}

@media (max-width: 600px) {
  .album-panel { padding: 22px 18px; }
  .album-panel-head h2 { font-size: 22px; }
}

/* ─────────────────────────────────────────────────────────────
   La Storia — contenuti importati dal build WordPress
   ───────────────────────────────────────────────────────────── */
.storia-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  background: var(--navy);
}
.storia-stat {
  padding: 34px 20px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.storia-stat:last-child { border-right: none; }
.storia-stat-num {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.storia-stat-lab {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 10px;
}

.storia-testo { max-width: 820px; margin: 0 auto; }
.storia-testo p { font-size: 16.5px; line-height: 1.8; color: var(--text-muted); margin-bottom: 18px; }
.storia-citazione {
  border-left: 4px solid var(--gold);
  background: var(--light-bg);
  padding: 26px 30px;
  margin: 32px 0 0;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  color: var(--navy);
}

.obiettivi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.obiettivo {
  background: var(--white);
  border: 1px solid var(--slate-border);
  padding: 32px 26px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.obiettivo:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow-md); }
.obiettivo-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 18px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.obiettivo:hover .obiettivo-icon { background: var(--gold); color: var(--navy); }
.obiettivo h3 {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--navy);
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.obiettivo p { font-size: 14px; line-height: 1.6; color: var(--text-muted); }


/* ═════════════════════════════════════════════════════════════
   LA STORIA — introduzione a due colonne

   Il testo da solo, largo 820px e centrato, era una colonna di
   grigio senza appigli. Accanto ci va una foto d'archivio: regge
   la lettura e dice subito di che storia si parla.

   La foto resta agganciata in alto mentre il testo scorre, così
   non sprofonda a metà pagina quando i paragrafi si allungano.
   ═════════════════════════════════════════════════════════════ */

.storia-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  max-width: var(--wrap);
  margin: 0 auto;
}

.storia-figura {
  margin: 0;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.storia-figura img {
  width: 100%;
  display: block;
  box-shadow: var(--shadow-md);
}
.storia-figura figcaption {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  border-left: 3px solid var(--gold);
  padding-left: 12px;
  margin-top: 14px;
}

/* Nella colonna il testo non va più centrato né limitato: la
   larghezza gliela dà la griglia. */
.storia-intro .storia-testo { max-width: none; margin: 0; }


/* ═════════════════════════════════════════════════════════════
   TROFEI — meno peso

   Erano righe alte con la pastiglia oro e il titolo in Oswald da
   20px: pesavano quanto il racconto della società. Qui diventano
   un elenco compatto a due colonne — restano tutti leggibili, ma
   smettono di reclamare la pagina.
   ═════════════════════════════════════════════════════════════ */

.palmares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 0 40px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.trofeo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--slate-border);
}
.trofeo-icon {
  /* Non più una pastiglia piena: solo il segno, in oro scuro. */
  width: auto;
  height: auto;
  background: none;
  color: var(--gold-deep);
  font-size: 13px;
  flex-shrink: 0;
}
.trofeo-nome {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-dark);
  line-height: 1.35;
}
.trofeo-dett {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.5;
}


/* ═════════════════════════════════════════════════════════════
   LA SQUADRA NEL TEMPO — mosaico

   Dodici foto tutte della stessa misura si guardano come un
   contatto fotografico: si scorre e non ci si ferma. Qui alcune
   occupano due colonne, una anche due righe, e il ritmo irregolare
   dà all'occhio dove posarsi.

   Sono tutte orizzontali, quindi il taglio quadrato o panoramico
   non le deforma: `object-fit: cover` toglie dai lati, non
   schiaccia.
   ═════════════════════════════════════════════════════════════ */

.storia-mosaico {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 168px;
  /* `dense` fa risalire le foto piccole nei buchi lasciati dalle
     grandi: senza, il mosaico si riempirebbe di vuoti. */
  grid-auto-flow: dense;
  gap: 12px;
  max-width: var(--wrap);
  margin: 0 auto;
}

.mosaico-foto {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--navy-dark);
  cursor: pointer;
  display: block;
}
.mosaico-foto.is-larga  { grid-column: span 2; }
.mosaico-foto.is-grande { grid-column: span 2; grid-row: span 2; }

.mosaico-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease), opacity var(--dur) var(--ease);
}
.mosaico-foto:hover img { transform: scale(1.06); opacity: 0.82; }

/* La lente compare al passaggio: dice che lo scatto si apre. */
.mosaico-foto::after {
  content: '\f00e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 22px;
  background: rgba(15, 26, 60, 0.35);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.mosaico-foto:hover::after,
.mosaico-foto:focus-visible::after { opacity: 1; }

/* L'annata, dove la si conosce. */
.mosaico-foto[data-anno]::before {
  content: attr(data-anno);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  padding: 5px 12px;
}

@media (max-width: 900px) {
  .storia-intro { grid-template-columns: 1fr; gap: 30px; }
  .storia-figura { position: static; }

  .storia-mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  /* Su due colonne una foto larga occuperebbe tutta la riga e la
     grande farebbe un blocco sproporzionato: restano tutte pari. */
  .mosaico-foto.is-larga,
  .mosaico-foto.is-grande { grid-column: span 1; grid-row: span 1; }
}

.dove {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.dove-box {
  background: var(--white);
  border: 1px solid var(--slate-border);
  border-top: 3px solid var(--gold);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.dove-box i { font-size: 22px; color: var(--blue-accent); margin-bottom: 14px; display: block; }
.dove-box h3 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.dove-box p { font-size: 16px; color: var(--navy); font-weight: 700; line-height: 1.45; }
.dove-box span { display: block; font-size: 13.5px; color: var(--text-muted); font-weight: 400; margin-top: 3px; }

@media (max-width: 700px) {
  .storia-stat-num { font-size: 36px; }
  .storia-citazione { font-size: 18px; padding: 20px 22px; }
}

/* ─── Scheda video nella pagina galleria ────────────────────────
   Stessa distinzione che si usa in homepage: pastiglia rossa e
   triangolo del play. La forma della scheda resta quella degli
   album, così la griglia non si scompone. */

.album-count-badge.is-video {
  background: #FF0033;
  color: var(--white);
}

.album-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15,26,60,0.72);
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  color: var(--white);
  font-size: 21px;
  /* Il triangolo pende otticamente a sinistra: si ricentra a mano. */
  padding-left: 4px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.album-card.is-video:hover .album-play {
  background: #FF0033;
  border-color: #FF0033;
  transform: translate(-50%, -50%) scale(1.08);
}

/* ═══════════════════════════════════════════════════════════════
   Corpo dell'articolo

   `content` è l'unico HTML del sito scritto a mano in area riservata
   e stampato senza sfuggirlo. Finora non aveva stile: paragrafi
   attaccati e, da quando le immagini si inseriscono dal pannello, una
   foto larga quanto il suo originale — cioè fuori dalla colonna.
   ═══════════════════════════════════════════════════════════════ */
.articolo-corpo {
  font-size: 17px;
  line-height: 1.75;
  color: var(--navy);
}
.articolo-corpo > * + * { margin-top: 18px; }
.articolo-corpo h2,
.articolo-corpo h3 {
  margin-top: 34px;
  line-height: 1.25;
  color: var(--navy);
}
.articolo-corpo h2 { font-size: 26px; }
.articolo-corpo h3 { font-size: 21px; }
.articolo-corpo ul,
.articolo-corpo ol { padding-left: 22px; }
.articolo-corpo li + li { margin-top: 6px; }
.articolo-corpo a {
  color: var(--blue-accent);
  text-decoration: underline;
}
.articolo-corpo blockquote {
  margin-left: 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--gold);
  color: var(--text-muted);
  font-style: italic;
}

/* Le immagini messe dentro il testo dal pannello. Il <figure> arriva
   già dal gestionale; l'<img> nuda, incollata a mano, si comporta
   allo stesso modo. */
.articolo-corpo figure { margin: 28px 0; }
.articolo-corpo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.articolo-corpo figcaption {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
}

/* Tabelle, linee e allineamento: arrivano dal redattore del pannello.
   Prima non c'erano perché non c'era modo di scriverli — adesso sì, e
   senza queste regole una tabella uscirebbe come testo incolonnato
   senza bordi, che è peggio di non averla. */
.articolo-corpo table {
  /* `display:block` serve allo scorrimento: su un telefono una tabella
     a più colonne non entra nella colonna del testo, e stringere le
     parole finché non si spezzano è peggio che farla scorrere. */
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.5;
}
.articolo-corpo th,
.articolo-corpo td {
  border: 1px solid var(--slate-border);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.articolo-corpo th {
  background: var(--light-bg);
  font-weight: 700;
  color: var(--navy);
}
/* Righe alternate: con una classifica di dodici squadre l'occhio
   perde la riga a metà strada. */
.articolo-corpo tbody tr:nth-child(even) { background: rgba(22, 35, 78, 0.03); }

.articolo-corpo hr {
  border: 0;
  border-top: 2px solid var(--slate-border);
  margin: 32px 0;
}

.articolo-corpo .ta-c { text-align: center; }
.articolo-corpo .ta-r { text-align: right; }
/* Un'immagine centrata non deve stirarsi a tutta colonna: la regola
   generale qui sopra la porta al 100%, e su una foto verticale il
   risultato sarebbe un francobollo ingigantito. */
.articolo-corpo .ta-c img,
.articolo-corpo .ta-r img { display: inline-block; width: auto; max-width: 100%; }

/* Un video YouTube dentro l'articolo. Nel testo salvato è un'anteprima
   con un link al video: qui diventa uno schermo 16:9 col tasto play, e
   video-articolo.js lo trasforma nel lettore quando lo si preme. Senza
   JavaScript resta un link che apre il video su YouTube. */
/* Le stesse regole valgono per il link salvato e per il pulsante in cui
   lo script lo trasforma: il link resta per chi non ha JavaScript, il
   pulsante fa partire il video nella pagina e, non avendo un indirizzo,
   le statistiche non lo contano come un'uscita dal sito. */
.articolo-corpo .articolo-video a,
.articolo-corpo .articolo-video-avvia {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--navy);
  text-decoration: none;
  cursor: pointer;
}
.articolo-corpo .articolo-video a img,
.articolo-corpo .articolo-video-avvia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.4s ease;
}
.articolo-corpo .articolo-video a::after,
.articolo-corpo .articolo-video-avvia::after {
  content: '\f04b';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Il triangolo è otticamente sbilanciato a sinistra: qualche pixel a
     destra lo rimette al centro del cerchio, come in galleria. */
  padding-left: 5px;
  font-size: 24px;
  color: var(--white);
  background: rgba(15, 26, 60, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.articolo-corpo .articolo-video a:hover::after,
.articolo-corpo .articolo-video a:focus-visible::after,
.articolo-corpo .articolo-video-avvia:hover::after,
.articolo-corpo .articolo-video-avvia:focus-visible::after {
  background: #FF0033;
  border-color: #FF0033;
  transform: translate(-50%, -50%) scale(1.08);
}
.articolo-corpo .articolo-video a:hover img,
.articolo-corpo .articolo-video-avvia:hover img { transform: scale(1.03); }

/* Il lettore, dopo il clic: stesso riquadro, stesse proporzioni, così la
   pagina non salta. */
.articolo-corpo .articolo-video-quadro {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
}
.articolo-corpo .articolo-video-quadro iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ═════════════════════════════════════════════════════════════
   LA STORIA — racconto a blocchi e cronologia per capitoli
   (settembre 2026)

   Il testo della società è lungo: diviso in quattro blocchi, con il
   titolo in una colonna a sinistra, si legge a pezzi invece che
   come un muro. La cronologia ha 51 stagioni: raccolte in sei
   capitoli, ognuno con un riassunto e i momenti chiave. L'elenco
   completo si apre a richiesta con <details>, senza JavaScript.

   Classi nuove, tutte usate solo da la-storia.html. Le vecchie
   .storia-intro / .storia-figura / .storia-citazione sopra non le
   usa più nessuno.
   ═════════════════════════════════════════════════════════════ */

.storia-racconto {
  display: grid;
  gap: 30px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.storia-blocco {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 10px 48px;
  padding-top: 30px;
  border-top: 1px solid var(--slate-border);
}
.storia-blocco:first-child { border-top: 0; padding-top: 0; }
.storia-blocco h3,
.storia-chiusura h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-wrap: balance;
}
.storia-blocco h3 { color: var(--navy); }
.storia-blocco h3 small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--blue-accent);
}
/* Qui la larghezza la dà la griglia: niente centratura. 68 caratteri
   di riga restano comodi da leggere anche sugli schermi larghi. */
.storia-blocco .storia-testo { max-width: 68ch; margin: 0; }
.storia-blocco .storia-testo p:last-child { margin-bottom: 0; }

.storia-chiusura {
  max-width: var(--wrap);
  margin: 40px auto 0;
  padding: 34px 38px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 10px 48px;
  background: var(--navy);
}
.storia-chiusura h3 { color: var(--gold); }
.storia-chiusura p {
  margin: 0;
  max-width: 68ch;
  font-size: 16.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
}

.cronologia { max-width: var(--wrap); margin: 0 auto; }

/* L'indice dei capitoli: sei salti, per chi cerca un periodo preciso. */
.cronologia-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.cronologia-indice a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 13px;
  background: var(--white);
  border: 1px solid var(--slate-border);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.cronologia-indice a:hover { border-color: var(--navy); }
.cronologia-indice b {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--blue-accent);
  font-variant-numeric: tabular-nums;
}

.capitoli { display: grid; gap: 16px; }
.capitolo {
  /* Il salto dall'indice non deve finire sotto l'intestazione fissa. */
  scroll-margin-top: calc(var(--header-h) + 20px);
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 260px;
  gap: 18px 36px;
  align-items: start;
  padding: 30px;
  background: var(--white);
  border: 1px solid var(--slate-border);
  box-shadow: var(--shadow-sm);
}
.capitolo.senza-foto { grid-template-columns: 210px minmax(0, 1fr); }
/* Il capitolo che si sta scrivendo adesso. */
.capitolo.is-oggi {
  border-color: var(--gold-deep);
  box-shadow: inset 0 5px 0 var(--gold), var(--shadow-sm);
}
.capitolo-anni {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.4px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.capitolo-titolo {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--blue-accent);
}
.capitolo-conta { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }
.capitolo-sintesi {
  margin: 0 0 18px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--navy);
}

.storia-punti {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.storia-punti li {
  display: grid;
  grid-template-columns: 22px 64px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.storia-anno {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}
/* Il segno dice che cosa è successo prima ancora di leggere: la
   stessa scala di colori degli esiti delle partite. Non è mai l'unico
   indizio — accanto c'è sempre scritto. */
.segno {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 10px;
  line-height: 1;
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--slate-border);
}
.segno.is-su { background: var(--gold); border-color: var(--gold-deep); }
.segno.is-giu { background: var(--velo-persa); border-color: #E3C3C8; color: var(--esito-persa); }
.segno.is-coppa { background: var(--navy); border-color: var(--navy); color: var(--gold); }
.segno.is-ripresa { background: var(--light-bg); }
.segno.is-oggi { background: var(--navy); border-color: var(--navy); color: var(--white); }
.segno.is-origine { color: var(--blue-accent); }

.capitolo-tutte summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 6px;
  border-bottom: 2px solid var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy);
}
.capitolo-tutte summary::-webkit-details-marker { display: none; }
.capitolo-tutte summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
}
.capitolo-tutte[open] summary::after { content: '\2212'; }
.capitolo-tutte summary:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }

.stagioni-scorre { overflow-x: auto; }
.stagioni-tabella {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 14px;
}
.stagioni-tabella th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--navy);
  white-space: nowrap;
}
.stagioni-tabella td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--slate-border);
  color: var(--text-muted);
  vertical-align: top;
}
.stagioni-tabella td:first-child {
  font-family: var(--font-display);
  color: var(--navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}
.stagioni-tabella td:nth-child(2) { color: var(--navy); white-space: nowrap; }
.stagioni-tabella tr.is-su td { background: var(--velo-casa); }
.stagioni-tabella tr.is-giu td:first-child { box-shadow: inset 3px 0 0 var(--esito-persa); }
.stagioni-tabella tr.is-oggi td { background: var(--navy); color: rgba(255, 255, 255, 0.88); }
.stagioni-tabella tr.is-oggi td:first-child,
.stagioni-tabella tr.is-oggi td:nth-child(2) { color: var(--gold); }

.capitolo-foto { margin: 0; }
.capitolo-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}
.capitolo-foto figcaption {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 3px solid var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

@media (max-width: 980px) {
  .capitolo,
  .capitolo.senza-foto { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .capitolo-foto { max-width: 440px; }
}
@media (max-width: 760px) {
  .storia-blocco,
  .storia-chiusura { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .storia-chiusura { padding: 26px 22px; }
  .storia-chiusura p { font-size: 15.5px; }
  .capitolo-anni { font-size: 26px; }
  .storia-punti li { grid-template-columns: 22px 58px minmax(0, 1fr); gap: 10px; font-size: 14px; }
}