/* SPDX-License-Identifier: MIT
 * =============================================================================================
 * JURA Club — Il sito pubblico
 * =============================================================================================
 * IT: Tutto ciò che appartiene al SITO e non all'applicazione: la barra editoriale, il piè di
 *     pagina a quattro colonne, le figure costruite, i blocchi narrativi e il movimento.
 *
 *     PERCHÉ UN FOGLIO SEPARATO E NON UN'AGGIUNTA A `componenti.css`.
 *     Il sito e l'applicazione hanno pubblici, ritmi e regole diverse: il primo deve convincere
 *     qualcuno che non ci conosce, il secondo deve far lavorare qualcuno che è già dentro. Tenuti
 *     insieme, ogni ritocco al sito rischia di spostare un pixel in una schermata operativa —
 *     e una schermata operativa che si muove senza motivo è un difetto che si scopre tardi.
 *
 *     NESSUN COLORE LETTERALE. Come nel resto del progetto: i colori stanno in `tokens.css`, qui
 *     si usano soltanto. Dove serve una trasparenza si usa `color-mix`, che parte da un token
 *     invece di reinventare la tinta.
 *
 *     IL MOVIMENTO È IN FONDO, IN UN BLOCCO SOLO (§7), e finisce con la regola che lo azzera a
 *     `prefers-reduced-motion: reduce`. Tenerlo tutto insieme è ciò che rende possibile
 *     verificare quella regola: sparso, prima o poi qualcosa le sfugge.
 * ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
 * 1. LA BARRA DEL SITO
 *
 * IT: Marchio a sinistra, voci editoriali al centro, le due porte a destra. La separazione fra
 *     voci e porte NON è estetica: «Verifica» è uno strumento e «Accedi» è un'altra
 *     applicazione. Messe in fila con «Come funziona» direbbero al visitatore che è già dentro
 *     la piattaforma, mentre deve ancora decidere se entrarci.
 * ------------------------------------------------------------------------------------------- */

.barra-sito {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--jura-blu-notte);
  color: var(--jura-avorio);
  border-bottom: 1px solid color-mix(in srgb, var(--jura-avorio) 16%, transparent);
}

/* IT: LA LARGHEZZA MASSIMA COMPRENDE IL PROPRIO INCASSO, e non è un dettaglio di stile: è la
 *     correzione del difetto per cui il marchio in cima risultava spostato a destra rispetto al
 *     testo delle sezioni — segnalato dal committente il 2026-08-09.
 *
 *     PERCHÉ ACCADEVA, e vale per qualunque contenitore di questo sito. Una sezione incassa il
 *     contenuto con il padding sull'elemento ESTERNO (`.sezione { padding: … var(--sp-6) }`) e poi
 *     centra un blocco largo al massimo `--larghezza-contenuto` nello spazio già ridotto. Questa
 *     barra faceva il contrario: centrava un blocco largo `--larghezza-contenuto` nella finestra
 *     INTERA e lo incassava dall'interno. Le due formule coincidono finché la finestra è stretta
 *     — vince il padding in entrambi i casi — e divergono di esattamente `--sp-6`, cioè 32 pixel,
 *     appena la finestra supera i 1180 più i margini. Il difetto era quindi **invisibile in
 *     sviluppo su finestra piccola e ben visibile su uno schermo grande**, che è la ragione per
 *     cui è arrivato al committente invece che a una prova.
 *
 *     Sommando l'incasso alla larghezza massima, il bordo del contenuto cade dove cade quello
 *     delle sezioni a ogni larghezza. Stessa correzione per le due parti del piè di pagina, che
 *     avevano la stessa forma e lo stesso scarto. */
.barra-sito__interno {
  max-width: calc(var(--larghezza-contenuto) + var(--sp-6) * 2);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  min-height: var(--altezza-topbar);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.barra-sito__logo {
  display: flex;
  align-items: center;
  color: var(--jura-avorio);          /* governa il `currentColor` dell'SVG del marchio */
  text-decoration: none;
  flex: 0 0 auto;
}
.barra-sito__logo svg { height: 21px; width: auto; display: block; }
/* Al sorvolo il marchio va in ORO: su fondo Blu Notte il colore di `a:hover` lo farebbe
 * sparire. Stessa regola della barra applicativa, per la stessa ragione. */
.barra-sito__logo:hover,
.barra-sito__logo:focus-visible { color: var(--jura-oro); }

/* --- Il contenitore delle voci e delle porte -------------------------------------------------
 * IT: Era un `<details>` con menù a scomparsa. Non lo è più: nei browser recenti lo stato chiuso
 *     non si forza da CSS come si credeva, e il menù restava invisibile anche a schermo largo —
 *     difetto segnalato dal committente, non trovato da una prova. Cinque voci stanno in riga e
 *     vanno a capo: nessun congegno, quindi niente che si possa rompere. */
.barra-sito__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex: 1 1 auto;
}
.barra-sito__nav { flex: 1 1 auto; }

