/* ============================================================================
   VSA26 — BASE
   Reset minimo + tipografia + primitive di layout.
   → in WP: theme.json styles.* + un piccolo base.css del tema.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--vsa-paper);
  color: var(--vsa-ink);
  font-family: var(--vsa-font-body);
  font-size: var(--vsa-fs-base);
  line-height: var(--vsa-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--vsa-font-display);
  font-weight: 400;
  line-height: var(--vsa-lh-snug);
  letter-spacing: var(--vsa-tracking-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--vsa-fs-xxl); line-height: var(--vsa-lh-tight); letter-spacing: var(--vsa-tracking-display); }
h2 { font-size: var(--vsa-fs-xl); }
h3 { font-size: var(--vsa-fs-lg); }
h4 { font-size: var(--vsa-fs-md); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img, video, svg { max-width: 100%; height: auto; display: block; }

button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--vsa-accent-ink);
  outline-offset: 3px;
}

::selection { background: var(--vsa-accent); color: #fff; }

/* --- Primitive di layout -------------------------------------------------
   → settings.layout.contentSize / wideSize + le classi alignwide/alignfull */
.u-wide {
  width: min(100% - var(--vsa-gutter) * 2, var(--vsa-wide));
  margin-inline: auto;
}
.u-content {
  width: min(100% - var(--vsa-gutter) * 2, var(--vsa-content));
  margin-inline: auto;
}
.u-full { width: 100%; }

/* --- Contenuto Gutenberg (the_content) ------------------------------------
   Equivalente classico di settings.layout.contentSize/wideSize: qui non c'è
   Site Editor a generarlo da sé, va scritto una volta per ogni template che
   chiama the_content(). Il WRAPPER non ha mai un max-width proprio — sono i
   FIGLI a scegliere la propria larghezza in base alla classe di
   allineamento. Se il wrapper stesso fosse vincolato (es. .u-wide messo
   direttamente su <main>, il bug trovato in fase di collaudo del §30),
   nessun blocco "a piena larghezza" potrebbe mai sfondarlo. */
/* --vsa-content è 68ch, e `ch` si misura sul carattere dell'elemento che lo
   usa: un titolo h2 di primo livello si ritrovava una colonna di 952px
   contro i 779px del paragrafo sotto, e sporgeva a sinistra («Orari» nella
   pagina della XVI, 5 ottobre 2026). Registrata come <length>, la variabile
   si risolve in pixel UNA volta, su .vsa-entry, col carattere del testo
   corrente, e ai figli arriva già calcolata. Un browser che non conosce
   @property torna al comportamento di prima. */
@property --vsa-entry-content {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}
.vsa-entry { --vsa-entry-content: var(--vsa-content); }
.vsa-entry > * {
  width: min(100% - var(--vsa-gutter) * 2, var(--vsa-entry-content));
  margin-inline: auto;
}
.vsa-entry > .alignwide,
.vsa-entry > .u-wide { width: min(100% - var(--vsa-gutter) * 2, var(--vsa-wide)); }
.vsa-entry > .alignfull,
.vsa-entry > .u-full { width: 100%; }

/* Ritmo verticale fra i blocchi — equivalente sistemico di .u-section del
   prototipo (spaziatura "a sezioni" fra blocchi di primo livello), ma qui
   applicato una volta sola invece che con uno spacer o un margine scritto a
   mano blocco per blocco: ogni pagina lo eredita gratis, la redazione non
   deve mai pensarci. Un'intestazione seguita dal proprio contenuto resta
   più vicina (era .vsa-secthead nel prototipo), il resto no. */
/* La classe è ripetuta (`.vsa-entry.vsa-entry`) di proposito, e va tenuta:
   parecchi blocchi azzerano il proprio margine per neutralizzare il default
   dello user agent — `.vsa-artwork { margin: 0 }` è lì per la <figure>, che
   di suo nasce con 1em 40px. A parità di specificità quel reset vince per
   ordine di sorgente (blocks.css carica dopo base.css) e si porta via il
   ritmo insieme al default: è così che l'opera in evidenza della home è
   rimasta incollata alla griglia sopra. Il ritmo però è una proprietà del
   CONTENITORE, non del blocco, e deve vincere sul reset di un singolo
   blocco. Le eccezioni sotto vanno alla stessa specificità, o non
   riuscirebbero più a scavalcare la regola generale. */
.vsa-entry.vsa-entry > * + * { margin-top: var(--vsa-space-xl); }
.vsa-entry.vsa-entry > .wp-block-heading + * { margin-top: var(--vsa-space-md); }
/* Un'intestazione di sezione porta già il proprio margine sotto (la riga di
   chiusura deve restare attaccata a ciò che introduce): il ritmo di sezione
   qui si somberebbe, allontanando il titolo dalla propria griglia. */
