/* =========================================================================
   Passeggiata in Rosa — site.css
   Stili delle pagine pubbliche. Dipende da base.css: qui non si inventano
   colori o spaziature, si usano solo le variabili del design system.

   Priorita' di progetto: mobile-first, e la CTA di pre-iscrizione sempre
   raggiungibile col pollice. Il pubblico apre il link da WhatsApp sullo
   smartphone, quindi ogni scelta parte da li'.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. INTESTAZIONE
   ------------------------------------------------------------------------- */

.intestazione {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transizione), box-shadow var(--transizione);
}

.intestazione--staccata {
  border-bottom-color: var(--bordo);
  box-shadow: var(--ombra-1);
}

/* L'altezza della testata e' fissa e dichiarata: l'hero la sottrae da 100svh,
   altrimenti sfora di quel tanto e su mobile l'indicatore "scorri" finisce
   sotto la piega. Logo dimensionato in altezza, non in larghezza, cosi' la
   barra non cambia mai misura. */
:root { --testata-h: 61px; }

.intestazione > .contenitore {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 44px;
  padding-block: var(--sp-2);
}

.intestazione__logo { flex: none; line-height: 0; }
.intestazione__logo img { height: 44px; width: auto; }

.navigazione { display: none; margin-left: auto; }

.navigazione ul {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  list-style: none;
  padding: 0;
}

.navigazione a {
  position: relative;
  display: block;
  color: var(--testo);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 550;
  padding-block: var(--sp-2);
}

.navigazione a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--rosa);
  transform: scaleX(0);
  transition: transform var(--transizione);
}

.navigazione a:hover { color: var(--rosa-testo); }
.navigazione a:hover::after { transform: scaleX(1); }

/* Sotto i 920px l'azione resta, le ancore no: sono nella barra in basso e
   nello scorrimento. Niente menu a panino da aprire con una mano sola. */
.intestazione__azione { margin-left: auto; flex: none; }
.navigazione + .intestazione__azione { margin-left: var(--sp-5); }

/* La CTA in alto serve solo da desktop: su mobile c'e' la barra in basso,
   piu' comoda e sempre sotto il pollice. */
.intestazione__azione { display: none; }

@media (min-width: 920px) {
  :root { --testata-h: 73px; }
  .navigazione { display: block; }
  .intestazione__azione { display: block; }
  .intestazione__logo img { height: 56px; }
  .intestazione > .contenitore { min-height: 56px; }
}


/* -------------------------------------------------------------------------
   1b. MENU MOBILE — overlay a tutta pagina
   Costruito su <dialog>, come la lightbox: top layer, trappola del fuoco e
   inertizzazione della pagina le mette il browser.
   Il bottone compare solo se JavaScript e <dialog> ci sono davvero: un
   bottone che non apre niente sarebbe peggio di nessun bottone.
   ------------------------------------------------------------------------- */

.menu-bottone { display: none; }

.js-menu .menu-bottone {
  display: grid;
  place-content: center;
  gap: 5px;
  margin-left: auto;
  flex: none;
  /* 48x48: bersaglio comodo anche con una mano sola. */
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--bordo);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--transizione), background var(--transizione);
}

.js-menu .menu-bottone:hover { border-color: var(--rosa); background: var(--rosa-velo); }

.menu-bottone span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--testo);
}

@media (min-width: 920px) {
  .js-menu .menu-bottone { display: none; }
}

dialog.menu {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--sfondo);
  color: var(--testo);
}

dialog.menu::backdrop { background: rgba(107, 18, 52, 0.55); }

dialog.menu[open] {
  display: flex;
  flex-direction: column;
}

.menu__testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--testata-h);
  padding-inline: var(--margine-pagina);
  border-bottom: 1px solid var(--bordo);
}

.menu__testata img { height: 44px; width: auto; }