.barra-sito__voci {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;            /* nessun pallino nei menù: regola del progetto */
}
.barra-sito__voci a {
  display: inline-block;
  padding: var(--sp-2) 0;
  color: color-mix(in srgb, var(--jura-avorio) 82%, transparent);
  text-decoration: none;
  font-size: var(--testo-sm);
  font-weight: var(--peso-medio);
  /* IL FILETTO STA SOTTO, MA LO SPAZIO VA RISERVATO ANCHE SOPRA.
   * DIFETTO VERO, segnalato dal committente: il marchio sembrava disallineato rispetto alle voci.
   * Non lo era — erano le voci a essere spostate. Con il solo bordo inferiore la scatola del
   * collegamento è due pixel più alta in basso, e `align-items: center` centra la SCATOLA: il
   * testo finiva quindi un pixel più in alto del marchio, che una scatola simmetrica ce l'ha.
   * Un bordo superiore trasparente della stessa misura rende la scatola simmetrica, e il testo
   * torna sull'asse del marchio. Nessun ritocco a occhio: si toglie la causa. */
  border-block: 2px solid transparent;
  transition: color var(--transizione), border-color var(--transizione);
}
.barra-sito__voci a:hover,
.barra-sito__voci a:focus-visible { color: var(--jura-avorio); }
/* La pagina corrente si marca con l'oro, non con il grassetto: il grassetto sposta il testo e
 * fa ballare la barra da una pagina all'altra. */
.barra-sito__voci a[aria-current="page"] {
  color: var(--jura-oro);
  border-bottom-color: var(--jura-oro);
}

/* Il marchio è alto quanto una voce: così il centro dei due coincide invece di avvicinarsi. La
 * misura è in `em` per seguire il carattere se qualcuno ingrandisce la pagina. */
.barra-sito__logo svg { height: 1.6em; }

.barra-sito__azioni {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}

/* --- Sotto i 900px: le voci vanno a capo -----------------------------------------------------
 * IT: La barra diventa due righe — marchio e porte sopra, voci sotto — invece di nascondere le
 *     voci dietro un bottone. Su cinque voci il bottone costava un tocco in più e un congegno da
 *     mantenere, e non guadagnava spazio che servisse a qualcosa. */
