/* ============================================================================
   eventi.css — le iniziative: i riquadri e la scheda

   I riquadri sono quelli del disegno approvato (base-25, «Le iniziative»):
   stesse classi e stesse misure. Tutte le regole stanno sotto .iniziative o
   .ev-…: questo foglio lo caricherà anche la home, e una regola .marca o
   .foto senza niente davanti vestirebbe cose che non c'entrano.

   Una sola differenza voluta dal disegno, decisa da Simone il 25 settembre:
   la marca è una PASTIGLIA nei colori della bandiera, come nel marchio —
   verde, bianca, rossa, nell'ordine dei riquadri.
   ============================================================================ */

/* --- la sezione e la griglia ---------------------------------------------- */
.iniziative{padding:5.5rem 0;background:var(--nebbia)}
.iniziative .ini-griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.4rem;margin-top:2.4rem}
/* sulla pagina /eventi il titolo sta nella testata: la griglia parte subito */
.iniziative .dentro > .ini-griglia:first-child{margin-top:0}

/* --- il riquadro ----------------------------------------------------------- */
.iniziative .ini{background:#fff;border:1px solid var(--filo);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.iniziative .ini .foto{display:block;aspect-ratio:16/10;background:var(--nebbia-2);overflow:hidden}
.iniziative .ini .foto img{width:100%;height:100%;object-fit:cover}
.iniziative .ini .testo{padding:1.4rem 1.4rem 1.6rem;flex:1;display:flex;flex-direction:column}
.iniziative .ini h3{font-size:1.2rem;margin-bottom:.45rem}
.iniziative .ini h3 a:hover{color:#007337}
.iniziative .ini .testo > p:not(.marca){font-size:.93rem;color:var(--grigio)}
/* Il fondo del riquadro (Simone, 6 ottobre 2026): il pulsante sta in basso
   alla stessa altezza in tutti i riquadri, a sinistra; il «quando» sempre
   una riga sotto, a destra, con lo stesso margine che il pulsante ha a
   sinistra. La riga del «quando» è tenuta anche dove manca, così i pulsanti
   restano allineati fra loro. Prima la pastiglia stava accanto al pulsante
   e andava a capo solo quando non ci stava. */
.iniziative .ini .fondo{margin-top:auto;padding-top:1.2rem;display:grid;
  grid-template-rows:40px minmax(3.55rem,auto)}
/* la riga del «quando» tiene posto per due righe di scritta: con una data lunga
   che va a capo i pulsanti restano allineati lo stesso */
.iniziative .ini .testo{padding-bottom:1rem}
.iniziative .ini .fondo .bottone{justify-self:start}
.iniziative .ini .fondo .quando{justify-self:end;align-self:start;margin-top:.7rem;max-width:100%;
  text-align:right;line-height:1.4}
/* tutti i riquadri alti uguali, anche su più righe: quanto il più alto */
.iniziative .ini-griglia{grid-auto-rows:1fr}

/* il «quando»: la stessa pastiglia grigia nel riquadro e nella scheda */
.iniziative .quando,.ev-fondo .quando{font-size:.8rem;color:var(--grigio);background:var(--nebbia);
  border-radius:100px;padding:.3rem .8rem}
.ev-fondo .quando{background:var(--nebbia-2)}

/* --- la marca: la pastiglia tricolore ---------------------------------------
   Il verde NON è quello del marchio: con la scritta bianca il verde del
   marchio arriva a 3,3 a 1, e per un testo così piccolo serve almeno 4,5.
   #007337 arriva a 6 a 1 ed è lo stesso verde scuro della redazione.
   Rossa: 4,9 a 1. Bianca con la scritta blu: 17,7 a 1. Misurati il 25/9.
   .ev-anteprima è l'elenco della redazione: stessi colori, presi da qui. */
.iniziative .marca,.ev-capo .marca,.ev-anteprima .marca{display:inline-block;align-self:flex-start;
  font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.5;border-radius:100px;padding:.25rem .75rem;
  margin:0 0 .6rem;border:1px solid transparent}
.iniziative .marca.v,.ev-capo .marca.v,.ev-anteprima .marca.v{background:#007337;color:#fff}
.iniziative .marca.b,.ev-capo .marca.b,.ev-anteprima .marca.b{background:#fff;color:var(--ink);border-color:var(--filo)}
.iniziative .marca.r,.ev-capo .marca.r,.ev-anteprima .marca.r{background:var(--rosso);color:#fff}

/* --- la vista con le bozze: si vede solo con la chiave --------------------- */
.iniziative .ini.in-bozza{border-style:dashed;background:#FFFCF3}
.iniziative .ini-bozza{align-self:flex-start;font-size:.72rem;font-weight:600;background:#FFE9A8;
  color:#6B4E00;border-radius:100px;padding:.1rem .6rem;margin-bottom:.5rem}
.iniziative .ev-vuoto{color:var(--grigio);max-width:36rem}

/* --- la scheda ------------------------------------------------------------- */
.ev-capo .marca{margin-bottom:.9rem}
/* tutti i blocchi della scheda hanno la larghezza del modulo, quella di
   .dentro: e' la regola del sito, niente colonne piu' strette */
.ev-scheda{padding:var(--sp-3) 0 0}
.ev-foto{margin:0 0 var(--sp-2);border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;
  background:var(--nebbia-2)}
.ev-foto img{width:100%;height:100%;object-fit:cover}
.ev-fondo{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:var(--sp-2)}
.ev-torna{margin-top:var(--sp-2);font-size:.95rem}

/* --- la galleria ------------------------------------------------------------
   5 miniature quadrate in fila, 2 sul telefono. La fila scorre di lato
   DENTRO se stessa — la pagina non sborda — e le frecce compaiono solo se
   c'e' qualcosa da scorrere (lo decide galleria.js). */
.ev-galleria{position:relative;margin:var(--sp-2) 0 0}
.ev-gal-fila{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;border-radius:10px}
.ev-gal-fila::-webkit-scrollbar{display:none}
.ev-gal-fila:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
.ev-gal-fila ul{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * .8rem) / 5);
  gap:.8rem;list-style:none;margin:0;padding:0}
.ev-gal-fila li{scroll-snap-align:start}
.ev-gal-apri{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--nebbia-2)}
.ev-gal-apri img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.ev-gal-apri:hover img{transform:scale(1.04)}
.ev-gal-freccia{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border-radius:50%;background:#fff;border:1px solid var(--filo);color:var(--ink);font-size:1.6rem;
  line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(18,20,58,.18);display:flex;
  align-items:center;justify-content:center;padding:0 0 .15rem}
.ev-gal-freccia.prec{left:.5rem}
.ev-gal-freccia.succ{right:.5rem}
.ev-gal-freccia[hidden]{display:none}
.ev-gal-freccia:disabled{opacity:.35;cursor:default}

/* la fotografia grande, sopra la pagina */
.ev-gal-grande{border:none;padding:0;background:transparent;max-width:min(94vw,1600px);
  max-height:94vh;overflow:visible}
.ev-gal-grande::backdrop{background:rgba(18,20,58,.96)}
.ev-gal-grande img{display:block;max-width:min(94vw,1600px);max-height:82vh;width:auto;height:auto;
  margin:0 auto;border-radius:8px}
.ev-gal-sotto{display:flex;justify-content:space-between;gap:1rem;color:#fff;font-size:.9rem;
  padding:.7rem .2rem 0}
.ev-gal-conto{color:#A9AECD;white-space:nowrap}
.ev-gal-tasto{position:fixed;width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.8rem;line-height:1;display:flex;
  align-items:center;justify-content:center;padding:0 0 .15rem}
.ev-gal-tasto:hover{background:rgba(255,255,255,.28)}
.ev-gal-tasto.prec{left:1rem;top:50%;transform:translateY(-50%)}
.ev-gal-tasto.succ{right:1rem;top:50%;transform:translateY(-50%)}
.ev-gal-tasto.chiudi{right:1rem;top:1rem}
.ev-gal-tasto[hidden]{display:none}

@media(max-width:700px){
  .iniziative{padding:3.2rem 0}
  .ev-scheda{padding:var(--sp-2) 0 0}
  .ev-gal-fila ul{grid-auto-columns:calc((100% - .8rem) / 2)}
  .ev-gal-tasto.prec,.ev-gal-tasto.succ{top:auto;bottom:1rem;transform:none}
}

/* --- le altre iniziative in fondo alla scheda -------------------------------
   Gli stessi riquadri, su fondo chiaro fra il testo e il modulo. */
.ev-altre.iniziative{padding:var(--sp-3) 0}
@media(max-width:700px){.ev-altre.iniziative{padding:var(--sp-2) 0}}

/* --- il testo della scheda: gli stessi segni di Blognews e Newsletter -------
   (26 ottobre 2026) La redazione nuova permette allineamento, colore del testo
   e immagini a sinistra o a destra: qui la scheda li mostra come le altre
   pagine (notizie.css, newsletter.css). Prima questi segni sulla scheda non
   facevano niente. */
.testo-scritto{display:flow-root}
.testo-scritto .testo-centro{text-align:center}
.testo-scritto .testo-destra{text-align:right}
.testo-scritto figure{margin:1.6rem 0}
.testo-scritto figure img{margin:0;width:100%;height:auto}
.testo-scritto figcaption{font-size:.86rem;color:var(--grigio);text-align:center;margin-top:.5rem}
.testo-scritto figure.foto-sinistra{float:left;width:46%;margin:.35rem 1.6rem 1rem 0}
.testo-scritto figure.foto-destra{float:right;width:46%;margin:.35rem 0 1rem 1.6rem}
.testo-scritto figure.foto-sinistra figcaption,.testo-scritto figure.foto-destra figcaption{text-align:left}
.testo-scritto h2,.testo-scritto h3,.testo-scritto hr,.testo-scritto blockquote{clear:both}
.testo-scritto hr{border:none;border-top:1px solid var(--filo);margin:2rem 0}
.testo-scritto .colore-verde{color:#007337}
.testo-scritto .colore-oro{color:#96700F}
.testo-scritto .colore-rosso{color:#C8171A}
.testo-scritto .colore-blu{color:#1F4FBF}
@media(max-width:700px){
  .testo-scritto figure.foto-sinistra,.testo-scritto figure.foto-destra{float:none;width:auto;margin:1.4rem 0}
  .testo-scritto figure.foto-sinistra figcaption,.testo-scritto figure.foto-destra figcaption{text-align:center}
}