/* ==========================================================================
   Copiato da toolkit-condiviso/ui-widgets/overlay-tre-percorsi (7 luglio 2026),
   personalizzato con i colori del marchio Convergenze. Vedi il toolkit per la
   versione generica/documentata.
   ========================================================================== */

:root {
  /* 14 luglio 2026, su richiesta di Gianni: colori aggiornati alla palette Synopia (i primi tre
     estratti dall'immagine di apertura della home, il quarto è il rosa/rosso del bottone
     primario — var(--syn-accent) in index.php) al posto della vecchia palette Convergenze
     (terracotta/verde/ocra, valori originali lasciati in commento per riferimento).
     15 luglio 2026 (segnalato da Gianni, "i colori fanno ancora a pugni con la leggerezza del
     resto del sito"): quel primo passaggio aveva sistemato solo queste 4 variabili, ma il resto
     del foglio usava ancora, sotto questi nomi, una lunga serie di colori caldi scritti a mano
     (crema/marrone/terracotta della vecchia identità Convergenze) mai portati alla nuova palette.
     Sostituiti in blocco con la stessa famiglia di bianco/grigio/rosa già in uso in index.php
     (--syn-text/--syn-muted/--syn-card/--syn-bg/--syn-accent-light) — per valore, non per var(),
     perché questo foglio resta autonomo (si carica anche su pagina.php in visita diretta, che non
     definisce quelle variabili nel proprio :root): stesso criterio già seguito per le 4 variabili
     qui sotto. Delle vecchie 3 solo percorso-c cambia ancora: percorso-a/b erano già freddi
     (teal/blu notte, coerenti col grafico dell'hero), percorso-c (pesca) era invece l'ultimo
     colore caldo rimasto — diventa il rosa chiaro già usato come --syn-accent-light in index.php,
     per restare comunque distinto da a/b come terzo colore identificativo di sezione. Il topbar
     della scheda (.header-scheda-overlay) resta scuro come richiesto esplicitamente in una
     sessione precedente — cambia solo la tonalità (da bruno caldo a un nero quasi puro, coerente
     con --syn-text), non la scelta di tenerlo scuro. */
  --overlay-accent: #D6336C; /* prima: #2B2420 (nero/marrone scuro) */
  --overlay-percorso-a: #24575B; /* prima: #C0532D (terracotta) */
  --overlay-percorso-b: #253036; /* prima: #3B5D33 (verde radice) */
  --overlay-percorso-c: #F3A6C6; /* prima: #E9B48E (pesca) — prima ancora: #D9A441 (ocra). Ora = --syn-accent-light in index.php */
}