@media (max-width: 900px) {
  .barra-sito__interno {
    flex-wrap: wrap;
    padding: var(--sp-2) var(--sp-4);
    gap: var(--sp-3);
  }
  .barra-sito__menu {
    flex: 1 1 100%;
    order: 3;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
  .barra-sito__voci {
    flex-wrap: wrap;
    gap: var(--sp-4);
    row-gap: var(--sp-2);
  }
  .barra-sito__azioni { flex-wrap: wrap; }
}

/* Sotto i 560px anche le porte scendono su una riga propria e si allargano: su un telefono un
 * bersaglio piccolo accanto a un altro bersaglio piccolo è la ricetta del tocco sbagliato. */
@media (max-width: 560px) {
  .barra-sito__menu { flex-direction: column; align-items: stretch; }
  .barra-sito__azioni { width: 100%; }
  .barra-sito__azioni .bottone { flex: 1 1 auto; text-align: center; }
}

/* ---------------------------------------------------------------------------------------------
 * 2. IL PIÈ DI PAGINA DEL SITO
 *
 * IT: Chi valuta un fornitore cerca in fondo alla pagina chi c'è dietro. Prima non trovava
 *     nessuno: c'era una riga di rimandi. Quattro colonne, e i dati dell'emittente sono veri.
 * ------------------------------------------------------------------------------------------- */

.piede-sito {
  margin-top: auto;                      /* incolla il piede al fondo anche su pagine corte */
  background: var(--jura-blu-notte);
  color: color-mix(in srgb, var(--jura-avorio) 78%, transparent);
  font-size: var(--testo-sm);
}
/* --- LA GRIGLIA DEL PIEDE ---------------------------------------------------------------------
 * IT: Disposizione esplicita, non «riempi come capita». Prima era
 *     `repeat(auto-fit, minmax(200px, 1fr))`: comodo da scrivere, ma il numero di colonne lo
 *     decideva la larghezza della finestra, quindi la stessa pagina mostrava il piede in tre
 *     forme diverse su tre schermi — e l'emittente finiva in una colonna stretta, con la ragione
 *     sociale e la partita IVA a capo tre volte ciascuna.
 *
 *     LA FORMA VOLUTA, in tre righe:
 *       riga 1 — il marchio e, di fianco, le colonne di voci;
 *       riga 2 — l'emittente, che occupa DUE colonne perché i suoi dati sono righe lunghe;
 *       riga 3 — la coda, allineata alle colonne sopra.
 *
 *     Le colonne di voci si dispongono da sole a partire dalla seconda: se un giorno la colonna
 *     della dimostrazione sparisce — in esercizio sparisce — le altre restano dove sono, invece
 *     di riallargarsi e cambiare tutto l'equilibrio. */
.piede-sito__interno {
  /* IT: Vedi la nota su `.barra-sito__interno`: la larghezza comprende l'incasso, così le colonne
   *     del piede cominciano dove comincia il testo delle sezioni. */
  max-width: calc(var(--larghezza-contenuto) + var(--sp-6) * 2);
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  column-gap: var(--sp-6);
  row-gap: var(--sp-7);
  align-items: start;
}

/* Il marchio apre la prima riga; le colonne di voci la completano una dopo l'altra. */
.piede-sito__colonna--marchio { grid-column: 1; grid-row: 1; }

/* L'emittente comincia sotto il marchio e prende due colonne. */
.piede-sito__colonna--emittente { grid-column: 1 / span 2; grid-row: 2; }

/* `min-width: 0` non è cosmesi: senza, una partita IVA o un indirizzo lungo impediscono alla
 * colonna di restringersi — le colonne di una griglia hanno larghezza minima automatica — e
 * mandano l'intera riga in sfondamento orizzontale. */
.piede-sito__colonna { min-width: 0; }

/* Il marchio e la riga di posizionamento, nella prima colonna. */
.piede-sito__logo { display: block; color: var(--jura-avorio); }
.piede-sito__logo svg { height: 24px; width: auto; display: block; }
.piede-sito__motto {
  margin-top: var(--sp-3);
  max-width: 34ch;
  line-height: var(--interlinea);
}

.piede-sito__titolo {
  font-family: var(--font-titolo);
  font-size: var(--testo-sm);
  font-weight: var(--peso-forte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jura-oro);
  margin: 0 0 var(--sp-3);
}
.piede-sito__voci { list-style: none; margin: 0; padding: 0; }
.piede-sito__voci li + li { margin-top: var(--sp-2); }
.piede-sito__voci a,
.piede-sito__emittente a {
  color: color-mix(in srgb, var(--jura-avorio) 82%, transparent);
  text-decoration: none;
}
.piede-sito__voci a:hover,
.piede-sito__voci a:focus-visible,
.piede-sito__emittente a:hover,
.piede-sito__emittente a:focus-visible { color: var(--jura-oro); text-decoration: underline; }

/* `address` in HTML è corsivo per impostazione predefinita del browser: qui è un blocco di dati
 * societari, non una citazione, e il corsivo ne peggiora soltanto la leggibilità. */
.piede-sito__emittente {
  font-style: normal;
  line-height: var(--interlinea-larga);
}
.piede-sito__emittente strong { color: var(--jura-avorio); }

/* La coda: il filetto attraversa tutta la larghezza — è una separazione, e una separazione
 * parziale sembra un errore — ma il testo comincia dove cominciano le colonne sopra, con lo
 * stesso contenitore e lo stesso rientro. Su schermo largo le due righe stanno affiancate,
 * copyright a sinistra e avvertenza a destra; sotto gli 800px vanno a capo. */
.piede-sito__coda {
  border-top: 1px solid color-mix(in srgb, var(--jura-avorio) 14%, transparent);
}
.piede-sito__coda-interno {
  /* IT: Stessa formula delle colonne sopra, altrimenti il filetto attraversa tutta la larghezza ma
   *     il testo sotto rientra di 32 pixel rispetto alle colonne — cioè la separazione sembrerebbe
   *     storta senza che nulla lo sia. */
  max-width: calc(var(--larghezza-contenuto) + var(--sp-6) * 2);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-5);
}
.piede-sito__coda p { margin: 0; }
.piede-sito__coda .tenue { color: color-mix(in srgb, var(--jura-avorio) 58%, transparent); }
.piede-sito__coda a { color: inherit; }

/* ---------------------------------------------------------------------------------------------
 * 3. L'EROE DEL SITO
 *
 * IT: Variante dell'eroe già esistente: stesso fondo, più respiro, e una figura accanto al testo.
 *     La gerarchia della homepage nasce dalla VARIAZIONE di densità fra i blocchi, non dalla loro
 *     quantità: se tutti pesano uguale, nessuno domina e la pagina si legge piatta.
 * ------------------------------------------------------------------------------------------- */

.eroe--sito { padding-block: clamp(var(--sp-7), 9vw, calc(var(--sp-8) * 1.6)); }
.eroe--sito .eroe__interno {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--sp-7);
  align-items: center;
}
.eroe__occhiello {
  display: inline-block;
  font-size: var(--testo-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jura-oro);
  margin-bottom: var(--sp-4);
}
.eroe--sito .eroe__claim {
  font-size: clamp(var(--testo-2xl), 5.4vw, var(--testo-3xl));
  max-width: 14ch;
}
.eroe__figura { color: var(--jura-oro); justify-self: center; width: min(100%, 320px); }

