/* ═══════════════════════════════════════════════════════════════════════════
 * LA PAGINA /passaporto · giro `pass3`, 24/09/2026
 * Caricato solo su /passaporto e /passaporto/conferma (`inc/passaporto.php`, wp_enqueue_scripts),
 * dopo `rifiniture.css`. Foglio a parte: i tre fogli grossi li rigenera `costruisci-asset.sh`.
 *
 * I DUE COLORI DEL PASSAPORTO (V1.0 §10.3): «giallo vivo ma non fluorescente» e «verde deciso».
 * Ruolo (design-dna, regola dei tre ruoli): SEGNALETICA delle due versioni, e solo quella.
 * Stanno nel filetto in alto del riquadro e nel filetto dell'esito del modulo; il TESTO resta
 * inchiostro (il giallo come testo su carta non si legge: 1,6:1). Non sono colori d'azione:
 * i bottoni restano `--azione`.
 * ═════════════════════════════════════════════════════════════════════════ */
.pagina-passaporto{ --pass-giallo:#F2C200; --pass-verde:#1E7A3C; }

.pass-versioni{
  /* dirigente 24/09 (coda R05): su tre colonne uguali i riquadri Giallo e Verde restavano con ~180 px vuoti sotto il
     testo a 1440 (li allungava i Percorsi, coi quattro bottoni in colonna). Ora le due versioni stanno in coppia e i
     Percorsi prendono la riga intera sotto, coi bottoni in fila. */
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,28px); margin:clamp(28px,3vw,48px) 0;
}
.pass-versione--percorsi{ grid-column:1 / -1; }
.pass-versione{
  min-width:0; padding:clamp(20px,2vw,28px);
  background:var(--superficie,#fff); outline:1px solid var(--riga,#e5d6c8); outline-offset:-1px;
  border-top:8px solid var(--pv-colore,var(--riga,#e5d6c8));
  display:flex; flex-direction:column; gap:12px;
}
.pass-versione--giallo{ --pv-colore:var(--pass-giallo); }
.pass-versione--verde{ --pv-colore:var(--pass-verde); }
.pass-versione--percorsi{ --pv-colore:var(--inchiostro,#26100C); }
.pass-versione h2{ margin:0; font-size:clamp(22px,2vw,30px); color:var(--inchiostro,#26100C); }
.pass-versione p{ margin:0; }

.pass-percorsi{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.pass-percorso{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  border-left:6px solid var(--perc-colore,#8A5A46);
  outline:1px solid var(--riga,#e5d6c8); outline-offset:-1px;
  color:var(--inchiostro,#26100C); text-decoration:none; font-weight:600;
}
.pass-percorso:focus-visible{ outline:3px solid var(--azione); outline-offset:2px; }
@media (hover:hover) and (pointer:fine){ .pass-percorso:hover{ text-decoration:underline; } }
/* Il colore di .pass-percorso--slug lo stampa il plugin (rl4, inc/evento.php, blocco gastro-percorsi-colori). */

.pass-attiva{ max-width:820px; margin:0 auto clamp(40px,4vw,72px); scroll-margin-top:96px; }
.pass-attiva .modulo-dati{ margin:0 auto; }   /* scatto 1440 del 24/09: il modulo (max 560) stava a sinistra nella colonna da 820 */
.pass-attiva .modulo-dati h2{ margin-top:0; }
.pass-attiva > .esito{ max-width:560px; margin-left:auto; margin-right:auto; }
.pass-attiva__sotto{ margin:0 0 16px; }

/* L'esito col colore del Passaporto: stesso riquadro verde «ok», col filetto della sua versione. */
.pagina-passaporto .esito--giallo{ border-left:8px solid var(--pass-giallo); }
.pagina-passaporto .esito--verde{ border-left:8px solid var(--pass-verde); }

@media (max-width:900px){
  .pass-versioni{ grid-template-columns:minmax(0,1fr); }
}

/* Ritocchi del capo 24/09: il blocco per chi non ha ancora il Passaporto, fra i riquadri e il modulo.
   Secondo ritocco (12:0x): titoletto + testo + bottone, allineati a sinistra come i riquadri sopra. */
.pass-senza{ margin:0 0 clamp(28px,3vw,44px); max-width:68ch; }
.pass-senza__titolo{ margin:0 0 8px; font-size:clamp(20px,1.6vw,24px); color:var(--inchiostro,#26100C); }
.pass-senza p{ margin:0 0 16px; }

/* Secondo ritocco 24/09 · il prezzo sotto il testo del riquadro giallo e verde (solo se scritto nel pannello). */
.pass-versione__costo{ font-weight:600; }

/* Secondo ritocco del capo 24/09 (scatto a ~2000 px: «troppo spazio vuoto lateralmente»). Da 1000 px la sezione è larga
   come i riquadri e il modulo va in due colonne: titolo e sottotitolo a sinistra, campi a destra. La colonna dei campi resta
   larga 512 px, cioè quanto dentro il modulo di prima (560 - 2×24): i campi da 170 px stanno ancora due per riga.
   L'esito dopo l'invio resta sopra, largo quanto il modulo. */
@media (min-width:1000px){
  .pass-attiva{ max-width:none; }
  .pass-attiva .modulo-dati{
    max-width:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,512px);
    column-gap:clamp(32px,4vw,64px); row-gap:15px; align-items:start;
    padding-left:0; padding-right:0;   /* il modulo non ha bordo e ha il fondo della pagina: così il titolo sta in fila coi riquadri */
  }
  /* row-gap 15 = il `gap` del modulo in colonna (flex, misurato): le regole `margin-top:-15px` delle caselle in
     rifiniture.css danno le stesse distanze di prima. La testa occupa le prime DUE righe (campi e casella della privacy,
     che ci sono sempre): con più righe, quelle vuote aggiungerebbero 15 px ciascuna in fondo al modulo. */
  .pass-attiva .modulo-dati > *{ grid-column:2; }
  .pass-attiva .modulo-dati > .pass-attiva__testa{ grid-column:1; grid-row:1 / span 2; }
  .pass-attiva > .esito{ max-width:none; }
}

/* Dirigente 24/09 12:2x: dopo un'attivazione riuscita, al posto del modulo, il bottone per prenotare. */
.pass-dopo{ margin:clamp(16px,2vw,24px) 0 0; }

/* ═══════════════════════════════════════════════════════════════════════════
 * V1 L5, 24/09/2026 · IL PASSAPORTO DI UN MINORE (V1.0 §8, colonna «Minore»). Tutto questo esiste in pagina solo con
 * l'interruttore «minori_passaporto» acceso; spento, nessuna di queste classi è nel modulo.
 * Senza JavaScript: la casella «per un minore» (#pminore) scambia le etichette e mostra i due campi del genitore con `:has`.
 * Senza `:has` (browser vecchi) i campi del genitore restano SEMPRE visibili e le etichette sono quelle dell'adulto:
 * il modulo resta usabile, il motore decide comunque dal valore della casella.
 * ═════════════════════════════════════════════════════════════════════════ */
.pass-eti-minore{ display:none; }
/* la casella sta dentro un `.campo`: `.campo label` (maiuscolo 12 px) batterebbe `.spunta`. Qui torna una spunta come le altre. */
.modulo-dati .pass-minore label.spunta{
  font:400 15px/1.35 "Montserrat", sans-serif; letter-spacing:0; text-transform:none;
  color:var(--inchiostro,#26100C); min-height:44px; align-items:center;
}
.pass-minore .meta{ margin:0; }
@supports selector(:has(*)){
  .modulo-dati:not(:has(#pminore:checked)) .pass-genitore{ display:none; }
  .modulo-dati:has(#pminore:checked) .pass-eti-adulto{ display:none; }
  .modulo-dati:has(#pminore:checked) .pass-eti-minore{ display:inline; }
}

/* V1 L5 · il collegamento all'area personale sotto un esito riuscito (solo con l'area accesa). */
.esito .esito__area{ display:inline-block; margin-top:8px; font-weight:600; color:inherit; text-decoration:underline; min-height:24px; }

/* O2-A, 24/09/2026 · i claim della V1.0 §11.1 (testi dal pannello, vuoti = non compaiono).
   Sopra i riquadri: una riga di voce, inchiostro, senza colore d'azione. Nel verde: in fondo al riquadro, solo col Carnet acceso.
   In chiusura: titolo e riga centrati, dopo il modulo. */
.pass-claim{ margin:clamp(28px,3vw,48px) 0 0; max-width:60ch; text-wrap:balance; font-size:clamp(20px,1.8vw,26px); line-height:1.3; font-weight:600; color:var(--inchiostro,#26100C); }
.pass-claim + .pass-versioni{ margin-top:clamp(16px,2vw,24px); }
.pass-versione__claim{ margin-top:auto !important; padding-top:4px; font-weight:600; }
.pass-chiusura{ max-width:62ch; margin:0 auto clamp(40px,4vw,72px); text-align:center; }
.pass-chiusura h2{ margin:0 0 8px; font-size:clamp(22px,2vw,30px); color:var(--inchiostro,#26100C); }
.pass-chiusura p{ margin:0; }

/* ── RL12 · 24/09/2026 · V1.0 r.323-324 «Pattern discreti ispirati a timbri, mappe, percorsi, segni del territorio».
   Motivo 1 (timbri e annulli) scelto dal capo alle 17:2x fra le anteprime del R01. Tratto bianco al 15% cotto nel file
   motivi/timbri-testata.svg: contrasto del titolo sopra 6,79:1 con un tratto, 4,86:1 dove due tratti si incrociano
   (strumenti/contrasto-motivi-2409.py). Il carattere resta Montserrat (capo 16:59: «lo stesso stile di tutte le pagine»). */
.banda.banda--testata{ background-image:url(motivi/timbri-testata.svg); background-repeat:repeat; background-size:340px 340px; background-position:right -40px top -30px; }

/* ── cap1 · 24/09/2026 17:4x · ordine del capo sullo scatto di /passaporto («queste sezioni mettile in orizzontale ben
   organizzate: lo spazio a sinistra vuoto è inguardabile», più via le tre righe di aiuto sotto anno, città e CAP).
   Da 1000 px: titolo e sottotitolo sopra, a tutta larghezza; i campi in una griglia di 4 colonne che riempie ogni riga:
   Codice (2) + casella del minore (2) · genitore nome (2) + cognome (2) · Nome (2) + Cognome (2) · Email (2) + Cellulare + Anno ·
   Città + CAP + Chi sei (2). Senza la casella del minore (interruttore spento) il Codice prende la riga intera.
   Sotto i 1000 px non cambia niente. Le righe di aiuto vuote non lasciano spazio. */
.pass-attiva .campo .meta:empty{ display:none; }
@media (min-width:1000px){
  .pass-attiva .modulo-dati{ display:block; }
  .pass-attiva .modulo-dati > .pass-attiva__testa{ max-width:none; margin:0 0 20px; }
  .pass-attiva .modulo-dati > .pass-attiva__testa h2{ margin-top:0; }
  .pass-attiva .modulo-dati .campi{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px 24px; align-items:start; }
  .pass-attiva .campi > .campo{ min-width:0; }
  .pass-attiva .campi > .campo:first-child{ grid-column:span 2; }
  .pass-attiva .campi:not(:has(.pass-minore)) > .campo:first-child{ grid-column:1 / -1; }
  .pass-attiva .campi:not(:has(.pass-minore)) > .campo:first-child input{ max-width:512px; }
  .pass-attiva .campi > .pass-minore{ grid-column:span 2; }
  .pass-attiva .campi > .pass-genitore{ grid-column:span 2; }
  .pass-attiva .campi > .campo:has(#pn), .pass-attiva .campi > .campo:has(#pc),
  .pass-attiva .campi > .campo:has(#pe), .pass-attiva .campi > .campo:has(#pp){ grid-column:span 2; }
  .pass-attiva .modulo-dati > .spunta, .pass-attiva .modulo-dati > .gastro-antispam{ max-width:820px; }
}