.overlay-sfondo {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.overlay-sfondo.visibile {
  opacity: 1;
  pointer-events: auto;
}

/* Colore di sezione: resta visibile intorno alla gabbia per tutta la durata
   dell'apertura, a identificare a quale ambito/sezione appartiene la scheda
   aperta (es. eventi = terracotta) — non è decorativo, è un'informazione. */
.overlay-sfondo.sezione-a { background: var(--overlay-percorso-a); }
.overlay-sfondo.sezione-b { background: var(--overlay-percorso-b); }
.overlay-sfondo.sezione-c { background: var(--overlay-percorso-c); }

/* Variante "card su sfondo colore": qui il colore di sezione copre tutta la
   gabbia (vedi contenuto-su-colore sopra), quindi la pagina sul fondo resta
   bianca invece di ripetere lo stesso colore anche fuori dalla finestra. */
.overlay-sfondo.sezione-bianca { background: #FFFFFF; }

.overlay-schermo {
  position: fixed;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  background: var(--overlay-accent);
  z-index: 9999;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: visible; /* il clipping vero è su .overlay-schermo-clip: qui deve restare
    visibile perché l'header (logo compreso) possa sporgere sopra il bordo. */
  box-sizing: border-box;
  display: none;
}

/* Contiene i percorsi/fasce e il pannello di contenuto: stesso raggio della gabbia,
   ma è questo elemento (non .overlay-schermo) a tagliare ciò che esce dai bordi. */
.overlay-schermo-clip {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
}

/* Header della scheda: fisso in alto, sempre presente (non fa parte del frammento
   caricato), così non "stacca" mai dal contenuto sottostante — e la parte centrale
   (il logo) può sporgere sopra il bordo della finestra grazie a overflow:visible qui
   sopra. Aggiornato via JS (titolo sezione, link "Partecipa") a ogni apertura. */
/* Topbar della scheda (9 luglio 2026) — sostituisce il vecchio header con emblema
   centrale flottante: logo orizzontale a sinistra, menu di 4 voci a seguire, nome
   sezione + Chiudi a destra. Sfondo pieno (stesso colore della gabbia) invece di
   trasparente: stessa logica di .menu-interno-overlay (bar scura, testo chiaro), così
   resta leggibile sia sopra i percorsi/fasce colorati in apertura sia sopra il pannello
   bianco una volta rivelato il contenuto. */
.header-scheda-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #16181C;
  z-index: 10;
}
.header-scheda-overlay .gruppo-sinistro {
  display: flex;
  align-items: center;
  gap: 34px;
  min-width: 0;
}
.header-scheda-overlay .logo-scheda {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.header-scheda-overlay .logo-scheda .logo-icona-scheda {
  height: 30px;
  width: auto;
  display: block;
}
.header-scheda-overlay .logo-scheda .logo-nome-scheda {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.6px;
  line-height: 1.15;
  color: #FFFFFF;
}
.header-scheda-overlay .logo-scheda .logo-sottotitolo-scheda {
  font-family: 'Work Sans', sans-serif;
  font-size: 10px;
  letter-spacing: .3px;
  color: rgba(255,255,255,.55);
  margin-top: 2px;
}
.header-scheda-overlay .menu-scheda {
  display: flex;
  align-items: center;
  gap: 22px;
}
/* Ogni pagina di livello 1 ha un blocco .menu-scheda-per-pagina pronto (vedi render_menu_scheda
   in nav.php), mostrato/nascosto via JS (mostraMenuSchedaContestuale in overlay-tre-percorsi.js)
   in base al pannello aperto — 13 luglio 2026. display:contents sul blocco visibile fa sì che i
   suoi link partecipino al flex/gap di .menu-scheda come se non ci fosse il div intorno; le
   regole sono esplicite in entrambi i sensi (non solo l'attributo [hidden] nativo) perché una
   regola CSS d'autore su un selettore di pari specificità vince comunque sullo stile utente-agente
   di [hidden], quindi va dichiarato display:none a mano per il caso nascosto. */
.header-scheda-overlay .menu-scheda-per-pagina[hidden] {
  display: none;
}
.header-scheda-overlay .menu-scheda-per-pagina:not([hidden]) {
  display: contents;
}
/* 14 luglio 2026: menu e titoli della scheda passati a Poppins regular (peso 400) su richiesta
   di Gianni — prima Fraunces/600 come il resto della topbar (logo, bottone Chiudi, che restano
   invariati). Poppins è già caricato sia in index.php sia in pagina.php (nessun nuovo <link>
   necessario). */
.header-scheda-overlay .menu-scheda a {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 13px;
  /* 14 luglio 2026: colori di rollover invertiti su richiesta di Gianni — a riposo ora pieno
     (#FFFFFF, prima era il colore di hover), al passaggio del mouse si affievolisce
     (rgba .68, prima era il colore di riposo). Stessa coppia di valori, solo scambiati. */
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
}
.header-scheda-overlay .menu-scheda a:hover,
.header-scheda-overlay .menu-scheda a.voce-attiva {
  color: rgba(255,255,255,.68);
}
.header-scheda-overlay .gruppo-destro {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}
/* 14 luglio 2026: spostato da .gruppo-destro a .gruppo-sinistro, prima di .menu-scheda (vedi
   markup in index.php) — ora un link vero (<a>, non più <span>) verso l'indice della sezione
   aperta, non solo testo statico: text-decoration/cursor aggiunti di conseguenza, hover coerente
   con quello del menu appena sopra. */
.header-scheda-overlay .titolo-sezione-overlay {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  /* Ingrandito di 6px (era 13px) su richiesta di Gianni, 10 luglio 2026: da quando questo
     nome resta fisso sulla sezione aperta (non cambia più con la navigazione interna, vedi
     navigaSchedaInterna in overlay-tre-percorsi.js) ha più peso come identità della scheda,
     non solo un'etichetta accessoria. */
  font-size: 19px;
  letter-spacing: -.3px;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.header-scheda-overlay .titolo-sezione-overlay:hover { color: rgba(255,255,255,.75); }
.header-scheda-overlay .btn-lato {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 13px;
  color: #16181C;
  text-decoration: none;
  background: #FFFFFF;
  border: none;
  padding: 7px 16px;
  border-radius: 20px;
  white-space: nowrap;
  cursor: pointer;
}
.header-scheda-overlay .btn-lato:hover { background: #E7EAEE; }

.overlay-percorso {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Curva cambiata il 9 luglio 2026 (era cubic-bezier(.22,1,.36,1)): quella curva ha i due
     punti di controllo a y=1, quindi il movimento arriva quasi subito vicino al valore
     finale e passa il resto della durata ad "assestarsi" — a video si percepisce come "il
     primo/ultimo frame compare/scompare troppo velocemente" (segnalato da Gianni), perché
     la parte di movimento realmente visibile avviene in una piccola frazione della durata.
     cubic-bezier(.65,0,.35,1) è un ease-in-out simmetrico: velocità distribuita su tutta la
     durata, niente scatto iniziale. */
  transition: transform 1.4s cubic-bezier(.65,0,.35,1);
}
#overlay-percorso-a { background: var(--overlay-percorso-a); transform: translateX(-100%); }
#overlay-percorso-b { background: var(--overlay-percorso-b); transform: translateX(100%); }
#overlay-percorso-c { background: var(--overlay-percorso-c); transform: translateY(100%); }

.overlay-schermo.iris-aperto #overlay-percorso-a,
.overlay-schermo.iris-aperto #overlay-percorso-b,
.overlay-schermo.iris-aperto #overlay-percorso-c {
  transform: translate(0, 0);
  transition: transform 1.6s cubic-bezier(.65,0,.35,1);
}
.overlay-schermo.iris-aperto #overlay-percorso-b { transition-delay: .06s; }
.overlay-schermo.iris-aperto #overlay-percorso-c { transition-delay: .12s; }

/* Pannello bianco: 85% della larghezza della gabbia, centrato (9 luglio 2026 — prima
   occupava tutta la gabbia edge-to-edge), altezza piena, ed entra dal basso — comparsa
   separata da quella dei tre percorsi, non una dissolvenza. */
#overlay-contenuto-dinamico {
  position: absolute;
  inset: 0 7.5%;
  z-index: 2;
  background: #FFFFFF;
  border-radius: 8px;
  /* overflow:hidden, non più overflow-y:auto (13 luglio 2026): questo elemento ospita anche le
     sotto-pagine precaricate come .scheda-interna-figlio, position:absolute e traslate fuori
     dalla gabbia quando non "mostra" — con overflow-y:auto quello spazio fuori gabbia contava
     comunque come area scrollabile (i browser non escludono gli elementi trasformati dal calcolo
     dello scroll di un antenato "auto"), causando un secondo scroll qui E la possibilità di
     scorrere fino a vedere le sotto-pagine ancora nascoste. Ora questo elemento è solo una
     "finestra": lo scroll vero è nella vista attiva, vedi .overlay-corpo-interno qui sotto. */
  overflow: hidden;
  transform: translateY(100%);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
#overlay-contenuto-dinamico.mostra {
  transform: translateY(0);
}

/* Variante di rivelazione per l'effetto "due fasce convergenti": il pannello non
   scorre dal basso, appare con una dissolvenza sopra le due fasce già convergenti. */
#overlay-contenuto-dinamico.rivela-con-fade {
  transform: none;
  opacity: 0;
  transition: opacity .5s ease;
}
#overlay-contenuto-dinamico.rivela-con-fade.mostra {
  opacity: 1;
}

