/* ==========================================================================
   STRUTTURA — sezione, contenitore, righe, colonne.
   NON è il profilo di stile: qui stanno larghezze e ripartizioni, che per la
   regola del confine appartengono alla struttura. Un profilo nuovo non tocca
   questo file; cambiare qui vale per tutti e quattro i profili.

       sezione            fondo a tutta pagina
         contenitore      larghezza dichiarata, centrato
           riga           N colonne che si dividono il contenitore
             colonna      il contenuto

   Il livello RIGA è quello che mancava nella prima stesura: una sezione può
   avere più righe con un numero di colonne diverso — titolo su una colonna
   sola, e sotto due colonne affiancate. Con una riga sola per sezione quel
   caso, che è normalissimo, era impossibile da rappresentare.
   ========================================================================== */

.contenitore{
  /* IL CONTENITORE E' IL CONTENITORE DI QUERY. Stava nel profilo, sulla
     sezione: la sezione e' a tutta pagina, quindi la soglia si comportava
     come una larghezza di finestra e il documento diceva il falso. Peggio:
     una regola di STRUTTURA dipendeva da un file che il cliente puo'
     sostituire — cambiando profilo si spegneva l'impilamento su telefono. */
  container-type:inline-size;
  max-width:var(--larghezza,1200px);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,3rem)
}

.riga{
  display:grid;
  grid-template-columns:var(--colonne,minmax(0,1fr));
  gap:var(--s5);
  align-items:start
}
.riga + .riga{margin-top:var(--s5)}

/* Sotto i 700 px del CONTENITORE (non della finestra) le colonne si impilano
   sempre. La regola scrive direttamente grid-template-columns invece di
   passare per la variabile: così vince anche sulle regolazioni del pannello,
   e nessuna scelta fatta sul desktop può rendere illeggibile il telefono. */