/* Lo SLOT FOTOGRAFICO. Dichiaratamente vuoto finché il Cliente non consegna le immagini: le
 * proporzioni e il ritaglio sono già fissati, quindi la sostituzione non tocca la struttura. */
.slot-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px dashed color-mix(in srgb, var(--jura-oro) 42%, transparent);
  border-radius: var(--raggio);
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--jura-avorio) 52%, transparent);
  font-size: var(--testo-xs);
  text-align: center;
  padding: var(--sp-4);
}
.slot-foto--chiaro {
  border-color: var(--colore-bordo);
  color: var(--colore-testo-tenue);
}

@media (max-width: 860px) {
  .eroe--sito .eroe__interno { grid-template-columns: minmax(0, 1fr); }
  .eroe__figura { width: min(100%, 240px); order: -1; }
}

/* ---------------------------------------------------------------------------------------------
 * 4. LA SPINA DORSALE NUMERATA
 *
 * IT: Un numero grande, una parola, tre righe. È il blocco che le due referenze indicate dal
 *     committente hanno in comune, e funziona per una ragione precisa: il numero dice quante
 *     cose sono e in che ordine stanno, prima ancora che si legga una parola.
 * ------------------------------------------------------------------------------------------- */

.passi-numerati {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  counter-reset: passo;
}
.passo-numerato { border-top: 2px solid var(--jura-oro); padding-top: var(--sp-4); }
.passo-numerato__numero {
  display: block;
  font-family: var(--font-titolo);
  font-size: var(--testo-2xl);
  line-height: 1;
  color: color-mix(in srgb, var(--jura-oro) 72%, transparent);
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;    /* i numeri restano allineati fra una scheda e l'altra */
}
.passo-numerato__titolo {
  font-family: var(--font-titolo);
  font-size: var(--testo-lg);
  margin: 0 0 var(--sp-2);
}
.passo-numerato p { margin: 0; color: var(--colore-testo-tenue); }

/* ---------------------------------------------------------------------------------------------
 * 5. DENTRO E FUORI LA CATENA
 *
 * IT: Due colonne affiancate, con lo stesso peso grafico. È la sezione che a un notaio interessa
 *     per prima, e il fatto che le due colonne siano identiche nella forma è parte del
 *     messaggio: né l'una né l'altra è la lista delle scuse.
 * ------------------------------------------------------------------------------------------- */

.dentro-fuori {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.colonna-catena {
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: var(--sp-5);
  background: var(--colore-superficie);
}
.colonna-catena--dentro { border-top: 3px solid var(--jura-oro); }
.colonna-catena--fuori { border-top: 3px solid var(--colore-bordo-ui); }
.colonna-catena__titolo {
  font-family: var(--font-titolo);
  font-size: var(--testo-md);
  margin: 0 0 var(--sp-3);
}
.colonna-catena ul { list-style: none; margin: 0; padding: 0; }
.colonna-catena li {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--colore-bordo);
}
.colonna-catena li:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------------------------------------
 * 6. LE FIGURE COSTRUITE
 *
 * IT: Prendono il colore da chi le ospita, come il marchio. Nessuna misura fissa: la figura
 *     riempie il contenitore, e il contenitore decide.
 * ------------------------------------------------------------------------------------------- */

.figura { display: block; width: 100%; height: auto; }
.figura--catena { max-width: 460px; }
.figura--fascicolo { max-width: 260px; }