/* Variante di rivelazione per il passaggio da una scheda all'altra restando nello stesso
   pannello già aperto (9 luglio 2026, via il menu della topbar): entrata da sinistra,
   invece della comparsa dal basso usata per la prima apertura del pannello — distingue
   visivamente "apro il pannello" da "cambio scheda dentro il pannello". */
#overlay-contenuto-dinamico.entrata-laterale {
  transform: translateX(-100%);
  transition: transform .5s cubic-bezier(.65,0,.35,1);
}
#overlay-contenuto-dinamico.entrata-laterale.mostra {
  transform: translateX(0);
}

/* Sotto-pagine di una sezione "griglia", precaricate insieme all'indice nello stesso fetch
   (13 luglio 2026, vedi pagina.php e vaiSchedaInterna in overlay-tre-percorsi.js — sostituisce
   il precedente meccanismo fetch-per-click con clone/transizione a tempo, .overlay-contenuto-
   clone, rimosso perché non più usato). Stessa tecnica del panel-stack della home
   (.syn-pannello.mostra in index.php): ogni sotto-pagina è già nel DOM, position:absolute
   rispetto a #overlay-contenuto-dinamico (che ha dimensioni definite, non rispetto a
   .overlay-corpo-interno la cui altezza segue il contenuto), fuori dalla gabbia in basso finché
   non riceve .mostra — allora risale e ricopre quello che c'era prima, indice compreso. */