.vsa-entry.vsa-entry > .vsa-secthead + * { margin-top: 0; }
/* Il marquee è una barra d'annuncio pensata per stare incollata a quello che
   segue (nel prototipo, Marquee ed Hero sono elementi adiacenti senza alcun
   gap fra loro) — non una sezione a sé. */
.vsa-entry.vsa-entry > .wp-block-vsa-marquee + * { margin-top: 0; }
/* La banda numeri sta a ridosso SOLO quando segue subito la testata (come
   about-us): lì il gap lo dà già il padding-block dell'hero (Hero.css),
   sommarci anche il ritmo di sezione sarebbe doppio. Spostata altrove —
   es. sotto un'altra sezione — deve invece separarsi normalmente: non è
   una barra d'annuncio come il marquee, non sta bene incollata a
   qualunque cosa la preceda. */
.vsa-entry.vsa-entry > .vsa-hero-scope + .wp-block-vsa-stats { margin-top: 0; }

.u-stack > * + * { margin-top: var(--vsa-space-sm); }

/* Occhiello: ricorre in hero, card, crediti, programma.
   → in WP diventa un block style, non un blocco. */
.u-eyebrow {
  font-family: var(--vsa-font-display);
  font-size: var(--vsa-fs-micro);
  letter-spacing: var(--vsa-tracking-wide);
  text-transform: uppercase;
  color: var(--vsa-ink-muted);
  /* margin-block, non margin: serve solo ad annullare il margine sotto che
     `p` porta di suo. Un `margin: 0` secco azzera anche il margin-inline:auto
     con cui .vsa-entry centra i propri figli, e un occhiello usato come
     blocco di primo livello (la provenienza sulla pagina artista) finiva
     schiacciato al bordo sinistro. Quinta occorrenza dello stesso errore:
     v. .vsa-team, .vsa-edgrid, .vsa-edlist, .vsa-cards. */
  margin-block: 0;
}

/* Lo stacco fra occhiello e titolo appartiene al TITOLO, non
   all'occhiello, e si misura in em del titolo.

   Due ragioni. La prima è che `.u-eyebrow { margin-block: 0 }` qui sopra
   batte per ordine di sorgente qualunque `margin-bottom` scritto su una
   variante — `.vsa-hero__eyebrow` ne aveva uno, stessa specificità, e non
   ha mai avuto effetto: sotto il titolo della home, 118px, lo stacco
   reale era ZERO.

   La seconda è che un valore fisso non può servire una scala che va da
   22px a 118px: 7px sotto un H3 sono giusti, sotto un titolo display
   sono un incollaggio. In em del titolo la proporzione è la stessa a
   ogni corpo, per costruzione.

   Solo davanti a un titolo: gli occhielli che introducono un elenco (il
   piè di pagina, i livelli dei partner) hanno già una spaziatura loro. */
.u-eyebrow + :is(h1, h2, h3, h4, .vsa-hero__title, .vsa-card__title) {
  margin-top: 0.26em;
}

/* E il verso opposto — un titolo di pagina seguito da qualunque cosa.
   Qui però non è una questione di proporzione ma di INCHIOSTRO:
   --vsa-lh-tight vale 0.98, cioè MENO di uno, quindi i discendenti (g, p,
   y) escono dal box della riga. Misurato su «Giulio Frigo»: la coda della
   g scende 9,21px sotto la linea di base mentre il box finisce a 8,14px —
   un pixel oltre. Con l'etichetta della provenienza attaccata al box, la
   coda le finiva dentro.

   In em del titolo e non in px: lo stesso motivo della regola qui sopra —
   .u-h1 va da 36px a 98px lungo la scala fluida, e con un valore fisso il
   difetto tornerebbe ai corpi grandi, dove lo sconfinamento è maggiore. */
.u-h1 { margin-bottom: 0.18em; }

.u-meta {
  font-size: var(--vsa-fs-xs);
  line-height: var(--vsa-lh-relaxed);
  color: var(--vsa-ink-muted);
}

/* Intestazione di sezione — portata da pages.css del prototipo, dove era
   nata come primitiva di pagina. Nel tema era rimasta solo citata in un
   commento: i template la usavano (archivio podcast, archivi di ambito)
   ma non le corrispondeva nessuna regola, quindi niente riga di chiusura
   e nessuno stacco fra il titolo e ciò che segue.
   Il titolo a sinistra, l'eventuale link/conteggio a destra sulla stessa
   linea di base. */
.vsa-secthead {
  display: flex; flex-wrap: wrap; gap: var(--vsa-space-sm);
  align-items: baseline; justify-content: space-between;
  padding-bottom: var(--vsa-space-sm); margin-bottom: var(--vsa-space-md);
  border-bottom: 1px solid var(--vsa-rule-strong);
}
/* Quando l'intestazione è un core/group con layout flex, Gutenberg genera
   una classe .wp-container-* con align-items:center — più specifica di
   .vsa-secthead. La linea di base condivisa fra titolo e link va riaffermata,
   o il link piccolo galleggia a metà di un titolo grande. */