.menu__chiudi {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  border: 1px solid var(--bordo);
  background: #fff;
  color: var(--testo);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.menu__chiudi:hover { border-color: var(--rosa); background: var(--rosa-velo); color: var(--rosa-testo); }

.menu__voci {
  flex: 1;
  align-content: start;
  display: grid;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: var(--sp-5) var(--margine-pagina);
  overflow-y: auto;
}

/* Voci grandi e ben distanziate: il pubblico e' soprattutto over 50 che
   legge dal telefono. */
.menu__voci a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-family: var(--font-titoli);
  font-size: var(--t-xl);
  font-weight: 600;
  font-variation-settings: 'opsz' 48, 'SOFT' 40;
  color: var(--testo);
  text-decoration: none;
  border-bottom: 1px solid var(--bordo);
  transition: background var(--transizione), color var(--transizione);
}

.menu__voci li:last-child a { border-bottom: 0; }

.menu__voci a:hover,
.menu__voci a:focus-visible {
  background: var(--rosa-velo);
  color: var(--rosa-testo);
}

.menu__piede {
  padding: var(--sp-4) var(--margine-pagina);
  padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bordo);
  background: var(--rosa-velo);
}

.menu__piede .btn { width: 100%; }

.menu__piede p {
  margin-top: var(--sp-3);
  text-align: center;
  font-size: var(--t-sm);
  color: var(--testo-tenue);
}

/* -------------------------------------------------------------------------
   2. BARRA CTA IN BASSO (mobile)
   L'elemento piu' importante della pagina per questo pubblico.
   ------------------------------------------------------------------------- */

.barra-pollice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--bordo);
  box-shadow: 0 -6px 24px rgba(59, 42, 50, 0.1);
  transform: translateY(110%);
  transition: transform 260ms cubic-bezier(0.2, 0, 0.2, 1);
}

.barra-pollice--visibile { transform: translateY(0); }

.barra-pollice .btn {
  width: 100%;
  padding-block: 1em;
  font-size: var(--t-lg);
}

.barra-pollice__nota {
  display: block;
  text-align: center;
  margin-top: var(--sp-2);
  font-size: var(--t-xs);
  color: var(--testo-tenue);
}

/* Lo spazio in fondo evita che la barra copra il piede. */
body.con-barra-pollice { padding-bottom: 112px; }

@media (min-width: 920px) {
  .barra-pollice { display: none; }
  body.con-barra-pollice { padding-bottom: 0; }
}

/* -------------------------------------------------------------------------
   3. HERO
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* Altezza dello schermo MENO la testata sticky, che sta sopra nel flusso.
     Uso svh, cioe' l'altezza con le barre del browser visibili: e' la piu'
     piccola, quindi quel che ci sta dentro ci sta sempre. Con dvh l'hero
     crescerebbe quando le barre si ritraggono, e l'indicatore tornerebbe
     sotto la piega. Il valore di --testata-h lo misura sito.js sul vero
     ingombro della testata, invece di fidarsi di una costante. */
  min-height: calc(100svh - var(--testata-h));
  display: grid;
  /* Due righe: i contenuti al centro, l'indicatore in fondo. Prima era in
     posizione assoluta e, se i contenuti crescevano, finiva tagliato. */
  grid-template-rows: 1fr auto;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--sp-5) var(--sp-4);
  background: var(--scuro);
  text-align: center;
}

.hero__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* Il <picture> deve riempire il contenitore, altrimenti l'altezza al 100%
   dell'immagine si calcola su un'altezza automatica e non ha effetto: la
   foto si ferma al proprio rettangolo 4:3 e sotto resta il fondo pieno. */
.hero__foto picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Taglio spostato in basso: il gruppo alla partenza e la facciata della
     chiesa devono restare in campo anche sui desktop larghi e bassi, dove
     il ritaglio verticale e' piu' aggressivo. */
  object-position: 50% 72%;
}

/* Zoom lentissimo: da' vita alla fotografia senza distrarre. */
@media (prefers-reduced-motion: no-preference) {
  .hero__foto img {
    animation: respiro 26s ease-in-out infinite alternate;
    transform-origin: center 40%;
  }
}

@keyframes respiro {
  from { transform: scale(1); }
  to { transform: scale(1.09); }
}