.scheda-interna-figlio {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #FFFFFF;
  border-radius: 8px;
  /* overflow:hidden, non overflow-y:auto: lo scroll vero è nel suo .overlay-corpo-interno
     interno (vedi sopra) — averlo anche qui creava un secondo scroll ridondante. */
  overflow: hidden;
  transform: translateY(100%);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.scheda-interna-figlio.mostra {
  transform: translateY(0);
}

.overlay-btn-chiudi {
  position: absolute;
  top: 20px;
  right: 24px;
  background: transparent;
  color: #16181C;
  border: 1px solid #16181C;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 20px;
  cursor: pointer;
  z-index: 3;
}

/* Tab interni alla scheda aperta — rende ogni scheda navigabile al suo interno fino alla
   chiusura, stesso sistema di overlay-iride (menu-interno-overlay/dettaglio-scheda). */
.overlay-corpo-interno {
  /* position:absolute + inset:0, non più in flusso normale (13 luglio 2026): questo è ora
     SEMPRE lo strato che scrolla davvero (sia come vista base dentro #overlay-contenuto-
     dinamico, sia annidato dentro una .scheda-interna-figlio) — vedi commento su
     #overlay-contenuto-dinamico. left:0/right:0 + max-width/margin:auto continuano a centrare
     il contenuto come prima, solo ora dentro un riquadro che scrolla in proprio invece di far
     scrollare il suo contenitore. */
  position: absolute;
  /* top 104px, non più inset:0 col vecchio padding-top:84px (13 luglio 2026, su richiesta di
     Gianni): 84px restano lo sgombero della topbar (.header-scheda-overlay, sempre sopra,
     invariato), + 20px di spazio in più prima dell'inizio di titolo/testo — ma stavolta come
     offset fisso di questo box, non come padding al suo interno: essendo qui e non nel padding,
     questo spazio non scorre via appena si scrolla il contenuto (che restava il problema col
     vecchio padding-top, tutto dentro l'area scrollabile). */
  top: 104px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 48px 90px;
  box-sizing: border-box;
}
.menu-interno-overlay {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--overlay-accent);
  padding: 14px 40px;
}
.menu-interno-overlay .voce-menu {
  background: none;
  border: none;
  color: rgba(255,255,255,.65);
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
}
.menu-interno-overlay .voce-menu.attiva {
  color: #FFFFFF;
  border-bottom-color: var(--overlay-percorso-c);
}
.dettaglio-scheda {
  display: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.dettaglio-scheda.mostra-tab { opacity: 1; }

/* ==========================================================================
   VARIANTE DI PROVA (7 luglio 2026) — non sostituisce il pannello pieno sopra,
   si attiva solo aggiungendo .contenuto-su-colore a #overlay-schermo prima
   dell'apertura. Qui lo sfondo della gabbia resta il colore pieno (terracotta,
   percorso-a portato sopra agli altri due) e solo il blocco di contenuto
   ("scheda"/card) diventa bianco, invece di tutto il pannello.
   ========================================================================== */
.overlay-schermo.contenuto-su-colore #overlay-percorso-a { z-index: 2; }
.overlay-schermo.contenuto-su-colore #overlay-contenuto-dinamico { background: transparent; }
.overlay-schermo.contenuto-su-colore .overlay-corpo-interno {
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  margin: 60px auto;
  padding: 48px 56px;
}

/* ==========================================================================
   VARIANTE DI PROVA (7 luglio 2026) — "due fasce convergenti": alto e basso si
   avvicinano e si incontrano al centro, poi il contenuto appare con una
   dissolvenza sopra. Da un'ipotesi precedente (convergenze_altre_proposte_
   transizione.html, proposta "C"). Usata come apertura su chi-siamo, come
   chiusura su persone — vedi apriFasceOrizzontali/chiudiFasceOrizzontali in
   overlay-tre-percorsi.js.
   ========================================================================== */
#overlay-fascia-alto, #overlay-fascia-basso {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--overlay-percorso-c);
  z-index: 1;
  transition: transform 1s cubic-bezier(.6,0,.3,1);
}
#overlay-fascia-alto { top: 0; transform: translateY(-100%); }
#overlay-fascia-basso { bottom: 0; transform: translateY(100%); }
.overlay-schermo.fasce-aperto #overlay-fascia-alto,
.overlay-schermo.fasce-aperto #overlay-fascia-basso {
  transform: translateY(0);
}