/* La trama di fondo: assoluta, sotto al contenuto, e non intercetta il puntatore. */
.con-trama { position: relative; isolation: isolate; overflow: hidden; }
.con-trama > .sezione__interno { position: relative; z-index: 1; }
.trama {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  color: var(--jura-oro);
  opacity: 0.07;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------------------------
 * 7. IL MOVIMENTO — tutto qui, e azzerato in fondo
 *
 * IT: Quattro effetti e basta: apparizione allo scroll, il sigillo che si compone, la catena che
 *     si aggancia, il fascicolo che si sigilla. Nessuna libreria.
 *
 *     LO STATO DI PARTENZA È APPLICATO DAL JAVASCRIPT, NON DAL CSS.
 *     `.entra` nasconde l'elemento, e questo significa che senza JavaScript gli elementi
 *     resterebbero invisibili per sempre. Perciò la classe la mette lo script, sull'elemento che
 *     ha già deciso di osservare: a script spento nessuno la mette, e la pagina è semplicemente
 *     completa e ferma. È la stessa regola di tutto il portale — le pagine funzionano senza
 *     JavaScript — applicata alla cosa che più facilmente la violerebbe.
 * ------------------------------------------------------------------------------------------- */

.entra {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.entra--visibile { opacity: 1; transform: none; }

/* Lo sfalsamento: sei ritardi, applicati dalle classi che lo script assegna in ordine. */
.entra--r1 { transition-delay: 60ms; }
.entra--r2 { transition-delay: 120ms; }
.entra--r3 { transition-delay: 180ms; }
.entra--r4 { transition-delay: 240ms; }
.entra--r5 { transition-delay: 300ms; }
.entra--r6 { transition-delay: 360ms; }

/* --- LE FIGURE NON SI ANIMANO PIÙ, ED È UNA RINUNCIA DELIBERATA -------------------------------
 * IT: Qui c'erano quaranta righe che facevano comparire le figure un pezzo alla volta: le celle
 *     del sigillo in senso orario, i blocchi della catena con i loro legami, il fascicolo che si
 *     sigilla. Erano curate e funzionavano — ma per funzionare dovevano partire da `opacity: 0` e
 *     aspettare che il JavaScript le accendesse.
 *
 *     **Quella dipendenza è costata tre segnalazioni dal committente**, tutte con la stessa
 *     frase: «c'è solo un esagono e basta». Ogni volta che qualcosa arrivava fra la resa e
 *     l'osservatore — un foglio in cache, uno script non ancora eseguito, un ricaricamento a metà
 *     — la figura restava semplicemente bianca, e una figura bianca non si legge come
 *     un'animazione che deve ancora partire: si legge come una pagina rotta.
 *
 *     LA REGOLA CHE NE ESCE, e vale oltre questo file: **una decorazione non può essere l'unica
 *     ragione per cui un contenuto è visibile.** Se il modo per vedere una cosa è che
 *     un'animazione sia andata a buon fine, quella non è più una decorazione — è un requisito, e
 *     un requisito non si affida a un arricchimento progressivo.
 *
 *     Le figure ora sono visibili sempre, dal primo pixel dipinto. Il movimento resta dove è
 *     sicuro per costruzione: i blocchi che entrano scorrendo, il cui stato iniziale lo applica lo
 *     script — quindi se lo script non gira, non lo applica nessuno e la pagina è completa e
 *     ferma. È l'opposto esatto di com'erano fatte le figure, ed è il motivo per cui `.entra` non
 *     ha mai dato problemi. */

/* --- L'AZZERAMENTO ---------------------------------------------------------------------------
 * IT: `reduce` non è «più lento»: è «niente». Chi ha attivato quella preferenza di sistema lo ha
 *     fatto per una ragione — vertigini, emicrania, disturbi vestibolari — e un'animazione
 *     addolcita continua a produrle. Qui il movimento si spegne, e tutto ciò che il movimento
 *     doveva rivelare resta visibile: è il motivo per cui `opacity` torna a 1 anche senza che
 *     nessuna animazione parta. */
@media (prefers-reduced-motion: reduce) {
  .entra,
  .entra--visibile {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0ms;
  }
}

/* ---------------------------------------------------------------------------------------------
 * 8. COMPOSIZIONE — regole ripristinate dopo un taglio accidentale
 *
 * IT: Questo blocco era già stato scritto e **si è perso in una modifica automatica**: una
 *     riscrittura del foglio ha troncato il file al punto sbagliato, portandosi via tutto ciò che
 *     seguiva. Il gate è rimasto verde perché nessuna prova guardava se le classi usate dalle
 *     viste esistessero davvero — difetto corretto insieme a questo ripristino.
 * ------------------------------------------------------------------------------------------- */

/* --- L'allineamento delle sezioni di sola lettura --------------------------------------------
 * IT: Le sezioni che combinano `.sezione__interno` e `.colonna-lettura` rimpicciolivano il
 *     CONTENITORE da 1180px a 760px, e siccome è centrato il loro bordo sinistro rientrava di
 *     duecento pixel rispetto alle sezioni sopra. Il testo era leggibile, la pagina no: scorrendo,
 *     il margine sinistro ballava.
 *
 *     Il contenitore resta largo come gli altri e si stringono i FIGLI: la colonna di lettura
 *     conserva i settanta caratteri per riga — che è la ragione per cui esiste — ma comincia dove
 *     cominciano le altre sezioni. Limitare la riga di testo e limitare il blocco che la contiene
 *     sono cose diverse, e metterle sulla stessa classe le confonde per sempre. */
.sezione__interno.colonna-lettura { max-width: var(--larghezza-contenuto); }
.sezione__interno.colonna-lettura > * { max-width: var(--larghezza-editoriale); }

/* ---------------------------------------------------------------------------------------------
 * UN TESTO LEGALE LETTO PER INTERO
 *
 * IT: L'informativa privacy è lunga dodicimila caratteri e qualcuno la leggerà davvero dall'inizio
 *     alla fine — è la ragione per cui esiste. La spaziatura dell'interfaccia, tarata su schede e
 *     tabelle, su un testo così produce un muro: qui i titoli hanno aria sopra, i paragrafi
 *     respirano e la riga resta nella colonna di lettura.
 *
 *     La resa viene da `server/markdown.mjs`, che produce tag semplici e nessuna classe: gli stili
 *     si agganciano quindi agli ELEMENTI dentro `.testo-legale`, ed è corretto — il convertitore
 *     non deve sapere come questo sito impagina, e questo foglio non deve sapere come quello
 *     converte.
 * ------------------------------------------------------------------------------------------- */
.testo-legale { font-size: var(--testo-lg); line-height: 1.7; }
.testo-legale > :first-child { margin-top: 0; }
.testo-legale h2 { font-family: var(--font-titolo); font-size: var(--testo-xl); margin: var(--sp-7) 0 var(--sp-3); }
.testo-legale h3 { font-size: var(--testo-lg); margin: var(--sp-6) 0 var(--sp-2); color: var(--colore-testo-forte); }
.testo-legale h4 { font-size: var(--testo-md); margin: var(--sp-5) 0 var(--sp-2); color: var(--colore-testo-forte); }
.testo-legale p  { margin: 0 0 var(--sp-4); }
.testo-legale ul, .testo-legale ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.testo-legale li { margin-bottom: var(--sp-2); }
.testo-legale code { font-family: var(--font-mono); font-size: 0.9em; background: var(--colore-superficie-alt); padding: 1px var(--sp-1); border-radius: var(--raggio-sm); }
.testo-legale hr { border: 0; border-top: 1px solid var(--colore-bordo); margin: var(--sp-7) 0; }

/* IT: Le citazioni del corpus portano l'avvertenza di stato e le note di versione: sono
 *     METATESTO, non contenuto normativo, e vanno lette come tali — filetto d'oro a sinistra,
 *     corpo più piccolo, colore attenuato. Un lettore deve poter saltare quel blocco senza
 *     temere di perdersi una clausola. */
.testo-legale blockquote {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--jura-oro);
  background: var(--colore-superficie-alt);
  font-size: var(--testo-sm);
  color: var(--colore-testo-tenue);
}
.testo-legale blockquote p:last-child { margin-bottom: 0; }

/* IT: Le tabelle del corpus ereditano `.tabella`, quindi anche la trasformazione in schede sotto
 *     i 720px. Qui si aggiusta solo il corpo, che nel testo lungo sarebbe sproporzionato. */
.testo-legale .tabella { margin: 0 0 var(--sp-5); font-size: var(--testo-sm); }
.testo-legale .tabella td { vertical-align: top; }

.riga--centro { justify-content: center; }

/* La catena è una figura larga e bassa: si centra e si limita, altrimenti su uno schermo grande
 * diventerebbe un fregio che pesa più del testo che accompagna. */
.figura-orizzontale { display: block; width: min(100%, 460px); color: var(--jura-oro); }

/* Il fascicolo accanto alle due colonne. Sotto i 900px la griglia va a una colonna e la figura,
 * che è illustrazione e non informazione, si toglie di mezzo: su un telefono ogni schermata
 * occupata da un disegno è una schermata di lettura in meno. */
.colonna-catena__figura {
  display: grid;
  place-items: center;
  color: var(--jura-oro);
  padding: var(--sp-4);
}
@media (max-width: 900px) { .colonna-catena__figura { display: none; } }

/* --- La figura che si spiega ------------------------------------------------------------------
 * IT: Le didascalie stanno sotto i segni della figura e si distribuiscono in tre colonne uguali:
 *     sono ancorate alla larghezza, non alla posizione esatta dei disegni, perché una didascalia
 *     che insegue un pixel si sfila al primo ritocco del tracciato. */
.figura-spiegata { margin: 0; }
.figura--prova { color: var(--jura-oro); }
.figura-spiegata__voci {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  text-align: center;
  font-size: var(--testo-xs);
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--jura-avorio) 72%, transparent);
}