/* Velo: rosa in alto, prugna in basso. Regge il contrasto del testo bianco
   qualunque cosa ci sia nella fotografia. */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Tre strati, dal piu' vicino a chi guarda al piu' lontano:
     1. scrim morbido dietro la colonna dei contenuti, per la leggibilita';
     2. leggera chiusura verso il basso, dove stanno testo e bottoni;
     3. velo rosa uniforme su tutta la foto, che scalda e uniforma. */
  background:
    radial-gradient(ellipse 76% 60% at 50% 48%,
      rgba(107, 18, 52, 0.42) 0%,
      rgba(107, 18, 52, 0.22) 55%,
      rgba(59, 42, 50, 0) 82%),
    linear-gradient(180deg,
      rgba(59, 42, 50, 0.08) 0%,
      rgba(59, 42, 50, 0.14) 55%,
      rgba(107, 18, 52, 0.38) 100%),
    rgba(237, 110, 167, 0.34);
}

.hero__contenuto {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-5);
  color: #fff;
}

/* Il logo e' raster e a colori: sotto ci va uno scrim chiaro morbido, cosi'
   il marchio resta fedele invece di essere ricolorato o messo in negativo. */
.hero__marchio {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--sp-5) var(--sp-6);
}

.hero__marchio::before {
  content: '';
  position: absolute;
  inset: -22% -18%;
  z-index: 0;
  /* Alone ampio e con caduta lunga: deve leggersi come luce, non come una
     macchia bianca incollata sopra la fotografia. */
  background: radial-gradient(ellipse 58% 54% at 50% 48%,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.88) 34%,
    rgba(255, 255, 255, 0.70) 52%,
    rgba(255, 255, 255, 0.38) 66%,
    rgba(255, 255, 255, 0.12) 79%,
    rgba(255, 255, 255, 0) 92%);
  filter: blur(14px);
}

.hero__marchio img {
  position: relative;
  z-index: 1;
  /* Piu contenuto di prima: il logo non deve occupare mezza schermata.
     Le sorgenti arrivano a 1800px, quindi resta nitido anche su retina. */
  width: min(320px, 62vw);
  height: auto;
}

/* Schermi bassi (telefoni piccoli, orizzontale): si stringe il logo e le
   spaziature, cosi' contenuti e indicatore restano dentro una schermata. */
@media (max-height: 720px) {
  .hero__marchio img { width: min(240px, 52vw); }
  .hero__marchio { padding-block: var(--sp-3); }
  .hero__contenuto { gap: var(--sp-4); }
}

.hero__riga {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--t-lg);
  font-weight: 650;
  text-shadow: 0 1px 12px rgba(107, 18, 52, 0.55);
}

.hero__riga svg { width: 1.1em; height: 1.1em; fill: var(--rosa); flex: none; }

.hero__luogo {
  font-size: var(--t-base);
  font-weight: 500;
  color: #f3e2ea;
  text-shadow: 0 1px 10px rgba(107, 18, 52, 0.6);
}

.hero__causa {
  max-width: 34ch;
  font-size: var(--t-base);
  color: #f6eef2;
  text-shadow: 0 1px 10px rgba(107, 18, 52, 0.6);
  text-wrap: pretty;
}