/* ==========================================================================
   PAGINE DINAMICHE DA DB (11 luglio 2026) — rendering generico di `pagine`/
   `blocchi` per le pagine create da admin/pagine.php, senza un file .php
   fisico scritto a mano (vedi pagina.php e .htaccess). Due layout: testo
   libero (blocchi impilati) e griglia (card, eventuale link a un dettaglio
   di livello 2 via navigaSchedaInterna, stesso meccanismo del menu-scheda). */
.pagina-dinamica-blocco { margin-bottom: 32px; }
.pagina-dinamica-blocco:last-child { margin-bottom: 0; }
/* 14 luglio 2026: titoli generici passati a Poppins regular (peso 400), su richiesta di Gianni
   — prima Fraunces/600. Non tocca l'override più specifico .pagina-dinamica-testolibero
   .pagina-dinamica-h1 più sotto, già in Poppins (ma bold/40px, scelta a parte per quel
   template). */
.pagina-dinamica-h1 {
  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 30px;
  letter-spacing: -1px; margin: 0 0 12px; color: #16181C;
}
/* h2 dei blocchi su layout landing_evento (11 luglio 2026): il titolo vero della pagina è
   già un h1 sopra (vedi pagina_dinamica_corpo in pagina.php), i blocchi restano un livello
   sotto per non avere due h1 nella stessa pagina. */
.pagina-dinamica-h2 {
  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 21px;
  letter-spacing: -.5px; margin: 0 0 10px; color: #16181C;
}
/* Lede (11 luglio 2026): sottotitolo breve subito sotto il titolo di una landing_evento,
   da `pagine.meta_descrizione` — stesso campo usato anche per i meta tag di condivisione. */