@container (max-width:699px){
  .riga{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .riga + .riga{margin-top:var(--s4)}
}

/* L'allineamento è struttura, non stile: cambia la forma percepita della
   sezione, non il suo aspetto. Sta qui e il profilo non lo tocca. */
.riga.centrata{justify-items:center;text-align:center}
.riga.centrata .azioni{justify-content:center}
.riga.centrata :is(h1,h2,p,.lead){margin-inline:auto}

/* ---- LE MISURE DI SEZIONE NON STANNO PIU' QUI ---------------------------
   [DECISIONE 2026-08-17] Questo file contiene SOLO le regole valide per
   tutte le pagine. Le larghezze e le ripartizioni delle singole sezioni
   ([data-el="sez-4"]{--larghezza:...}) sono MISURE DI PAGINA e vivono nel
   blocco <style> della pagina a cui appartengono, accanto al markup.

   Perche': questo foglio e' condiviso, e i nomi di sezione sono posizionali.
   La sez-4 di una pagina e la sez-4 di un'altra sono sezioni diverse: con i
   predefiniti qui dentro ognuna prendeva le misure dell'altra, senza un
   errore (reperto E della prova opt-in). Il controllo dei selettori orfani
   resta l'unica guardia contro la rinomina dentro la stessa pagina.

   La regola del vuoto a destra resta valida come regola di GENERAZIONE:
   se una riga ha una colonna di solo testo, il contenitore si stringe fino
   alla misura di lettura (~640px) — 1200px di testo sono 145 caratteri per
   riga, il doppio del leggibile. E se una colonna di testo supera i ~75
   caratteri per riga, si restringe il CONTENITORE, non si mette un tetto
   sull'elemento. */

/* ---- IMMAGINI E VIDEO ----------------------------------------------------
   Il riquadro ha misura fissa; l'immagine ci si muove dentro con zoom e
   fuoco. Il file originale non viene mai ritagliato: l'inquadratura e' una
   regolazione, quindi si rifa'. Un ritaglio no.

   E quando c'e' un'immagine il riquadro perde il margine interno: quel
   margine mostrava il fondo tutt'intorno alla foto e sembrava una cornice
   che nessuno aveva chiesto. */
.slot{overflow:hidden}
.slot:has(img),
.slot:has(iframe){padding:0}
.slot img{
  object-position:var(--fuoco-x,50%) var(--fuoco-y,50%);
  transform:scale(var(--zoom,1));
  transform-origin:var(--fuoco-x,50%) var(--fuoco-y,50%)
}
/* LE PROPORZIONI SONO UNA SOLA AUTORITA'.
   Il primo tentativo scriveva "aspect-ratio: var(--proporzioni, 16/9)" su
   tutte le immagini: quel 16/9 non era un ripiego, era un'imposizione, e
   schiacciava il ritratto 3:4 della biografia insieme a tutto il resto.

   La forma giusta e' l'opposto: lo scheletro dichiara la sua proporzione
   COME VARIABILE, e la regola la legge. Il pannello sovrascrive la variabile
   solo dove il cliente la cambia, e ogni riquadro che non tocca resta com'e'.
   E' la stessa lezione del "tetto sull'elemento": due autorita' sulla stessa
   misura, e vince quella che non si vede. */
/* Il predefinito si DICHIARA una volta, non si ripete come ripiego
   dentro ogni var(): un ripiego ripetuto e' una seconda autorita'. */
.slot{--proporzioni:16/9;aspect-ratio:var(--proporzioni)}
.slot--largo   {--proporzioni:16/9}
.slot--ritratto{--proporzioni:3/4}

/* IL TETTO DELL'ALTEZZA.
   La prima regola dava al riquadro solo una larghezza — quella della colonna
   — e ne ricavava l'altezza dalla proporzione. Con un formato verticale
   quel calcolo esplode: 544px di colonna a 9:16 fanno 967px di altezza, un
   video piu' alto di uno schermo.

   Un riquadro ha bisogno di DUE limiti, non uno. Con un tetto all'altezza la
   larghezza si ricava all'indietro (tetto x proporzione) e il riquadro si
   centra nella colonna: un verticale diventa 315x560, un orizzontale non
   cambia di un pixel perche' il suo limite resta la colonna. */
.slot{
  --altezza-max:560px;
  /* La larghezza va DICHIARATA. Senza, "margin-inline:auto" toglie alla
     cella di griglia lo stiramento predefinito e la larghezza diventa quella
     del contenuto: un'immagine a width:100% di una misura indefinita fa 0.
     Due riquadri su tre sono spariti cosi'. */
  width:100%;
  max-height:var(--altezza-max);
  max-width:calc(var(--altezza-max) * var(--proporzioni));
  margin-inline:auto
}

/* ---- IL VIDEO SI TAGLIA, NON SI ALLUNGA ---------------------------------
   Un video YouTube arriva sempre 16:9. Chiedendo un riquadro 9:16 la prima
   versione teneva il player 16:9 e faceva crescere il riquadro fino a 967px:
   il video restava piccolo in cima e sotto rimaneva il vuoto. Non era la
   proporzione del video, era l'altezza della pagina.

   La forma giusta e' quella dell'immagine: il riquadro comanda, il contenuto
   lo riempie e cio' che avanza si taglia. L'iframe viene ingrandito fino a
   coprire il riquadro nella dimensione piu' corta e centrato; il resto esce
   e "overflow:hidden" lo nasconde.

   NOTA DI METODO: tagliare un video girato in orizzontale a 9:16 butta via
   il 72% della larghezza. Il taglio serve a rifinire, non a trasformare un
   formato nell'altro: per una sezione verticale si gira verticale. */
.slot:has(iframe){position:relative}
.slot iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* PERCHE' NON SI TAGLIA PIU'.
   La versione precedente ingrandiva il player fino a coprire il riquadro e
   nascondeva cio' che usciva. Funzionava, ma dava per scontato che ogni
   video YouTube fosse 16:9 — e questo e' 1080x1920. Risultato: un player
   largo 996px dentro un riquadro di 315, con i comandi tagliati ai lati per
   ottenere un'inquadratura identica a quella che si aveva senza fare nulla.

   La proporzione del riquadro E' la proporzione del video. Chi la sceglie
   sta dicendo com'e' girato il video, non come vuole ritagliarlo: il player
   riempie il riquadro e i comandi restano interi. Se un giorno servira' un
   taglio vero servira' un secondo dato — il formato originale — e allora
   sara' una scelta esplicita, non un'ipotesi nascosta nel foglio di stile. */