.hero__causa strong { color: #fff; }

.hero__azioni {
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  width: min(340px, 82vw);
  margin-top: var(--sp-2);
}

.hero__azioni .btn { width: 100%; }

@media (min-width: 640px) {
  .hero__azioni { display: flex; width: auto; }
  .hero__azioni .btn { width: auto; }
}

.hero__scopri {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 2px;
}
.hero__scopri:hover { color: #fff; border-bottom-color: #fff; }

/* Indicatore "scorri": sta nella seconda riga della griglia dell'hero, non
   in posizione assoluta, cosi' non puo' finire fuori dall'area visibile. */
.hero__scorri {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  color: #fff;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.9;
}

.hero__scorri span { text-shadow: 0 1px 8px rgba(107, 18, 52, 0.7); }

.hero__scorri i {
  display: block;
  width: 13px;
  height: 13px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__scorri i { animation: scendi 1.8s ease-in-out infinite; }
}

@keyframes scendi {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
  50% { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* -------------------------------------------------------------------------
   4. RIVELAZIONE ALLO SCORRIMENTO
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  [data-rivela] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 620ms cubic-bezier(0.2, 0, 0.2, 1),
                transform 620ms cubic-bezier(0.2, 0, 0.2, 1);
    transition-delay: var(--ritardo, 0ms);
  }
  [data-rivela].e-visibile { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   5. SEZIONI E RITMO
   ------------------------------------------------------------------------- */

.sezione__intestazione {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
  max-width: var(--larghezza-testo);
}

.sezione--centrata .sezione__intestazione {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.griglia { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }

@media (min-width: 640px) { .griglia--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .griglia--3 { grid-template-columns: repeat(3, 1fr); } }

/* Separatore: la strada che passa da una sezione all'altra. */
.divisorio-strada { line-height: 0; margin-bottom: -1px; }
.divisorio-strada--sopra { margin-top: -1px; margin-bottom: 0; transform: scaleY(-1); }

.scheda-info {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--ombra-1);
  transition: box-shadow var(--transizione), transform var(--transizione);
}

.scheda-info:hover { box-shadow: var(--ombra-2); transform: translateY(-3px); }

.scheda-info h3 {
  font-size: var(--t-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.scheda-info__icona {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--rosa-tenue);
  color: var(--rosa-testo);
  fill: currentColor;
}

.dato-grande {
  font-family: var(--font-titoli);
  font-size: var(--t-2xl);
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
  line-height: 1.1;
  color: var(--rosa-testo);
}

.orario { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--testo); }

/* -------------------------------------------------------------------------
   6. FOTOGRAFIE — trattamento comune
   Angoli morbidi, ombra gentile, un filo di rosa come cornice. Nessun
   duotone: i volti e i sorrisi restano quelli veri.
   ------------------------------------------------------------------------- */

.foto {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--ombra-2);
  background: var(--rosa-velo);
  line-height: 0;
}

.foto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(237, 110, 167, 0.45);
  pointer-events: none;
}

.foto img { width: 100%; height: 100%; object-fit: cover; }

.foto--alta img { aspect-ratio: 3 / 4; }
.foto--larga img { aspect-ratio: 4 / 3; }

/* -------------------------------------------------------------------------
   7. BANDA NUMERI
   ------------------------------------------------------------------------- */

.numeri {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--sp-9);
  color: #fff;
  text-align: center;
  background: var(--scuro);
}

.numeri__foto { position: absolute; inset: 0; z-index: -2; }
/* Stesso motivo dell'hero: senza questa riga l'altezza al 100% non ha
   appiglio e la foto si ferma al proprio rettangolo. */
.numeri__foto picture { display: block; width: 100%; height: 100%; }
.numeri__foto img { width: 100%; height: 100%; object-fit: cover; }

.numeri__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(107, 18, 52, 0.93) 0%, rgba(107, 18, 52, 0.86) 100%),
    linear-gradient(90deg, rgba(191, 34, 104, 0.34) 0%, rgba(59, 42, 50, 0) 60%);
}

.numeri h2 { color: #fff; }
.numeri .occhiello { color: var(--rosa-chiaro); }

.griglia-numeri {
  display: grid;
  gap: var(--sp-6) var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--sp-7);
}

@media (min-width: 860px) { .griglia-numeri { grid-template-columns: repeat(4, 1fr); } }

.numero { display: grid; gap: var(--sp-2); justify-items: center; }

/* Il qualificatore ("oltre", "quasi") sta su una riga sua: se resta in linea
   col numero, su due colonne a 390px l'unita' va a capo da sola. */
.numero__pre {
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e3ccd6;
}

