/* ============================================================================
   «PARTECIPA» — la geometria delle 11 sezioni del wireframe di Andrea
   R02 · 06/09/2026 (giro WP6)

   ⛔ PERCHÉ UN FILE NUOVO E NON UNA RIGA DENTRO `gastronomica-percorso.css`.
      Quel file NON è scritto a mano: `tema/costruisci-asset.sh` lo RIGENERA
      concatenando otto fogli che stanno in `sito-funzioni/pubblico`, cioè nel
      sito Node, che in questo giro è in sola lettura. `installa.sh` lancia
      `costruisci-asset.sh` a ogni installazione: qualunque riga aggiunta lì
      sparisce al primo rimontaggio, e sparirebbe in silenzio — la pagina
      resterebbe 200 e si smonterebbe soltanto. È la trappola «file corretto ≠
      file pubblicato». Questo file invece nessuno lo rigenera.
      Si carica DOPO la pila del percorso (functions.php), quindi vince a parità
      di specificità senza dover alzare nessun selettore.

   ⛔ NESSUN COLORE NUOVO, NESSUN CARATTERE NUOVO. Ogni valore qui sotto è una
      variabile già dichiarata nel :root di `gastronomica-percorso.css`
      (--carta, --carta-calda, --brace, --inchiostro, --tenue, --vino, --filo,
      --azione, --r-scheda, --r-pillola, --h-tocco). L'unico codice colore
      scritto per esteso è `#FF8A00`, ed è copiato da
      `.passo-banda--partecipa` dello stesso foglio: è il colore che la HOME
      dipinge già per la sezione Partecipa, non una scelta nuova.

   Qui c'è SOLO la disposizione: quante colonne, quanto spazio, cosa va sotto
   cosa a 390. I colori, i bottoni, i campi e la fisarmonica delle FAQ sono
   quelli del tema e non vengono ridefiniti.
   ========================================================================= */

/* ── tutto quanto sta qui dentro vive dentro <main class="ptc"> ─────────── */

/* 1 · APERTURA ──────────────────────────────────────────────────────────────
   Riusa `.passo-banda.passo-banda--partecipa`, che esiste già nel foglio del
   percorso ed era stata scritta apposta per questa pagina («ha bisogno della
   modifica M4 nel markup»: il markup è questo). Il foglio la disegna a tutta
   larghezza con `padding: 32px 0`; dentro `main.contenitore` il fondo
   arriverebbe a filo del testo, quindi qui le si dà il respiro orizzontale e
   l'angolo delle schede. Colore e tipografia restano suoi. */
.ptc-apertura{
  padding: 32px 28px 28px;
  border-radius: var(--r-scheda);
  margin-bottom: 40px;
}
.ptc-apertura p{ color: var(--brace); }        /* 5,94:1, come dichiarato là */
.ptc-apertura h1{ margin: 0 0 10px; }
.ptc-apertura .ptc-claim{
  font: 800 clamp(20px,2.2vw,28px)/1.2 "Montserrat", sans-serif;
  margin: 0 0 18px;
}
.ptc-apertura .ptc-testo{ max-width: 68ch; margin: 0 0 22px; }
.ptc-apertura .ptc-nota{ margin: 16px 0 0; font-size: 15px; max-width: 62ch; }