/* ---------------------------------------------------------------------------------------------
 * 9. LE FOTOGRAFIE
 *
 * IT: Il riquadro decide le proporzioni; la fotografia le riempie ritagliandosi. È l'ordine
 *     giusto: se fosse l'immagine a dettare l'altezza, ogni sostituzione sposterebbe il testo
 *     attorno — e le immagini si sostituiscono, è il loro mestiere.
 * ------------------------------------------------------------------------------------------- */

.riquadro-foto {
  border-radius: var(--raggio);
  overflow: hidden;                       /* è il riquadro a ritagliare, non l'immagine */
  aspect-ratio: 16 / 9;
}
.foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Un filo di scurimento lega la fotografia alla palette senza filtri appariscenti: su fondo
   * Blu Notte un'immagine a piena luminosità stacca come un adesivo. */
  filter: saturate(0.92) brightness(0.96);
}

/* Dentro l'eroe il riquadro fotografico è ORIZZONTALE, e per esserlo deve poter essere largo.
 * `.eroe__figura` da sola vale 320px — misura pensata per un disegno quadrato — e su una foto
 * 16:9 produceva un francobollo. Qui la larghezza sale, e sotto gli 860px il riquadro prende
 * tutta la colonna invece di restare una miniatura in mezzo allo schermo. */