.numero__cifra {
  font-family: var(--font-titoli);
  font-size: clamp(2.1rem, 1.2rem + 4vw, 3.7rem);
  font-variation-settings: 'opsz' 144, 'SOFT' 55;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.numero__cifra small { font-size: 0.46em; font-weight: 600; margin-left: 0.06em; }

.numero__voce {
  font-size: var(--t-sm);
  color: #e3ccd6;
  max-width: 20ch;
  line-height: 1.4;
}

.numero__filo { width: 46px; height: 3px; border-radius: 3px; background: var(--rosa); }

/* -------------------------------------------------------------------------
   8. COME ISCRIVERSI
   ------------------------------------------------------------------------- */

.via {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  box-shadow: var(--ombra-1);
}

.via--consigliata { border-color: var(--rosa); box-shadow: var(--ombra-2); }

.via__targa {
  position: absolute;
  top: calc(var(--sp-4) * -1);
  left: var(--sp-5);
  padding: 0.35em 0.9em;
  border-radius: var(--r-pill);
  background: var(--rosa-testo);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.scadenza {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45em 0.95em;
  border-radius: var(--r-pill);
  background: var(--rosa-tenue);
  color: var(--rosa-scuro);
  font-size: var(--t-sm);
  font-weight: 600;
}

.scadenza svg { width: 1.05em; height: 1.05em; fill: currentColor; }

/* -------------------------------------------------------------------------
   9. MAPPA
   ------------------------------------------------------------------------- */

.mappa {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--bordo);
  box-shadow: var(--ombra-1);
  background: var(--sfondo-alt);
}

.mappa iframe { display: block; width: 100%; height: 320px; border: 0; }

.mappa__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4);
  background: #fff;
  border-top: 1px solid var(--bordo);
}

/* -------------------------------------------------------------------------
   10. LINEA DEL TEMPO — la strada come filo della storia
   ------------------------------------------------------------------------- */

.storia { position: relative; display: grid; gap: var(--sp-6); }

/* L'asfalto verticale con la segnaletica: e' il motivo del logo che diventa
   linea del tempo. */
.storia::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 6px;
  bottom: 6px;
  width: 16px;
  border-radius: var(--r-pill);
  background:
    repeating-linear-gradient(to bottom, #fff 0 14px, transparent 14px 30px) center / 3px 100% no-repeat,
    var(--grigio);
}

.tappa {
  position: relative;
  padding-left: 68px;
}

.tappa__bollo {
  position: absolute;
  left: 0;
  top: 2px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: #fff;
  border: 3px solid var(--rosa);
  box-shadow: var(--ombra-1);
  font-family: var(--font-titoli);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--rosa-testo);
  font-variant-numeric: tabular-nums;
}

.tappa__bollo svg { width: 22px; height: 22px; fill: var(--rosa); }

.tappa h3 { font-size: var(--t-lg); margin-bottom: var(--sp-2); }
.tappa p { color: var(--testo-tenue); }

.tappa .foto { margin-top: var(--sp-4); max-width: 460px; }

@media (min-width: 780px) {
  .storia::before { left: 50%; transform: translateX(-50%); }
  .tappa { width: 50%; padding-left: 0; padding-right: var(--sp-7); text-align: right; }
  .tappa .foto { margin-left: auto; }
  .tappa__bollo { left: auto; right: -25px; }
  .tappa:nth-child(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: var(--sp-7);
    text-align: left;
  }
  .tappa:nth-child(even) .foto { margin-left: 0; }
  .tappa:nth-child(even) .tappa__bollo { right: auto; left: -25px; }
}

/* -------------------------------------------------------------------------
   11. GALLERIA
   ------------------------------------------------------------------------- */

.galleria {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 720px) { .galleria { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }

.galleria__voce {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--r-md);
  overflow: hidden;
  line-height: 0;
  box-shadow: var(--ombra-1);
  transition: transform var(--transizione), box-shadow var(--transizione);
}

.galleria__voce img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Tinta rosa solo al passaggio del mouse: i volti restano naturali. */
.galleria__voce::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(237, 110, 167, 0) 40%, rgba(191, 34, 104, 0.32) 100%);
  opacity: 0;
  transition: opacity var(--transizione);
}

.galleria__voce:hover { transform: translateY(-4px); box-shadow: var(--ombra-2); }
.galleria__voce:hover img { transform: scale(1.06); }
.galleria__voce:hover::after { opacity: 1; }

/* -------------------------------------------------------------------------
   12. LIGHTBOX — <dialog> nativo
   Sta nel top layer, quindi non puo' essere tagliata da overflow o transform
   degli antenati. Backdrop, Esc e trappola del fuoco li mette il browser:
   qui si definisce solo l'aspetto.
   ------------------------------------------------------------------------- */