.wp-block-group.vsa-secthead { align-items: baseline; }
.vsa-secthead h2 { font-size: var(--vsa-fs-xl); }
.vsa-secthead p { margin: 0; }
.vsa-secthead a {
  font-family: var(--vsa-font-display); font-size: var(--vsa-fs-xs);
  letter-spacing: var(--vsa-tracking-wide); text-transform: uppercase;
}

.u-lead {
  font-size: var(--vsa-fs-md);
  line-height: var(--vsa-lh-relaxed);
}

/* Sezione: il ritmo verticale del sito nasce qui, non dagli spacer manuali.
   È il blocco che rende inutile l'abuso di core/spacer (84 occorrenze oggi). */
.u-section { padding-block: var(--vsa-space-xl); }
.u-section--tight { padding-block: var(--vsa-space-lg); }
.u-section--alt { background: var(--vsa-paper-alt); }
/* Solo la coda: serve a ogni pagina che apre con una fascia a piena
   larghezza — la home con il marquee, le istituzionali con la testata —
   perché quella fascia deve restare incollata all'intestazione del sito.
   Senza, l'ultimo blocco della pagina tocca la fascia scura della
   newsletter. */
.u-section--tail { padding-bottom: var(--vsa-space-xl); }

/* Prima di una fascia colorata il ritmo NON si dimezza, e la prima stesura
   di questa regola sbagliava a farlo. I due valori misurano cose diverse:
   il padding della sezione che precede è lo stacco fra un blocco e l'altro,
   quello della fascia è lo stacco fra il bordo del colore e il suo
   contenuto. Toglierne uno faceva sfiorare il testo al bordo colorato, e
   soprattutto rendeva /mostre/ diverso dalla home, che la stessa fascia la
   distanzia di 111 + 111. La regola giusta è: nessuna regola: ognuno tiene
   il proprio. */

.u-rule { border: 0; border-top: 1px solid var(--vsa-rule); margin: 0; }

.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Link di testo con sottolineatura raffinata */
.u-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--vsa-rule-strong);
  transition: text-decoration-color var(--vsa-dur) var(--vsa-ease);
}
.u-link:hover { text-decoration-color: currentColor; }

/* Campo di form: etichetta visibile sopra, riga sottile sotto — niente placeholder
   usato come etichetta (sparisce appena si scrive, e non è mai stato accessibile).
   Ricorre in newsletter, contatti, candidatura open call.
   → in WP: stile condiviso dei blocchi form, non un blocco. */
.vsa-field { display: grid; gap: var(--vsa-space-3xs); }
.vsa-field__label {
  font-family: var(--vsa-font-display);
  font-size: var(--vsa-fs-micro);
  letter-spacing: var(--vsa-tracking-wide);
  text-transform: uppercase;
  color: var(--vsa-ink-muted);
}
.vsa-field__req { color: var(--vsa-accent-ink); }
.vsa-field input,
.vsa-field textarea {
  width: 100%; font: inherit; color: var(--vsa-ink);
  background: transparent; border: 0; border-radius: 0;   /* iOS arrotonda di suo */
  border-bottom: 1px solid var(--vsa-rule-strong);
  padding: 0.7em 0;
  transition: border-color var(--vsa-dur) var(--vsa-ease),
              box-shadow var(--vsa-dur) var(--vsa-ease);
}
/* ink-faint sarebbe 2,45:1: il placeholder è testo, non decorazione. */
.vsa-field input::placeholder,
.vsa-field textarea::placeholder { color: var(--vsa-ink-muted); }
.vsa-field input:focus-visible,
.vsa-field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--vsa-accent-ink);
  box-shadow: 0 1px 0 0 var(--vsa-accent-ink);   /* la riga raddoppia invece di spostare il testo */
}
/* Errore sul campo. Al posto del fumetto del browser, che non si può
   disegnare: il modulo lo spegne (novalidate, da JS) e scrive qui. La riga
   sotto il campo diventa del colore accento e raddoppia, come al focus. */
.vsa-field input[aria-invalid="true"],
.vsa-field textarea[aria-invalid="true"] {
  border-bottom-color: var(--vsa-accent-ink);
  box-shadow: 0 1px 0 0 var(--vsa-accent-ink);
}
.vsa-field__errore {
  margin: 0;
  font-family: var(--vsa-font-serif); font-style: italic;
  font-size: var(--vsa-fs-sm);
  color: var(--vsa-accent-ink);
}
.vsa-field__errore[hidden] { display: none; }