.pagina-dinamica-lede { font-size: 16px; line-height: 1.6; color: #333B44; margin: 0 0 28px; }
.pagina-dinamica-sottotitolo { font-size: 13px; color: #7A8290; margin: 0 0 12px; }
.pagina-dinamica-testo { font-family: 'Work Sans', sans-serif; font-size: 15px; line-height: 1.7; color: #333B44; }
.pagina-dinamica-testo p { margin: 0 0 1em; }
.pagina-dinamica-img-full { width: 100%; border-radius: 10px; margin-bottom: 16px; }
.pagina-dinamica-vuoto { color: #7A8290; font-size: 14px; }

/* Template pagine "testo libero" (13 luglio 2026, su indicazioni di Gianni — vedi PDF "pagine
   interne"): titolo e sottotitolo affiancati in due colonne, testo a piena larghezza sotto.
   Font Poppins, diverso da Fraunces/Work Sans del resto del sito — scelta di Gianni per questo
   template, non tocca menu/logo (serve caricare il peso 300 nel link Google Fonts della pagina
   ospite, vedi index.php/pagina.php). Scope su .pagina-dinamica-testolibero (non semplicemente
   .pagina-dinamica-blocco, condiviso anche da landing_evento) per non toccare il template della
   pagina di Calvi dell'Umbria. Niente sfondo dietro ai testi: il riquadro colorato nel PDF era
   solo un artefatto dello strumento di mockup, esplicitamente non voluto da Gianni nel template.
   La colonnina laterale sinistra (placeholder "Scrivi per inserire testo" nel PDF) resta da
   fare — decisione rimandata da Gianni. */
.pagina-dinamica-intestazione {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 40px;
}
.pagina-dinamica-testolibero .pagina-dinamica-h1 {
  font-family: 'Poppins', sans-serif;
  /* 14 luglio 2026: da 700 (bold) a 400 (regular) — Gianni ha esteso "menu e titoli in Poppins
     regular" anche ai titoli delle singole schede (sfida/dialogo/calvi), non solo ai titoli
     generici già corretti sopra. */
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -.5px;
  color: #16181C;
  text-align: right;
  margin: 0;
}
.pagina-dinamica-testolibero .pagina-dinamica-sottotitolo {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.35;
  color: #5B6472;
  margin: 0;
}
.pagina-dinamica-testolibero .pagina-dinamica-testo {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  color: #16181C;
}

/* Griglia 12 colonne (14 luglio 2026, portata qui da index.php su richiesta di Gianni — stesso
   standard indicato in CLAUDE.md, "usare sempre .grid-12 come layout di pagina"): prima volta in
   questo foglio di stile, serve alla testata del layout 'griglia' sotto.
   15 luglio 2026: completata da solo `.col-4` a tutta la serie `.col-1`…`.col-12` (stesso set già
   presente in admin/inc/layout.php per il pannello admin) — serviva il 6+6 per il nuovo layout dei
   "consigli di lettura" (immagine/testo affiancati, vedi più sotto), e CLAUDE.md ora indica questa
   griglia come punto di partenza di default per qualunque pagina, non solo per la testata
   'griglia': meglio avere subito la serie completa qui, non aggiungerla un numero alla volta. */
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; }
@media (max-width: 760px) {
  .grid-12 { grid-template-columns: 1fr; }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: span 1; }
}

/* ---- Testata del layout 'griglia' (14 luglio 2026): prima la pagina 'progetto' mostrava solo
   la griglia di card, senza nulla che la identificasse ("pagina anonima", segnalato da Gianni) —
   $titolo/$descrizioneLede esistevano già (pagina_riepilogo(), usati finora solo per i meta tag
   SEO) ma non venivano mai stampati a schermo per questo layout. Tre colonne 4+4+4: nome della
   sezione + sommario breve, immagine (da `pagina_riepilogo()['immagine']`, prima immagine tra i
   blocchi — stesso meccanismo già in uso per le card "in evidenza" della home), indice dei
   contenuti (le stesse card di prima, ridisegnate come lista compatta titolo+sottotitolo invece
   di card con foto — vedi pagina_dinamica_corpo() in pagina.php). */
.pagina-dinamica-testata { margin-bottom: 40px; align-items: start; }
.pagina-dinamica-testata-sommario { font-size: 15px; line-height: 1.6; color: #333B44; margin: 0; }
.pagina-dinamica-testata-immagine img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block;
}
/* Placeholder (14 luglio 2026): nessuna foto reale disponibile per molte pagine 'griglia' (vedi
   CLAUDE.md, "Contesto sensibile") — stesso trattamento a tinta piatta già usato per la griglia
   collage della home (.syn-collage-cella), non un'icona/testo finto al posto della foto vera. */
.pagina-dinamica-testata-immagine-vuota {
  width: 100%; aspect-ratio: 4/3; border-radius: 10px; background: #E7EAEE;
}

.pagina-dinamica-indice { display: flex; flex-direction: column; }
.pagina-dinamica-indice-voce {
  display: block; padding: 14px 0; border-top: 1px solid rgba(20,24,30,.09);
  text-decoration: none; color: inherit; cursor: default;
}
.pagina-dinamica-indice-voce:first-child { border-top: none; padding-top: 0; }
a.pagina-dinamica-indice-voce { cursor: pointer; }
a.pagina-dinamica-indice-voce:hover .pagina-dinamica-indice-titolo { color: #D6336C; }
.pagina-dinamica-indice-titolo {
  font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 15px; color: #16181C;
  margin-bottom: 4px;
}
.pagina-dinamica-indice-sottotitolo { font-size: 13px; line-height: 1.5; color: #7A8290; }

/* Sezione "Consigli di lettura" (13 luglio 2026, vedi pagina_dinamica_letture() in pagina.php e
   admin/letture.php) — mostrata in coda al corpo di qualunque pagina con righe in
   `letture_consigliate` (oggi solo 'laboratorio', layout testo_libero placeholder). Poppins
   diretto (non Fraunces/Work Sans di default + override, come invece fatto per titolo/
   sottotitolo/testo del template testo_libero): qui non esiste un wrapper a livello di PAGINA su
   cui agganciare quell'override (`.pagina-dinamica-testolibero` avvolge ogni singolo blocco, non
   l'intera pagina — questa sezione è invece un fratello dopo tutti i blocchi, non un discendente
   di nessuno di essi). Va bene finché l'unica pagina con letture è 'laboratorio' (testo_libero);
   se in futuro un'altra pagina non-testo_libero avesse letture proprie, andrebbe rivista. */
.pagina-dinamica-letture { margin-top: 44px; padding-top: 32px; border-top: 1px solid rgba(20,24,30,.09); }
.pagina-dinamica-letture-titolo-sezione { margin-bottom: 20px; font-family: 'Poppins', sans-serif; }
/* 15 luglio 2026 (Gianni: "il layout così non va" dopo aver caricato foto vere) — sostituita la
   griglia auto-fill di card verticali (pensata per copertine strette in stile libreria) con uno
   stack di recensioni a piena larghezza, ciascuna isolata in un div bianco "come i blocchi in
   home" (stesso trattamento di `.syn-card`: sfondo pieno, bordo sottile, ombra, radius 24px — qui
   riscritto in valori assoluti perché questo foglio resta autonomo, non condivide le variabili
   `--syn-card`/`--syn-shadow` definite solo dentro `<style>` di index.php/home-a-pannelli.php).
   Dentro ogni card, `.grid-12`/`.col-6` (stessa griglia, vedi sopra): immagine a sinistra, testo a
   destra — image una qualunque proporzione/dimensione di foto reale, non solo copertine strette
   3:4 come prima (causa più probabile del layout rotto: object-fit:cover ora la adatta comunque a
   un riquadro fisso, qualunque sia la foto caricata). */
.pagina-dinamica-letture-griglia { display: flex; flex-direction: column; gap: 24px; }
/* 15 luglio 2026 (bis): ogni card ridotta da 6+6 a 4+5 (9 delle 12 colonne totali, allineata a
   sinistra) per lasciare spazio, sulle restanti 3 colonne a destra, a un menu di navigazione tra
   le schede (vedi `.lettura-nav-schede` sotto) — non più a piena larghezza. */
.lettura-card {
  background: #FFFFFF;
  border: 1px solid rgba(20,24,30,.09);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 18px 46px rgba(20,24,30,.07);
  align-items: start;
  /* 15 luglio 2026 (correzione, segnalato da Gianni: "il testo non copre tutte le 5 colonne"):
     la card eredita `grid-template-columns: repeat(12, 1fr)` da `.grid-12`, ma dentro contiene
     solo col-4 (immagine) + col-5 (testo) = 9 tracce occupate su 12 definite — le 3 tracce
     rimanenti (colonne 10-12) restano comunque riservate nel calcolo dello spazio, "rubando"
     circa un quarto della larghezza della card senza che nessun elemento la occupi. Qui si
     ridefiniscono le tracce a 9 (4+5, stesso rapporto) così le due colonne si dividono per
     intero la larghezza disponibile, senza spazio vuoto a destra. */
  grid-template-columns: repeat(9, 1fr);
}
.lettura-cover { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 14px; display: block; background: #E7EAEE; }
.lettura-cover-vuota { width: 100%; aspect-ratio: 2/3; border-radius: 14px; background: #E7EAEE; }
/* Menu di navigazione tra le schede (15 luglio 2026): colonna di 3/12 a destra dell'elenco,
   ancorata (`position:sticky`, stesso pattern di `.col-N-sticky` già in uso in
   admin/inc/layout.php) così resta visibile mentre si scorre l'elenco delle recensioni sotto —
   non è nel foglio pubblico prima d'ora, aggiunta qui perché prima nessuna pagina pubblica aveva
   contenuto abbastanza lungo da giustificarla. `top` compensa l'altezza della topbar fissa di
   pagina.php (--syn-header-h, 80px lì) più un margine di respiro. */
.col-3-sticky { position: sticky; top: calc(80px + 32px); align-self: start; }
@media (max-width: 760px) { .col-3-sticky { position: static; } }
/* 15 luglio 2026 (correzione, segnalato da Gianni: "non ha nessuno stile applicato, lo stile è
   lo stesso dell'indice della pagina di apertura"): il menu va isolato in un box bianco come le
   card dei libri (stesse proprietà di `.lettura-card` sopra, riscritte qui perché quella classe
   porta con sé `grid-12`/`align-items:start` che qui non servono) e le singole voci riusano DI
   PROPOSITO le classi già esistenti dell'indice di 'progetto'/'laboratorio'
   (`.pagina-dinamica-indice-voce`/`.pagina-dinamica-indice-titolo`, vedi sopra) invece di uno
   stile nuovo — stesso look, nessuna regola duplicata da mantenere allineata nel tempo. */
.lettura-nav-scheda-box {
  background: #FFFFFF;
  border: 1px solid rgba(20,24,30,.09);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 18px 46px rgba(20,24,30,.07);
  display: block;
}
.lettura-corpo { font-family: 'Poppins', sans-serif; }
.lettura-titolo { font-weight: 700; font-size: 19px; color: #16181C; margin-bottom: 5px; }
.lettura-autore-editore { font-size: 13px; color: #7A8290; margin-bottom: 8px; }
.lettura-costo { font-size: 13px; font-weight: 600; color: #16181C; margin-bottom: 12px; }
.lettura-presentazione { font-size: 15px; font-weight: 400; line-height: 1.7; color: #333B44; margin-bottom: 14px; }
.lettura-presentazione p { margin: 0 0 .6em; }
.lettura-presentazione p:last-child { margin-bottom: 0; }
.lettura-link { display: inline-block; font-weight: 600; font-size: 13px; color: #16181C; text-decoration: none; border-bottom: 1px solid #16181C; }
.lettura-link:hover { opacity: .7; }

/* Riquadro data/luogo per pagine layout "landing_evento" (11 luglio 2026, prima landing:
   Calvi dell'Umbria) — vedi pagina_dinamica_info_evento() in pagina.php. Qui e non nello
   <style> locale di pagina.php perché il frammento overlay non porta stili propri: li eredita
   tutti da questo foglio, già caricato dalla pagina ospite (index.php/test.php). */
.pagina-dinamica-evento-info { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 24px; font-size: 13px; color: #5B6472; }
.pagina-dinamica-evento-voce { background: #E7EAEE; border-radius: 20px; padding: 6px 14px; }
/* 15 luglio 2026: variante cliccabile (link reale a public/incontro-online.php, mai un
   embed dentro questa pagina — vedi pagina_dinamica_info_evento()) — stesso badge, colore
   d'accento per segnalare che è un'azione, non solo un'informazione. */
.pagina-dinamica-evento-link-online { background: var(--syn-accent); color: #fff; font-weight: 600; text-decoration: none; }
.pagina-dinamica-evento-link-online:hover { opacity: .85; }