dialog.lente {
  /* Azzero gli stili di sistema del dialog: bordo, sfondo e spaziatura. */
  border: 0;
  padding: 0;
  background: transparent;
  color: #f6eef2;
  max-width: min(92vw, 1100px);
  max-height: 90dvh;
  overflow: visible;
  /* Centratura su entrambi gli assi. Lo stile di sistema centra il dialog
     solo in orizzontale: senza inset a zero il margine automatico non ha
     spazio verticale su cui lavorare e il riquadro si incolla in alto. */
  inset: 0;
  margin: auto;
}

dialog.lente::backdrop {
  background: rgba(74, 12, 36, 0.92);
  backdrop-filter: blur(6px);
}

dialog.lente[open] {
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
}

/* Pannello attorno all'immagine: serve a dare alla X un angolo suo, sul
   margine, invece che sopra il logo. Vale per qualunque proporzione, perche'
   lo spazio in alto e' riservato dal padding e non dipende dall'immagine. */
.lente__telaio {
  position: relative;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
  justify-items: center;
  padding: 56px var(--sp-5) var(--sp-5);
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--ombra-3);
  max-width: min(92vw, 1100px);
}

/* L'immagine non viene mai tagliata: si adatta al lato piu' stretto e
   mantiene le proporzioni. dvh e non svh, cosi' non sfora mai l'area
   davvero visibile sui telefoni con le barre del browser. */
.lente__img {
  display: block;
  max-width: 100%;
  /* Il pannello aggiunge circa 100px fra spazio per la X e margini: l'altezza
     dell'immagine li tiene in conto, cosi' l'insieme resta dentro lo schermo. */
  max-height: min(70dvh, 760px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
}

.lente__didascalia {
  margin: 0;
  max-width: 46ch;
  font-size: var(--t-sm);
  text-align: center;
  color: var(--testo-tenue);
}

/* Nell'angolo del pannello, sul margine bianco: non copre mai l'immagine,
   qualunque siano le sue proporzioni. */
.lente__chiudi {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  /* 44x44: area di tocco piena anche se il segno grafico e' piccolo. */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--bordo);
  background: #fff;
  color: var(--testo);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione),
    border-color var(--transizione);
}

.lente__chiudi:hover {
  background: var(--rosa);
  color: var(--scuro);
  border-color: var(--rosa);
}

@media (prefers-reduced-motion: no-preference) {
  dialog.lente[open] { animation: lente-entra 200ms cubic-bezier(0.2, 0, 0.2, 1); }
  dialog.lente[open]::backdrop { animation: lente-velo 200ms ease; }
}