.eroe__figura.riquadro-foto { width: min(100%, 520px); }
@media (max-width: 860px) { .eroe__figura.riquadro-foto { width: 100%; } }

/* Il segnaposto dentro un riquadro deve riempirlo, non aggiungere una seconda proporzione. */
.riquadro-foto .slot-foto { aspect-ratio: auto; height: 100%; }


/* ---------------------------------------------------------------------------------------------
 * 11. L'ANIMAZIONE DELLE FIGURE — rimessa, e questa volta costruita bene
 *
 * IT: Le figure degli eroi si compongono un segno alla volta. La stessa cosa che era stata tolta,
 *     ma con la differenza che conta: **lo stato che nasconde non vive qui**.
 *
 *     COM'ERA E PERCHÉ FALLIVA. Le parti partivano da `opacity: 0` nel foglio di stile e
 *     diventavano visibili solo se l'animazione partiva. Bastava qualcosa fra la resa e
 *     l'osservatore — un foglio in cache, uno script non ancora eseguito — e restavano bianche
 *     per sempre. Tre segnalazioni dal committente, tutte con la stessa frase.
 *
 *     COM'È ORA. `figura--pronta` la mette lo SCRIPT, un istante prima di mettersi a osservare;
 *     `figura--animata` arriva quando la figura entra nello schermo. Se lo script non gira, la
 *     prima classe non compare, niente si nasconde, e la figura è ferma e completa. L'animazione
 *     è tornata a essere ciò che deve essere: un di più che si può perdere senza perdere nulla.
 *
 *     È lo stesso schema di `.entra`, che non ha mai dato problemi in quaranta pagine. Estenderlo
 *     invece di inventare un secondo meccanismo è metà del lavoro fatto qui.
 * ------------------------------------------------------------------------------------------- */

.figura--pronta .figura__parte { opacity: 0; }

.figura--animata .figura__parte {
  animation: comparsa-parte 560ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes comparsa-parte {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Le parti hanno un'origine di trasformazione propria: senza `fill-box` un tracciato SVG si
 * muoverebbe rispetto all'angolo del disegno, non rispetto a sé stesso, e la traslazione di sei
 * pixel diventerebbe uno scivolamento in diagonale. */
.figura__parte { transform-box: fill-box; transform-origin: center; }

/* Otto tempi, che bastano: oltre l'ottavo la figura non racconta più, aspetta. */
.figura--animata .figura__parte--1 { animation-delay: 0ms; }
.figura--animata .figura__parte--2 { animation-delay: 90ms; }
.figura--animata .figura__parte--3 { animation-delay: 180ms; }
.figura--animata .figura__parte--4 { animation-delay: 270ms; }
.figura--animata .figura__parte--5 { animation-delay: 360ms; }
.figura--animata .figura__parte--6 { animation-delay: 450ms; }
.figura--animata .figura__parte--7 { animation-delay: 540ms; }
.figura--animata .figura__parte--8 { animation-delay: 630ms; }

@media (prefers-reduced-motion: reduce) {
  /* Doppia difesa: lo script già non applica nulla, ma se un giorno qualcuno mettesse la classe
   * a mano il movimento resterebbe spento lo stesso. */
  .figura--pronta .figura__parte,
  .figura--animata .figura__parte { opacity: 1; animation: none; transform: none; }
}

/* Il riquadro fotografico a piena colonna, per le sezioni: l'eroe ne usa uno stretto accanto al
 * testo, una sezione lo vuole largo quanto il contenuto. Proporzione più bassa perché a metà
 * pagina una fotografia alta spezza la lettura invece di accompagnarla. */
.riquadro-foto--largo { width: 100%; aspect-ratio: 21 / 9; }

/* --- Il piede sugli schermi stretti ----------------------------------------------------------
 * IT: Sotto i 900px la griglia a quattro colonne diventa due: il marchio e l'emittente prendono
 *     tutta la larghezza — sono blocchi di testo, non elenchi — e le colonne di voci stanno
 *     appaiate. Sotto i 560px tutto in colonna singola. */
@media (max-width: 900px) {
  .piede-sito__interno {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--sp-6);
    padding: var(--sp-6) var(--sp-4);
  }
  .piede-sito__colonna--marchio,
  .piede-sito__colonna--emittente { grid-column: 1 / -1; grid-row: auto; }
  .piede-sito__coda-interno { padding-inline: var(--sp-4); }
}

@media (max-width: 560px) {
  .piede-sito__interno { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------------------------
 * 12. LA LEGENDA
 *
 * IT: Nasce per la mappa delle schermate, dove i ruoli sono scritti con una lettera sola. Una
 *     sigla senza legenda non è una sintesi: è un codice, e chi non l'ha scritto non lo decifra.
 * ------------------------------------------------------------------------------------------- */

.legenda {
  border: 1px solid var(--colore-bordo);
  border-left: 3px solid var(--jura-oro);
  border-radius: var(--raggio);
  background: var(--colore-superficie);
  padding: var(--sp-5);
}
.legenda__titolo {
  font-family: var(--font-titolo);
  font-size: var(--testo-md);
  margin: 0 0 var(--sp-4);
}
.legenda__voci {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3) var(--sp-5);
  margin: 0;
}
/* Sigla e spiegazione sulla stessa riga: la sigla è larga uguale per tutte, così le spiegazioni
 * partono allineate e l'occhio scorre una colonna sola invece di inseguire il testo. */
.legenda__voce { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--sp-3); }
.legenda__voce dt { margin: 0; }
.legenda__voce dd { margin: 0; }
.legenda__voce dd strong { display: block; }

/* --- LA SIGLA DI RUOLO ------------------------------------------------------------------------
 * IT: Il bollo con la lettera. Prima era una `pill` generica: nata per gli stati — «Resa»,
 *     «Segnaposto» — quindi larga quanto il testo che contiene. Con una lettera sola diventava un
 *     ovale storto, e cinque ovali di larghezza diversa in fila si leggevano come un errore di
 *     composizione invece che come un insieme.
 *
 *     Qui la forma è FISSA e uguale per tutte: stessa larghezza, stessa altezza, cerchio. Cinque
 *     cerchi identici si leggono come una serie — che è esattamente ciò che sono — e la colonna
 *     dei ruoli acquista un ritmo invece di un elenco di macchie.
 *
 *     `1lh` non si usa qui di proposito: l'altezza è in `em` legata alla dimensione del carattere,
 *     così la sigla scala con il testo se qualcuno ingrandisce la pagina, e resta un cerchio. */
.sigla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85em;
  height: 1.85em;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--jura-oro) 55%, transparent);
  background: color-mix(in srgb, var(--jura-oro) 10%, transparent);
  color: var(--jura-oro-scuro);
  font-family: var(--font-mono);
  font-size: var(--testo-xs);
  font-weight: var(--peso-forte);
  line-height: 1;
  /* La spaziatura fra lettere del carattere monospaziato sposterebbe la lettera fuori asse: su un
   * carattere solo non serve, e toglierla è ciò che la centra davvero. */
  letter-spacing: 0;
  text-transform: none;
  cursor: help;                 /* il nome per esteso è nel `title`, e il puntatore lo annuncia */
}