/* la fila dei bottoni: si avvolge da sola, nessun media query serve */
.ptc-azioni{ display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* 2 · le sezioni ────────────────────────────────────────────────────────── */
.ptc-sez{ margin: 0 0 56px; }
.ptc-sez > h2{ margin: 0 0 8px; }
.ptc-sez > .ptc-guida{ color: var(--tenue); max-width: 72ch; margin: 0 0 24px; }

/* 3 · LE SEI SCHEDE DEI PERCORSI ────────────────────────────────────────────
   Sei in fila come nel disegno (1440 → 1116 px utili dentro `.contenitore`,
   cioè ~170 px a scheda). Sotto i 1180 diventano tre, sotto gli 820 due, sotto
   i 560 una sola incolonnata: a 390 si legge una scheda per volta. */
/* 🔴 `auto-fit` e NON `repeat(6, 1fr)`. Con sei colonne fisse e quattro schede
   stampate (le altre due aspettano i dubbi 53 e 54) restavano **due colonne
   vuote a destra**: le schede si stringevano a 170 px e il bottone «Proponi un
   evento» andava a capo su tre righe. Visto nello scatto a 1440
   (`scatti/wp6-partecipa-1440.png`), non nel codice. Con `auto-fit` le tracce
   vuote si chiudono: sei schede fanno sei colonne, quattro ne fanno quattro,
   e nessuno deve ricordarsi di cambiare un numero qui quando Andrea risponde. */
.ptc-sei{ display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 16px; }
.ptc-sei > article{
  display: flex; flex-direction: column; gap: 10px;
  background: var(--carta-calda);
  border: 1px solid var(--filo);
  border-radius: var(--r-scheda);
  padding: 18px 16px 20px;
  min-width: 0;
}
.ptc-sei h3{ font-size: 17px; line-height: 1.25; margin: 0; }
.ptc-sei p{ margin: 0; font-size: 15px; }
.ptc-sei .ptc-chi{ color: var(--tenue); }
/* il bottone si incolla in fondo, così le sei pillole stanno sulla stessa
   riga anche se i testi hanno lunghezze diverse */
.ptc-sei .bottone{ margin-top: auto; align-self: flex-start; }
/* sotto i 560 una scheda per volta: `auto-fit` da solo ne terrebbe due da
   165 px, troppo strette per leggerci dentro tre righe di testo. */
@media (max-width: 560px){ .ptc-sei{ grid-template-columns: 1fr; } }

/* 5 · I NOVE FORMAT ─────────────────────────────────────────────────────────
   Fila di voci con il nome e una riga sotto. ⛔ Niente icone: non ne esistono
   di pulite in `pubblico/asset` (ci sono solo i due marker della mappa e il
   marchio), e il brief vieta di inventare illustrazioni. Resta il nome, che è
   la cosa che serve. */
.ptc-format{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; list-style: none; padding: 0; margin: 0; }
.ptc-format li{ padding: 16px 18px 16px 0; border-top: 1px solid var(--filo); min-width: 0; }
.ptc-format b{ display: block; font-size: 16px; }
.ptc-format span{ color: var(--tenue); font-size: 15px; }
@media (max-width: 900px){ .ptc-format{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .ptc-format{ grid-template-columns: 1fr; } }

/* 6 · I SEI PASSI ───────────────────────────────────────────────────────────
   Numerati, come nel disegno. Il numero è un pallino con il giallo d'azione
   solo come bordo: il giallo pieno è del bottone e non si spende qui. */
/* stessa ragione delle schede: i passi stampati sono quattro su sei, e con tre
   colonne fisse il quarto restava da solo su una riga sua. */
.ptc-passi{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px 24px; list-style: none; padding: 0; margin: 0; counter-reset: passo; }
.ptc-passi li{ min-width: 0; }
.ptc-passi li::before{
  counter-increment: passo; content: counter(passo);
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 10px;
  border: 2px solid var(--inchiostro); border-radius: var(--r-pillola);
  font: 800 16px/1 "Montserrat", sans-serif; color: var(--inchiostro);
}
.ptc-passi b{ display: block; margin-bottom: 4px; }
.ptc-passi p{ margin: 0; color: var(--tenue); font-size: 15px; }
@media (max-width: 560px){ .ptc-passi{ grid-template-columns: 1fr; } }

/* 7 · CRITERI · DATE · MODULO ───────────────────────────────────────────────
   Tre colonne a 1440. A 390 diventano una colonna sola **con il modulo per
   ultimo**: si legge prima cosa serve, poi si compila. L'ordine nel sorgente è
   già criteri → date → modulo, quindi non serve nessun `order`. */
.ptc-tre{ display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 32px; align-items: start; }
.ptc-tre > div{ min-width: 0; }
.ptc-tre h3{ margin: 0 0 14px; }
@media (max-width: 980px){ .ptc-tre{ grid-template-columns: 1fr; gap: 40px; } }

.ptc-criteri{ list-style: none; margin: 0; padding: 0; counter-reset: crit; }
.ptc-criteri li{
  counter-increment: crit; position: relative;
  padding: 12px 0 12px 34px; border-bottom: 1px solid var(--filo); font-size: 15px;
}
.ptc-criteri li::before{
  content: counter(crit) "."; position: absolute; left: 0; top: 12px;
  font: 800 15px/1.5 "Montserrat", sans-serif; color: var(--vino);
}
.ptc-date{ list-style: none; margin: 0; padding: 0; }
.ptc-date li{ padding: 12px 0; border-bottom: 1px solid var(--filo); font-size: 15px; }
.ptc-date b{ display: block; }

/* 5bis · IL COLLEGAMENTO AL PASSAPORTO nella 9ª forma (giro WP97, 18/09/2026) ─────
   Era il 2º riquadro di «Strumenti utili» (sezione tolta): stesso aspetto di allora (grassetto, niente
   sottolineatura, sottolineato al passaggio) e stesso bersaglio di tocco, 44 px sul link e non sulla voce. */
.ptc-format .ptc-format-link{
  display: flex; align-items: center; width: fit-content; min-height: 44px;
  font-size: 15px; font-weight: 700; text-decoration: none;
}
@media (hover: hover) and (pointer: fine){ .ptc-format .ptc-format-link:hover{ text-decoration: underline; } }

/* il riquadro a lato: qui è sotto le schede, a tutta larghezza */
.ptc-riquadro{
  border: 2px solid var(--inchiostro); border-radius: var(--r-scheda);
  padding: 22px 20px;
}
.ptc-riquadro h3{ margin: 0 0 8px; }
.ptc-riquadro p{ margin: 0 0 16px; max-width: 72ch; }

/* 9 · FAQ ───────────────────────────────────────────────────────────────────
   `.faq` e `.faq__v` sono già nel foglio del tema (fisarmonica <details>, zero
   JavaScript). Qui si aggiunge solo la doppia colonna del disegno. */
.ptc-faq{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.ptc-faq > .faq{ border-top: 1px solid var(--filo); }
@media (max-width: 900px){ .ptc-faq{ grid-template-columns: 1fr; } }

/* 10 · CHIUSURA ─────────────────────────────────────────────────────────── */
.ptc-chiusura{
  background: var(--carta-calda); border-radius: var(--r-scheda);
  padding: 40px 28px; text-align: center; margin-bottom: 48px;
}
.ptc-chiusura h2{ margin: 0 0 12px; }
.ptc-chiusura p{ margin: 0 auto 22px; max-width: 62ch; }
.ptc-chiusura .ptc-azioni{ justify-content: center; }
.ptc-chiusura .ptc-claim{
  font: 800 clamp(18px,2vw,24px)/1.2 "Montserrat", sans-serif;
  color: var(--vino); margin: 22px 0 0;
}

/* 11 · BANNER ALLE ALTRE SEZIONI ───────────────────────────────────────────
   Quante voci ci sono lo decide il PHP: «News» è condizionata (GLOSSARIO §2),
   quindi possono essere 4 o 5. `auto-fit` regge tutti e due i casi senza che
   nessuno debba ricordarsi di cambiare un numero qui. */
.ptc-banner{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; }
.ptc-banner a{
  display: block; padding: 20px 18px 20px 0; border-top: 1px solid var(--filo);
  text-decoration: none; color: var(--inchiostro); min-width: 0;
}
.ptc-banner b{ display: block; color: var(--vino); margin-bottom: 4px; }
.ptc-banner span{ color: var(--tenue); font-size: 15px; }
@media (hover: hover) and (pointer: fine){
  .ptc-banner a:hover b{ text-decoration: underline; }
}

/* il modulo: i campi stanno già nel foglio del tema. Qui solo l'incolonnamento
   dentro la terza colonna, che è stretta. */
.ptc-modulo .campi{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.ptc-modulo .campo{ flex: 1 1 100%; }

/* ── IL TELEFONO ────────────────────────────────────────────────────────────
   Misurato a 390 emulato, non a occhio: la banda perde il respiro laterale e
   le sezioni si stringono. Nessuna regola qui nasconde uno sbordo
   (`overflow-x:hidden` è vietato: nasconde il difetto invece di toglierlo). */
@media (max-width: 720px){
  .ptc-apertura{ padding: 24px 18px 22px; margin-bottom: 28px; }
  .ptc-sez{ margin-bottom: 40px; }
  .ptc-chiusura{ padding: 30px 18px; }
  .ptc-azioni .bottone{ width: 100%; }   /* bersaglio pieno, mai sotto 44 px */
}

.ptc-come .ptc-come-schede{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px){ .ptc-come .ptc-come-schede{ grid-template-columns: 1fr; } }
.ptc-come .ptc-azioni{ margin-top: auto; gap: 10px; }
.ptc-come .ptc-azioni .bottone{ margin-top: 0; text-align: center; }