@keyframes lente-entra {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes lente-velo {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* -------------------------------------------------------------------------
   13. SPONSOR
   ------------------------------------------------------------------------- */

.livello-sponsor + .livello-sponsor { margin-top: var(--sp-7); }

.livello-sponsor__titolo {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  font-family: var(--font-testo);
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.livello-sponsor__titolo::after { content: ''; flex: 1; height: 1px; background: var(--bordo); }

.griglia-sponsor {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}

.griglia-sponsor--main { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }

.tessera-sponsor {
  display: grid;
  /* Le tessere sono link all immagine piena: senza JavaScript restano
     navigabili, ma non devono sembrare testo sottolineato. */
  text-decoration: none;
  color: inherit;
  place-items: center;
  padding: var(--sp-4);
  min-height: 96px;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--r-md);
  cursor: zoom-in;
  transition: border-color var(--transizione), box-shadow var(--transizione), transform var(--transizione);
}

.griglia-sponsor--main .tessera-sponsor { min-height: 124px; }

/* Il <picture> riempie la tessera mentre l'immagine, limitata in altezza,
   e' piu' stretta: dentro un <button> il testo veniva centrato dallo stile
   di sistema, dentro un <a> no. Qui la centratura la mette il <picture>. */
.tessera-sponsor picture {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.tessera-sponsor img { max-width: 100%; max-height: 76px; width: auto; object-fit: contain; }
.griglia-sponsor--main .tessera-sponsor img { max-height: 100px; }

.tessera-sponsor:hover {
  border-color: var(--rosa);
  box-shadow: var(--ombra-2);
  transform: translateY(-3px);
}

.teaser-sponsor {
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
  text-align: center;
}

.nastro-loghi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

.nastro-loghi .tessera-sponsor { cursor: default; width: 132px; min-height: 84px; }
.nastro-loghi .tessera-sponsor:hover { transform: none; border-color: var(--bordo); box-shadow: none; }
.nastro-loghi img { max-height: 56px; }


/* -------------------------------------------------------------------------
   MARCHIO CON DIDASCALIA
   Usato per organizzatori, patrocini e associazioni. I file di partenza sono
   disomogenei: chi ha solo lo stemma, chi ha gia' la scritta, chi e' quadrato
   e chi orizzontale. La coerenza non la puo' dare il file, quindi la danno la
   piastrella (area identica per tutti, logo contenuto e centrato) e il nome
   scritto sotto.
   Non si usa nelle griglie sponsor main/normali/ristoro: li' i loghi sono
   tanti e quasi tutti portano gia' il nome dentro.
   ------------------------------------------------------------------------- */

.marchio-ist {
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  text-align: center;
}

.marchio-ist__piastrella {
  display: grid;
  place-items: center;
  width: 100%;
  height: 78px;
  padding: var(--sp-3);
  background: #fff;
  border-radius: var(--r-sm);
}

/* Il <picture> deve centrare a sua volta: e' lui il figlio della griglia,
   e l'immagine dentro e' piu' stretta per via del limite di altezza. */
.marchio-ist__piastrella picture {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.marchio-ist__piastrella img {
  max-width: 100%;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.marchio-ist__nome {
  font-size: var(--t-xs);
  line-height: 1.35;
  color: var(--testo-tenue);
  text-wrap: balance;
}

/* Logo IOV dentro la scheda "Perche' si cammina": firma la destinazione dei
   fondi, senza cornice perche' la scheda e' gia' un riquadro. */
.marchio-iov {
  display: grid;
  place-items: center;
  margin-top: var(--sp-2);
}

.marchio-iov picture { display: grid; place-items: center; }

.marchio-iov img {
  max-height: 70px;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.su-scuro .marchio-ist__nome { color: #cbb8c1; }

/* Variante per la griglia associazioni: stesse regole, piastrella piu' alta
   perche' li' c'e' piu' spazio in larghezza. */
.griglia-sponsor--con-nome {
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  align-items: start;
}

.griglia-sponsor--con-nome .marchio-ist { gap: var(--sp-3); }

.griglia-sponsor--con-nome .tessera-sponsor {
  width: 100%;
  min-height: 118px;
}

.griglia-sponsor--con-nome .tessera-sponsor img { max-height: 84px; }


/* -------------------------------------------------------------------------
   FIGURA CON DIDASCALIA
   Una foto dentro il testo lungo, con la sua spiegazione sotto.
   ------------------------------------------------------------------------- */

.figura {
  margin: var(--sp-5) 0;
  max-width: 420px;
}

.figura figcaption {
  margin-top: var(--sp-2);
  font-size: var(--t-xs);
  line-height: 1.4;
  color: var(--testo-tenue);
}

/* -------------------------------------------------------------------------
   NASTRO DI MINIATURE
   Scorre col dito su mobile e con la rotellina su desktop. Le miniature
   hanno tutte la stessa misura: e' un nastro, non una galleria a griglia,
   quindi niente immagini grandi incorporate nella pagina.
   ------------------------------------------------------------------------- */

.nastro {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(140px, 42vw, 190px);
  gap: var(--sp-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-3);
  /* Sfonda i margini del testo lungo: il nastro parte dal bordo pagina, cosi'
     si capisce che continua oltre lo schermo. */
  margin-inline: calc(var(--margine-pagina) * -1);
  padding-inline: var(--margine-pagina);
  scrollbar-width: thin;
  scrollbar-color: var(--rosa) transparent;
}

.nastro__voce {
  position: relative;
  display: block;
  scroll-snap-align: start;
  border-radius: var(--r-md);
  overflow: hidden;
  line-height: 0;
  cursor: zoom-in;
  box-shadow: var(--ombra-1);
  transition: transform var(--transizione), box-shadow var(--transizione);
}

.nastro__voce img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Filo rosa, come le altre foto del sito. */
.nastro__voce::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(237, 110, 167, 0.45);
  pointer-events: none;
}

.nastro__voce:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombra-2);
}

/* -------------------------------------------------------------------------
   14. PIEDE
   ------------------------------------------------------------------------- */

.piede { padding-block: var(--sp-8) var(--sp-6); }
.piede__logo { width: 200px; margin-bottom: var(--sp-5); }

.piede__griglia { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; }

@media (min-width: 780px) {
  .piede__griglia { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--sp-6); }
}

.piede h3 {
  font-family: var(--font-testo);
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cbb8c1;
  margin-bottom: var(--sp-4);
}

.piede ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.piede a { text-decoration: none; }
.piede a:hover { text-decoration: underline; }

.social { display: flex; gap: var(--sp-3); }

.social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(246, 238, 242, 0.28);
  color: #f6eef2;
  transition: background var(--transizione), color var(--transizione), border-color var(--transizione);
}
.social a:hover { background: var(--rosa-chiaro); color: var(--scuro); border-color: var(--rosa-chiaro); }
.social svg { width: 20px; height: 20px; fill: currentColor; }

/* I loghi istituzionali sono a colori: sul prugna vanno posati su una
   piastrella chiara, altrimenti spariscono. */
.loghi-istituzionali {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: var(--sp-4) var(--sp-3);
  align-items: start;
}

.piede__firma {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(246, 238, 242, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  font-size: var(--t-sm);
  color: #cbb8c1;
}

/* -------------------------------------------------------------------------
   15. FISARMONICA
   ------------------------------------------------------------------------- */

.fisarmonica { display: grid; gap: var(--sp-2); max-width: var(--larghezza-testo); }

.fisarmonica details {
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--r-md);
  overflow: hidden;
}

.fisarmonica details[open] { border-color: var(--rosa); }

.fisarmonica summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  transition: background var(--transizione);
}

.fisarmonica summary::-webkit-details-marker { display: none; }
.fisarmonica summary:hover { background: var(--rosa-velo); }

.fisarmonica summary::after {
  content: '';
  margin-left: auto;
  flex: none;
  width: 0.7em;
  height: 0.7em;
  border-right: 2px solid var(--rosa-testo);
  border-bottom: 2px solid var(--rosa-testo);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--transizione);
}