/* Più sigle in fila, nella colonna di una tabella. */
.sigle { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Nella legenda la sigla è più grande: lì è il soggetto della riga, non un'etichetta di servizio. */
.legenda .sigla { font-size: var(--testo-sm); cursor: default; }

/* ---------------------------------------------------------------------------------------------
 * 13. I MODULI DI CONTATTO
 * ------------------------------------------------------------------------------------------- */

.modulo-contatto {
  border: 1px solid var(--colore-bordo);
  border-top: 3px solid var(--jura-oro);
  border-radius: var(--raggio);
  background: var(--colore-superficie);
  padding: var(--sp-5);
  /* I due moduli hanno un numero diverso di campi: senza questo si allineerebbero in alto e la
   * riga sotto ballerebbe. Riempire l'altezza della cella li tiene appaiati. */
  height: 100%;
}
.modulo-contatto__titolo {
  font-family: var(--font-titolo);
  font-size: var(--testo-lg);
  margin: 0 0 var(--sp-2);
}
.modulo-contatto__form { margin-top: var(--sp-5); }
.modulo-contatto textarea { resize: vertical; min-height: 7em; }

/* Il consenso: la casella e il testo su due colonne, con il testo che non va sotto la casella. */
.campo--consenso { margin-top: var(--sp-4); }
.campo--consenso .scelta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.campo--consenso .scelta span { font-size: var(--testo-sm); line-height: var(--interlinea); }
.campo--consenso .tenue { display: block; margin-top: var(--sp-1); }

/* --- IL CAMPO ESCA ---------------------------------------------------------------------------
 * IT: Deve essere invisibile a una persona e presente per un programma automatico. Non si usa
 *     `display: none` né `visibility: hidden`: i programmi migliori li riconoscono e saltano il
 *     campo, che è esattamente ciò che non vogliamo. Lo si porta fuori dallo schermo lasciandolo
 *     nel flusso e nel DOM, così chi compila tutto ci casca e chi guarda non lo vede.
 *
 *     `position: absolute` con `left: -9999px` è la forma che funziona anche quando il foglio non
 *     è ancora arrivato: nel peggiore dei casi si vede per un istante un campo con la sua
 *     etichetta, che dice «non compilare questo campo» — cioè si spiega da sé. */
.esca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}