.fisarmonica details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fisarmonica__corpo { padding: 0 var(--sp-5) var(--sp-5); color: var(--testo-tenue); }

/* -------------------------------------------------------------------------
   16. PAGINE DI TESTO
   ------------------------------------------------------------------------- */

.testo-lungo { max-width: var(--larghezza-testo); margin-inline: auto; }
.testo-lungo h2 { font-size: var(--t-xl); margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.testo-lungo h2:first-of-type { margin-top: var(--sp-5); }
.testo-lungo h3 { font-size: var(--t-lg); margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.testo-lungo p, .testo-lungo ul { margin-bottom: var(--sp-4); }
.testo-lungo ul { padding-left: 1.3em; }
.testo-lungo li { margin-bottom: var(--sp-2); }

.scheda-evidenza {
  background: var(--rosa-velo);
  border-left: 4px solid var(--rosa);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.scheda-evidenza ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }

.briciole { font-size: var(--t-sm); color: var(--testo-tenue); margin-bottom: var(--sp-4); }
.briciole a { color: var(--testo-tenue); }

/* -------------------------------------------------------------------------
   17. BOTTONI — stati piu' vivi (integra base.css)
   ------------------------------------------------------------------------- */

.btn--primario:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(191, 34, 104, 0.42); }
.btn--primario:active { transform: translateY(1px); box-shadow: var(--ombra-1); }
.btn--secondario:hover { transform: translateY(-2px); box-shadow: var(--ombra-1); }
.btn--grande { padding: 1em 2em; font-size: var(--t-lg); }