@charset "UTF-8";
/* ==========================================================================
   Fraternita' Evangelii Gaudium — foglio di stile principale
   Palette:  #426698 principale · #45aea9 secondario · #3b3b3b testi
   Font:     Fraunces (titoli) · Inter (testi)
   ========================================================================== */

@import url("fonts.css");

/* --------------------------------------------------------------- 1. Token */
:root {
  --blu:            #426698;
  --blu-scuro:      #2f4b73;
  --blu-chiaro:     #6a89b4;
  --verde:          #45aea9;
  --verde-scuro:    #2f8480;
  --verde-chiaro:   #7ecac6;

  --testo:          #3b3b3b;
  --testo-tenue:    #6b6b6b;
  --testo-lieve:    #8d8d8d;

  --bianco:         #ffffff;
  --sfondo:         #ffffff;
  --sfondo-alt:     #f6f8fa;
  --sfondo-blu:     #eef2f7;
  --sfondo-verde:   #eaf6f5;
  --bordo:          #e2e8ef;

  --font-titoli:    "Fraunces", Georgia, "Times New Roman", serif;
  --font-testi:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --larghezza:      1180px;
  --larghezza-testo: 720px;
  --raggio:         14px;
  --raggio-s:       8px;
  --ombra:          0 1px 2px rgba(47, 75, 115, .05), 0 8px 24px rgba(47, 75, 115, .07);
  --ombra-alta:     0 2px 4px rgba(47, 75, 115, .06), 0 18px 44px rgba(47, 75, 115, .13);
  --transizione:    180ms cubic-bezier(.4, 0, .2, 1);

  /* Ritmo verticale del testo lungo (.prosa): una scala coordinata invece di
     margini scelti caso per caso, cosi' lo spazio "sente" sempre uguale. In
     "rem", non "em": un h2 ha un font-size molto piu' grande del testo
     normale, quindi un margine in "em" su un h2 si moltiplica per QUELLO e
     produce un salto enorme rispetto agli altri blocchi. "rem" resta sempre
     ancorato alla stessa unita' di base, qualunque sia l'elemento. */
  --ritmo-testo:    1.2rem;    /* paragrafo -> paragrafo, elemento inline successivo */
  --ritmo-blocco:   1.9rem;    /* blocco autonomo: citazione, riquadro, immagine, allegati, link, video */
  --ritmo-h3:       2.1rem;    /* sopra un h3 */
  --ritmo-h2:       2.75rem;   /* sopra un h2 */
}

/* ----------------------------------------------------------- 2. Reset base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-testi);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--testo);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blu); text-decoration-color: rgba(66, 102, 152, .35); text-underline-offset: .18em; }
a:hover { color: var(--blu-scuro); text-decoration-color: currentColor; }

h1, h2, h3, h4 {
  font-family: var(--font-titoli);
  font-weight: 600;
  line-height: 1.18;
  color: var(--blu-scuro);
  margin: 0 0 .6em;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.45rem); }
h4 { font-size: 1.075rem; font-family: var(--font-testi); font-weight: 650; letter-spacing: 0; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: rgba(69, 174, 169, .25); }

:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ------------------------------------------------------- 3. Utility layout */
.contenitore { width: min(100% - 2.5rem, var(--larghezza)); margin-inline: auto; }
.contenitore-stretto { width: min(100% - 2.5rem, var(--larghezza-testo)); margin-inline: auto; }

.sezione { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.sezione--alt   { background: var(--sfondo-alt); }
.sezione--blu   { background: var(--sfondo-blu); }
.sezione--verde { background: var(--sfondo-verde); }

.salta-al-contenuto {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blu); color: #fff; padding: .8rem 1.3rem;
  border-radius: 0 0 var(--raggio-s) 0; font-weight: 600;
}
.salta-al-contenuto:focus { left: 0; }

.solo-lettori-schermo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Occhiello di sezione */
.occhiello {
  font-family: var(--font-testi);
  font-size: .78rem; font-weight: 650; letter-spacing: .14em;
  text-transform: uppercase; color: var(--verde-scuro);
  margin: 0 0 .85rem; display: block;
}
.occhiello::before {
  content: ""; display: inline-block; width: 1.6rem; height: 2px;
  background: var(--verde); vertical-align: middle; margin-right: .6rem;
  position: relative; top: -1px;
}

.intestazione-sezione { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.intestazione-sezione p { color: var(--testo-tenue); font-size: 1.1rem; }
/* Quando il titolo non e' seguito da un paragrafo introduttivo nello stesso
   blocco (il testo vero e proprio comincia subito dopo, in un contenitore
   a parte), il margine sopra serve solo a separare titolo e corpo: basta
   quello naturale dell'h2, non l'intero margine da "fine blocco". */
.intestazione-sezione--serrata { margin-bottom: 0; }
/* quando sotto non comincia una griglia ma il testo che continua il
   discorso: uno stacco breve, non il vuoto che separa due blocchi. */
.intestazione-sezione--attaccata { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.centrata { margin-inline: auto; text-align: center; }
.centrata .occhiello::before { display: none; }

/* ------------------------------------------------------------ 4. Pulsanti */
.bottone {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-testi); font-size: .95rem; font-weight: 600;
  padding: .8rem 1.5rem; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; transition: var(--transizione);
  line-height: 1.2;
  /* <button> ha di suo un text-align:center da User-Agent stylesheet, che
     <summary> o <a> non hanno: dichiarandolo qui, il testo va a capo allo
     stesso modo qualunque sia l'elemento usato per il pulsante. */
  text-align: center;
}
.bottone--pieno { background: var(--blu); color: #fff; }
.bottone--pieno:hover { background: var(--blu-scuro); color: #fff; transform: translateY(-1px); box-shadow: var(--ombra); }
.bottone--verde { background: var(--verde); color: #fff; }
.bottone--verde:hover { background: var(--verde-scuro); color: #fff; transform: translateY(-1px); box-shadow: var(--ombra); }
.bottone--vuoto { border-color: var(--bordo); color: var(--blu); background: #fff; }
.bottone--vuoto:hover { border-color: var(--blu); background: var(--sfondo-blu); }
.bottone--chiaro { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.08); }
.bottone--chiaro:hover { background: #fff; color: var(--blu-scuro); border-color: #fff; }
.bottone .freccia { transition: transform var(--transizione); }
.bottone:hover .freccia { transform: translateX(3px); }
.bottone--piccolo { padding: .5rem 1rem; font-size: .84rem; }

.link-freccia {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  color: var(--blu);
}
.link-freccia:hover { gap: .65rem; }
.link-freccia .freccia { transition: transform var(--transizione); }

/* ------------------------------------------------------------ 5. Header */
.intestazione {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--bordo);
}
.intestazione__barra {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 78px; padding-block: .6rem;
}
/* Il marchio contiene gia' il nome della Fraternita': niente testo affiancato,
   cosi' resta spazio per menu e lingue su un'unica riga. */
.marchio { display: block; text-decoration: none; flex-shrink: 0; line-height: 0; }
.marchio img { height: 74px; width: auto; }

/* Menu e selettore di lingua condividono la stessa riga */
.navigazione {
  margin-left: auto;
  display: flex; align-items: center; gap: .35rem;
}
.navigazione__lista {
  display: flex; align-items: center; gap: .1rem;
  list-style: none; margin: 0; padding: 0;
}
.navigazione__lista > li { position: relative; }
.navigazione__link {
  display: block; padding: .55rem .78rem; border-radius: var(--raggio-s);
  font-size: .93rem; font-weight: 550; color: var(--testo);
  text-decoration: none; white-space: nowrap; transition: var(--transizione);
}
.navigazione__link:hover { background: var(--sfondo-blu); color: var(--blu-scuro); }
.navigazione__link[aria-current="page"] { color: var(--blu); font-weight: 650; }
.navigazione__link[aria-current="page"]::after {
  content: ""; display: block; height: 2px; border-radius: 2px;
  background: var(--verde); margin-top: 3px;
}

/* Selettore lingua */
.lingue { display: flex; align-items: center; gap: .2rem; margin-left: .6rem; padding-left: .9rem; border-left: 1px solid var(--bordo); }
.lingue__voce {
  display: block; padding: .35rem .55rem; border-radius: 6px;
  font-size: .8rem; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; color: var(--testo-lieve);
  transition: var(--transizione);
}
.lingue__voce:hover { background: var(--sfondo-blu); color: var(--blu); }
.lingue__voce[aria-current="true"] { background: var(--blu); color: #fff; }

/* Menu mobile */
.apri-menu {
  display: none; margin-left: auto; width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--bordo); border-radius: 10px;
  cursor: pointer; color: var(--blu-scuro);
}
.apri-menu span {
  display: block; width: 20px; height: 2px; background: currentColor;
  border-radius: 2px; position: relative; transition: var(--transizione);
}
.apri-menu span::before, .apri-menu span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px; transition: var(--transizione);
}
.apri-menu span::before { top: -6px; }
.apri-menu span::after  { top: 6px; }
.apri-menu[aria-expanded="true"] span { background: transparent; }
.apri-menu[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.apri-menu[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 940px) {
  .apri-menu { display: flex; }
  .navigazione {
    /* Ancorato al fondo dell'header (posizionato per via di "sticky") invece
       che a un'altezza fissa in px: il logo puo' rendere l'header piu' alto
       del min-height dichiarato, e un valore fisso finiva per coprirne un
       pezzo. */
    position: absolute; inset: 100% 0 auto; margin: 0;
    background: #fff; border-bottom: 1px solid var(--bordo);
    box-shadow: var(--ombra-alta);
    max-height: min(80vh, calc(100dvh - 5rem)); overflow-y: auto;
    padding: 1rem 1.25rem 1.75rem;
    display: none;
  }
  .navigazione[data-aperto="true"] { display: block; }
  .navigazione__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .navigazione__link { padding: .85rem .6rem; font-size: 1.02rem; border-radius: 8px; }
  .navigazione__link[aria-current="page"]::after { display: none; }
  .lingue { margin: 1rem 0 0; padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--bordo); }
}

/* Sotto i 1180px il menu si stringe prima di passare a tendina */
@media (min-width: 941px) and (max-width: 1180px) {
  .navigazione__link { padding: .55rem .55rem; font-size: .88rem; }
  .marchio img { height: 54px; }
}

/* -------------------------------------------------------------- 6. Hero */
.eroe { position: relative; isolation: isolate; color: #fff; overflow: hidden; background: var(--blu-scuro); }
.eroe__sfondo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.eroe__sfondo img, .eroe__sfondo video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.eroe::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(21, 40, 66, .30) 0%, rgba(21, 40, 66, .58) 55%, rgba(21, 40, 66, .78) 100%),
    linear-gradient(105deg, rgba(47, 75, 115, .55), rgba(47, 132, 128, .30));
}
.eroe__contenuto { padding: clamp(5rem, 13vw, 9.5rem) 0 clamp(4rem, 9vw, 7rem); max-width: 44rem; }
.eroe h1 { color: #fff; margin-bottom: .5em; text-shadow: 0 2px 24px rgba(10, 24, 44, .35); }
.eroe__occhiello { color: var(--verde-chiaro); }
.eroe__occhiello::before { background: var(--verde-chiaro); }
.eroe__testo { font-size: clamp(1.05rem, .98rem + .4vw, 1.28rem); color: rgba(255,255,255,.92); max-width: 38rem; }
.eroe__azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* Hero compatto delle pagine interne */
.eroe--pagina .eroe__contenuto { padding: clamp(3.5rem, 8vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.eroe--tinta { background: linear-gradient(120deg, var(--blu-scuro), var(--blu) 55%, var(--verde-scuro)); }
.eroe--tinta::after { background: none; }
.eroe--tinta .eroe__decoro {
  position: absolute; right: -8%; top: -30%; width: 60%; opacity: .12; z-index: -1;
}

/* Briciole */
.briciole { font-size: .85rem; margin-bottom: 1.2rem; color: rgba(255,255,255,.72); }
.briciole ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.briciole li:not(:last-child)::after { content: "›"; margin-left: .45rem; opacity: .6; }
.briciole a { color: rgba(255,255,255,.9); text-decoration: none; }
.briciole a:hover { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------ 7. Testo */
.prosa { max-width: var(--larghezza-testo); }
.prosa > * + * { margin-top: var(--ritmo-testo); }
.prosa h2 { margin-top: var(--ritmo-h2); margin-bottom: .5em; }
.prosa h3 { margin-top: var(--ritmo-h3); margin-bottom: .4em; }
.prosa h2:first-child, .prosa h3:first-child { margin-top: 0; }
/* L'occhiello e' un elemento di intestazione, non un paragrafo: un h2 che lo
   segue direttamente resta ravvicinato, come nei blocchi che usano
   .intestazione-sezione invece di .prosa. */
.prosa .occhiello + h2 { margin-top: 0; }
.prosa ul, .prosa ol { padding-left: 1.3em; margin-block: var(--ritmo-testo); }
.prosa li + li { margin-top: .45em; }
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul > li { position: relative; padding-left: 1.6em; }
.prosa ul > li::before {
  content: ""; position: absolute; left: .25em; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--verde);
}
.prosa ol > li::marker { color: var(--verde-scuro); font-weight: 650; }
.prosa a { font-weight: 500; }
.prosa strong { font-weight: 650; color: var(--blu-scuro); }
.prosa hr { border: 0; border-top: 1px solid var(--bordo); margin: var(--ritmo-blocco) 0; }
/* Immagine in evidenza dentro il corpo dell'articolo: stesso ritmo degli
   altri blocchi autonomi (citazione, riquadro, allegati...), con lo spazio
   verso la didascalia e verso il testo successivo ben distinti fra loro. */
.prosa figure { margin: var(--ritmo-blocco) 0; }
.prosa figure figcaption { margin-top: .6rem; }

.guida { font-size: 1.16rem; line-height: 1.66; color: var(--testo-tenue); }

/* Blocchi che escono dalla colonna di lettura: griglie di schede, video, mappe.
   Restano centrati rispetto alla pagina, non alla colonna. */
.prosa .largo {
  width: min(var(--larghezza), 100vw - 2.5rem);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Citazioni */
.citazione {
  margin: var(--ritmo-blocco) 0; padding: 1.4em 1.6em 1.4em 1.9em;
  border-left: 3px solid var(--verde);
  background: var(--sfondo-verde); border-radius: 0 var(--raggio) var(--raggio) 0;
  font-family: var(--font-titoli); font-size: 1.14rem; line-height: 1.6;
  color: var(--blu-scuro); font-style: italic;
}
.citazione p:last-of-type { margin-bottom: 0; }
.citazione cite {
  display: block; margin-top: .8em; font-family: var(--font-testi);
  font-size: .85rem; font-style: normal; font-weight: 600;
  letter-spacing: .04em; color: var(--verde-scuro); text-transform: uppercase;
}
/* Variante a piena larghezza, per chiudere un blocco a due colonne senza
   restare imprigionata in una delle due (es. sotto mappa + elenco sedi) */
.citazione--larga {
  max-width: 46rem; margin: 2.5rem auto 0; text-align: center;
  border-left: 0; border-top: 3px solid var(--verde);
  border-radius: 0 0 var(--raggio) var(--raggio); padding: 1.6em 2em;
}

/* Riquadro informativo */
.riquadro {
  background: var(--sfondo-blu); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 1.4rem 1.6rem; margin: var(--ritmo-blocco) 0;
}
.riquadro h3, .riquadro h4 { margin-top: 0; }
.riquadro--verde { background: var(--sfondo-verde); border-color: rgba(69,174,169,.28); }

/* Numerazione articolata dei documenti (Statuto, Orizzonti) */
.documento .comma { display: flex; gap: .9rem; margin-top: 1.05em; }
.documento .comma__numero {
  flex: 0 0 auto; min-width: 2.8rem;
  font-family: var(--font-testi); font-size: .84rem; font-weight: 700;
  color: var(--verde-scuro); padding-top: .32em; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.documento .comma__testo { margin: 0; }
.documento .comma--annidato { margin-left: 1.6rem; }
.documento h2 {
  padding-top: 1.6rem; border-top: 1px solid var(--bordo);
}

/* ------------------------------------------------------------- 8. Griglie */
.griglia { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.griglia--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.griglia--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.griglia--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.griglia--5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

/* Nella pagina generale Articoli e news, tutte le foto di una stessa sezione
   hanno la stessa altezza: l'aspect-ratio resta quello di ".scheda__media"
   anche per le schede "contieni" (che cambiano solo come l'immagine vi si
   adatta, non la forma del riquadro). La variante orizzontale (Documenti)
   ha una sua forma dedicata, piu' specifica e quindi prioritaria. */
.griglia--articoli .scheda__media--contieni { aspect-ratio: 3 / 2; }
.griglia--articoli .scheda--orizzontale .scheda__media--contieni { aspect-ratio: 3 / 4; }

/* Testo introduttivo di una sezione della pagina generale (es. "Artigianati
   di pace"): il testo normale a sinistra, la citazione a destra, con lo
   spazio verso la griglia sottostante coordinato con quello fra intestazione
   e griglia (stesso clamp di .intestazione-sezione). La citazione si
   allunga per pari altezza col testo e vi resta centrata dentro, cosi' non
   lascia meta' colonna vuota quando il testo e' piu' lungo. */
.intro-sezione {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch;
  grid-template-columns: 1fr 1fr;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.intro-sezione__citazione { display: flex; }
.intro-sezione__citazione .citazione { margin: 0; align-self: center; }
@media (max-width: 720px) { .intro-sezione { grid-template-columns: 1fr; } }

/* Blocco a due colonne testo+media */
.duo {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.duo__media img { border-radius: var(--raggio); box-shadow: var(--ombra); width: 100%; }
.duo--invertito .duo__media { order: -1; }
@media (max-width: 720px) { .duo--invertito .duo__media { order: 0; } }

/* Variante a pari altezza: la foto riempie esattamente lo spazio verticale
   del testo affiancato, invece di fermarsi alla propria altezza naturale.
   Sotto i 720px testo e foto non sono piu' affiancati (il .duo collassa a
   una colonna), quindi la foto prende un'altezza propria e proporzionata. */
.duo--pari-altezza { align-items: stretch; }
.duo--pari-altezza .duo__media { display: flex; min-height: 16rem; }
.duo--pari-altezza .duo__media img { height: 100%; object-fit: cover; }
@media (max-width: 720px) {
  .duo--pari-altezza .duo__media { aspect-ratio: 16 / 10; min-height: 0; }
}

/* ------------------------------------------------------------- 9. Schede */
.scheda {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio);
  overflow: hidden; transition: var(--transizione); height: 100%;
}
.scheda:hover { transform: translateY(-3px); box-shadow: var(--ombra-alta); border-color: rgba(66,102,152,.3); }
.scheda__media { position: relative; aspect-ratio: 3 / 2; background: var(--sfondo-blu); overflow: hidden; }
.scheda__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.scheda:hover .scheda__media img { transform: scale(1.035); }
.scheda__media--contieni { aspect-ratio: 4 / 3; }
.scheda__media--contieni img { object-fit: contain; padding: .9rem; }
.scheda__corpo { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; gap: .55rem; }
.scheda__titolo { font-size: 1.16rem; margin: 0; }
.scheda__titolo a { text-decoration: none; color: inherit; }
.scheda__titolo a::after { content: ""; position: absolute; inset: 0; }
.scheda { position: relative; }
.scheda__testo { color: var(--testo-tenue); font-size: .95rem; margin: 0; }
.scheda__pie { margin-top: auto; padding-top: .85rem; font-size: .88rem; color: var(--testo-lieve); }

/* Variante orizzontale: immagine a sinistra invece che sopra il testo. Usata
   per i Documenti, le cui foto (verticali) si leggono meglio come colonna
   stretta accanto al testo piuttosto che come fascia larga in alto. */
@media (min-width: 560px) {
  .scheda--orizzontale { flex-direction: row; }
  .scheda--orizzontale .scheda__media { width: 10rem; aspect-ratio: 3 / 4; flex-shrink: 0; }
  .scheda--orizzontale .scheda__media--contieni { aspect-ratio: 3 / 4; }
}

/* Etichette categoria/tag */
.etichette { display: flex; flex-wrap: wrap; gap: .4rem; }
.etichetta {
  display: inline-block; padding: .28rem .68rem; border-radius: 999px;
  font-size: .74rem; font-weight: 650; letter-spacing: .03em;
  background: var(--sfondo-blu); color: var(--blu); border: 1px solid transparent;
  white-space: nowrap;
}
.etichetta--verde { background: var(--sfondo-verde); color: var(--verde-scuro); }
.etichetta--contorno { background: #fff; border-color: var(--bordo); color: var(--testo-tenue); font-weight: 550; }

/* Categoria: colore per famiglia di eventi */
.etichetta[data-categoria="giovani"]   { background: #eaf2fb; color: #2f4b73; }
.etichetta[data-categoria="catechesi"] { background: #eef2f7; color: #40608f; }
.etichetta[data-categoria="esercizi"]  { background: #e9f4f3; color: #2f8480; }
.etichetta[data-categoria="famiglie"]  { background: #fdf1e7; color: #a85b21; }
.etichetta[data-categoria="fraternita"]{ background: #f0edf9; color: #55479b; }
.etichetta[data-categoria="creato"]    { background: #ecf6ec; color: #3d7a41; }
.etichetta[data-categoria="arte"]      { background: #fbeef3; color: #96406a; }

/* --------------------------------------------------- 10. Eventi / calendario */
.filtro {
  font-family: var(--font-testi); font-size: .88rem; font-weight: 550;
  padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--bordo); color: var(--testo-tenue);
  transition: var(--transizione);
}
.filtro:hover { border-color: var(--blu-chiaro); color: var(--blu); }
.filtro[aria-pressed="true"] { background: var(--blu); border-color: var(--blu); color: #fff; }

/* Filtri a schede: quattro linguette (a chi, che forma, dove, che categoria),
   una sola visibile alla volta. La barra sta piu' lontana dalla hero sopra
   (spazio generoso: e' un cambio di "zona" della pagina) e piu' vicina alla
   lista sotto (il padding-bottom qui sostituisce, non si somma a, il
   padding-top della sezione successiva: vedi .sezione--dopo-filtri). */
.sezione-filtri { padding: clamp(2.75rem, 6vw, 4rem) 0 clamp(1.5rem, 3vw, 2rem); }
.sezione--dopo-filtri { padding-top: 0; }

.filtri-tab {
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: #fff; overflow: hidden;
}
/* Pulsanti a pillola invece della barra a linguette che scorreva in
   orizzontale: su mobile lo scroll laterale si attivava per sbaglio ed era
   poco intuitivo. Qui vanno semplicemente a capo. */
.filtri-tab__barra {
  display: flex; flex-wrap: wrap; gap: .6rem;
  background: var(--sfondo-alt); border-bottom: 1px solid var(--bordo);
  padding: 1.1rem 1.3rem;
}
.filtri-tab__linguetta {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .65rem 1.1rem; border-radius: 999px;
  font-family: var(--font-testi); font-size: .9rem; font-weight: 650;
  color: var(--testo-tenue); background: #fff; border: 1.5px solid var(--bordo);
  cursor: pointer; white-space: nowrap; transition: var(--transizione);
}
.filtri-tab__linguetta svg { color: var(--verde-scuro); flex: 0 0 auto; transition: var(--transizione); }
.filtri-tab__linguetta:hover { border-color: var(--blu-chiaro); color: var(--blu); }
.filtri-tab__linguetta[aria-selected="true"] {
  color: #fff; background: var(--blu); border-color: var(--blu);
}
.filtri-tab__linguetta[aria-selected="true"] svg { color: #fff; }
/* Puntino: resta visibile anche quando si passa a un'altra scheda, cosi'
   non si perde di vista un filtro lasciato attivo altrove. */
.filtri-tab__puntino {
  width: 7px; height: 7px; border-radius: 50%; background: var(--verde);
  flex: 0 0 auto;
}
.filtri-tab__puntino[hidden] { display: none; }
.filtri-tab__pannello {
  display: flex; flex-wrap: wrap; gap: .5rem; padding: 1.3rem;
}
.filtri-tab__pannello[hidden] { display: none; }

.esito-filtri { font-size: .92rem; color: var(--testo-lieve); padding: .5rem 1.3rem 0; }

/* Scheda evento.
   Tre colonne su desktop: data | corpo (flessibile) | volantino, cosi' il
   pulsante sfrutta la larghezza libera a destra invece di restare confinato
   in fondo al testo. Sotto i 900px la terza colonna sparisce da sola (un
   grid item senza posto esplicito va semplicemente a capo). */
.evento {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0;
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio);
  overflow: hidden; transition: var(--transizione);
}
/* Senza questa riga l'attributo "hidden" (usato dai filtri in JS) non
   nasconde nulla: essendo una regola d'autore, "display:grid" qui sopra
   vince comunque sulla regola predefinita del browser per [hidden],
   qualunque sia la specificita' dei selettori in gioco. */
.evento[hidden] { display: none; }
@media (min-width: 900px) {
  .evento:has(.evento__azioni-colonna) { grid-template-columns: 8.5rem 1fr 13rem; }
}
.evento:hover { box-shadow: var(--ombra-alta); border-color: rgba(66,102,152,.3); }
.evento--passato { opacity: .72; }
.evento--passato:hover { opacity: 1; }

.evento__data {
  background: linear-gradient(160deg, var(--sfondo-blu), var(--sfondo-verde));
  padding: 1.4rem 1rem; text-align: center;
  display: flex; flex-direction: column; justify-content: center; gap: .1rem;
  border-right: 1px solid var(--bordo);
}
/* Una scheda porta un riquadro-data per ogni occorrenza e ne mostra uno
   solo (lo sceglie sito.js, in base al giorno della visita). Senza questa
   riga il "display:flex" qui sopra, essendo una regola d'autore, vincerebbe
   comunque sull'attributo hidden e li mostrerebbe tutti insieme. */
.evento__data[hidden] { display: none; }
.evento__giorno {
  font-family: var(--font-titoli); font-size: 2.15rem; font-weight: 600;
  color: var(--blu-scuro); line-height: 1; font-variant-numeric: tabular-nums;
}
.evento__mese {
  font-size: .76rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--verde-scuro);
}
.evento__anno { font-size: .78rem; color: var(--testo-lieve); font-variant-numeric: tabular-nums; }
.evento__intervallo { font-size: .74rem; color: var(--testo-lieve); margin-top: .25rem; }

/* Corpo: piu' respiro fra i gruppi di informazioni (etichette, titolo,
   quando/dove, date multiple, contatti) invece di un gap piatto uguale
   ovunque, che schiacciava tutto in un unico blocco compresso. */
.evento__corpo { padding: 1.6rem 1.7rem 1.7rem; display: flex; flex-direction: column; }
.evento__corpo > .etichette { margin-bottom: .7rem; }
.evento__titolo { font-size: 1.22rem; margin: 0 0 .35rem; line-height: 1.35; }
.evento__sottotitolo { color: var(--testo-tenue); font-size: .95rem; margin: 0; }
.evento__tema { font-size: .9rem; color: var(--testo-tenue); margin-top: .35rem; }
.evento__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
  font-size: .88rem; color: var(--testo-tenue); margin-top: .85rem;
}
.evento__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.evento__meta svg { flex: 0 0 auto; color: var(--verde-scuro); }

/* Contatti/iscrizione: e' un blocco a se' (come raggiungerci), separato da
   un filo invece che appiccicato al resto. */
.evento__contatto {
  margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--bordo);
  font-size: .88rem; color: var(--testo-tenue);
}
.evento__contatto span { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.evento__contatto svg { flex: 0 0 auto; color: var(--verde-scuro); }

/* Colonna delle azioni (volantino, aggiunta al calendario): a destra e
   centrata in verticale sui desktop larghi; sotto i 900px diventa una fascia
   a piena larghezza in fondo alla scheda (il grid item senza colonna propria
   va semplicemente a capo). */
.evento__azioni-colonna {
  display: flex; flex-direction: column; align-items: stretch;
  justify-content: center; gap: .6rem;
  padding: 1.2rem 1.6rem;
}
@media (min-width: 900px) {
  .evento__azioni-colonna {
    border-left: 1px solid var(--bordo);
    background: var(--sfondo-alt);
  }
  .evento__azioni-colonna .bottone { width: 100%; justify-content: center; }
}
@media (max-width: 899px) {
  .evento__azioni-colonna {
    flex-direction: row; flex-wrap: wrap; align-items: flex-start;
    justify-content: flex-start; padding: 0 1.7rem 1.5rem;
  }
}

/* Aggiunta al calendario: un <details> che apre l'elenco dei calendari.
   Niente JavaScript, quindi funziona anche mentre il resto della pagina
   sta ancora caricando. */
.calendario { position: relative; }
.calendario__apri { width: 100%; justify-content: center; list-style: none; }
/* il triangolino predefinito del <summary> comparirebbe accanto all'icona */
.calendario__apri::-webkit-details-marker { display: none; }
.calendario__apri::marker { content: ""; }
.calendario[open] .calendario__apri { border-color: var(--blu); color: var(--blu); }
.calendario__menu {
  position: absolute; z-index: 20; right: 0; left: 0; margin-top: .4rem;
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  box-shadow: var(--ombra-alta); overflow: hidden;
  display: grid; min-width: 13rem;
}
.calendario__voce {
  padding: .6rem .8rem; font-size: .86rem; font-weight: 550;
  color: var(--testo); text-decoration: none; text-align: left;
  transition: var(--transizione);
}
.calendario__voce + .calendario__voce { border-top: 1px solid var(--bordo); }
.calendario__voce:hover { background: var(--sfondo-blu); color: var(--blu-scuro); }
@media (max-width: 899px) {
  /* Sotto i 900px la scheda non ha piu' una colonna a se' per volantino e
     calendario: il menu del pulsante grande (un'unica data, vedi
     bottone_calendario) si apre nel flusso invece che in overlay, cosi' non
     copre il testo dell'evento. La versione compatta per riga (piu' date,
     vedi bottone_calendario_riga) resta invece sempre in overlay: sta
     dentro un elenco che l'utente sta gia' leggendo, e spostare le righe
     sottostanti ad ogni apertura sarebbe piu' fastidioso che utile. */
  .calendario:not(.calendario--riga) { position: static; }
  .calendario:not(.calendario--riga) .calendario__menu { position: static; margin-top: .5rem; }
}

/* Pulsante compatto per una singola data, dentro l'elenco delle occorrenze
   di un evento con piu' date: solo l'icona, per non appesantire righe che
   sono gia' un elenco lungo. Il testo del pulsante resta nel markup (lo
   legge chi usa un lettore di schermo, e compare come titolo al passaggio
   del mouse) ma non occupa spazio a video. */
.date-elenco__riga { position: relative; }
.date-elenco__riga .calendario--riga { margin-left: auto; }
.calendario--riga .calendario__apri--icona {
  display: flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--bordo); background: #fff; color: var(--testo-lieve);
  cursor: pointer; transition: var(--transizione); list-style: none;
}
.calendario--riga .calendario__apri--icona::-webkit-details-marker { display: none; }
.calendario--riga .calendario__apri--icona::marker { content: ""; }
.calendario--riga .calendario__apri--icona:hover,
.calendario--riga[open] .calendario__apri--icona {
  border-color: var(--blu); color: var(--blu); background: var(--sfondo-blu);
}
.calendario--riga .calendario__apri-testo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.calendario--riga .calendario__menu { right: 0; left: auto; width: max-content; }
@media (max-width: 420px) {
  /* Molto stretto: la data e il pulsante non stanno piu' sulla stessa riga
     insieme al tema, quindi il pulsante si sposta a inizio riga invece di
     restare ancorato a destra con un margine che spingerebbe tutto sotto.
     Il menu smette di essere un overlay ancorato all'icona (a 27px dal
     bordo sinistro dello schermo, un menu di 208px "aperto verso sinistra"
     ci finirebbe fuori) e si apre semplicemente sotto, nel flusso normale
     della pagina: lo stesso trattamento gia' usato per il pulsante grande
     sotto i 900px. */
  .date-elenco__riga .calendario--riga { margin-left: 0; order: -1; }
  .calendario--riga { position: static; }
  .calendario--riga .calendario__menu { position: static; width: auto; margin-top: .4rem; }
}

@media (max-width: 560px) {
  .evento { grid-template-columns: 1fr; }
  .evento__data {
    flex-direction: row; align-items: baseline; justify-content: flex-start;
    gap: .5rem; padding: .85rem 1.2rem; text-align: left;
    border-right: 0; border-bottom: 1px solid var(--bordo);
  }
  .evento__giorno { font-size: 1.5rem; }
  .evento__intervallo { margin-top: 0; }
  .evento__corpo { padding: 1.3rem 1.4rem 1.4rem; }
  .evento__azioni-colonna { padding: 0 1.4rem 1.3rem; }
}

.lista-eventi { display: grid; gap: 1.1rem; }

/* Elenco date interne a una scheda evento: e' un gruppo a se' (il calendario
   completo dell'evento), separato dal resto con un filo invece di un
   semplice margine, cosi' si legge come blocco a parte. */
.date-elenco {
  list-style: none; margin: 1rem 0 0; padding: .9rem 0 0; display: grid; gap: .5rem;
  border-top: 1px solid var(--bordo);
}
.date-elenco li {
  display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap;
  font-size: .92rem; padding: .2rem 0;
}
.date-elenco .data {
  font-weight: 650; color: var(--blu-scuro); flex: 0 0 auto;
  min-width: 9.5rem; font-variant-numeric: tabular-nums;
}
/* Le date gia' concluse non sono barrate: restano leggibili come le altre,
   solo un po' piu' sbiadite nell'insieme (data e descrizione insieme, non
   solo la data), cosi' l'occhio le distingue senza doverle "cancellare". */
.date-elenco__riga--passata { opacity: .55; }
.date-elenco .tema { color: var(--testo-tenue); }

/* ---------------------------------------------------- 11. Le case di fraternita' */
/* Una griglia di schede, una per sede: niente mappa, niente geometria da
   tarare a mano. Perfettamente allineata a qualunque larghezza. */
/* Flexbox invece di grid: con 8 sedi l'ultima riga resta incompleta, e solo
   flex-wrap con justify-content:center la centra da sola, senza bisogno di
   calcolare a mano dove va ogni scheda. */
.griglia-sedi {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
  margin: clamp(2rem, 4vw, 2.75rem) 0 clamp(2.25rem, 4vw, 3rem);
}
.sede-scheda {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .5rem; padding: 1.5rem 1.1rem;
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio);
  transition: var(--transizione);
  flex: 0 1 100%;
}
@media (min-width: 480px) { .sede-scheda { flex-basis: calc(50% - .5rem); } }
@media (min-width: 860px) { .sede-scheda { flex-basis: calc(25% - .75rem); } }
.sede-scheda:hover { transform: translateY(-3px); box-shadow: var(--ombra); border-color: rgba(66,102,152,.28); }
.sede-scheda__icona {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--sfondo-verde); color: var(--verde-scuro);
}
.sede-scheda__nome { font-weight: 650; color: var(--blu-scuro); font-size: 1.02rem; }
.sede-scheda__nota { color: var(--testo-lieve); font-size: .85rem; }

/* ------------------------------------------- 12. Fraternita' zonali (2 col) */
/* Due colonne bilanciate: le schede hanno altezze molto diverse (la Lombardia
   ha otto fraternita', l'Umbria una), quindi il flusso a colonne riempie
   meglio della griglia. */
.zonali { columns: 2; column-gap: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 820px) { .zonali { columns: 1; } }
.regione {
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 1.35rem 1.5rem 1.5rem;
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.regione__nome {
  font-family: var(--font-titoli); font-size: 1.22rem; font-weight: 600;
  color: var(--blu-scuro); margin: 0 0 .9rem; padding-bottom: .7rem;
  border-bottom: 2px solid var(--sfondo-verde); display: flex; align-items: center; gap: .55rem;
}
.regione__nome::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--verde); flex: 0 0 auto;
}
.regione__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.regione__lista li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--bordo); }
.regione__lista li:last-child { border-bottom: 0; }
.regione__citta { font-weight: 600; font-size: .98rem; color: var(--testo); }
.regione__contatto { font-size: .88rem; word-break: break-word; }
.regione__contatto a { text-decoration: none; }
.regione__contatto a:hover { text-decoration: underline; }
.regione__nota { font-size: .88rem; color: var(--testo-lieve); margin: .7rem 0 0; }

/* ------------------------------------------------------------ 13. Video */
.video {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--raggio);
  overflow: hidden; background: #0d1b2c; box-shadow: var(--ombra);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-scheda { display: flex; flex-direction: column; gap: .7rem; }
.video-scheda__titolo { font-size: .98rem; font-weight: 600; color: var(--blu-scuro); margin: 0; line-height: 1.4; }
.video-scheda__meta { font-size: .85rem; color: var(--testo-lieve); }

/* Segnaposto YouTube con consenso (evita cookie di terzi al caricamento) */
.video__anteprima {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; cursor: pointer; border: 0; padding: 1.5rem;
  background: linear-gradient(150deg, var(--blu-scuro), var(--verde-scuro));
  color: #fff; font-family: var(--font-testi); text-align: center;
}
.video__anteprima img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.video__play {
  position: relative; width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,255,255,.95); display: grid; place-items: center;
  transition: var(--transizione);
}
.video__anteprima:hover .video__play { transform: scale(1.08); background: #fff; }
.video__play svg { color: var(--blu-scuro); margin-left: 3px; }
.video__nota { position: relative; font-size: .8rem; opacity: .9; max-width: 24rem; line-height: 1.45; }

/* ------------------------------------------------------- 14. Allegati PDF */
.allegati { display: grid; gap: .7rem; margin: var(--ritmo-blocco) 0; }
.allegato {
  display: flex; align-items: center; gap: .95rem;
  padding: .9rem 1.15rem; border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  background: #fff; text-decoration: none; color: inherit; transition: var(--transizione);
}
.allegato:hover { border-color: var(--blu-chiaro); background: var(--sfondo-blu); }
.allegato__icona {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px;
  background: var(--sfondo-verde); color: var(--verde-scuro);
  display: grid; place-items: center;
}
.allegato__testo { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.allegato__nome { font-weight: 600; font-size: .97rem; color: var(--blu-scuro); }
.allegato__meta { font-size: .82rem; color: var(--testo-lieve); }

/* Elenco di link esterni con fonte */
.link-utili { list-style: none; margin: var(--ritmo-blocco) 0; padding: 0; display: grid; gap: .1rem; }
.link-utili li { padding: .6rem 0; border-bottom: 1px solid var(--bordo); }
.link-utili li:last-child { border-bottom: 0; }
.link-utili a { font-weight: 550; }
.link-utili .fonte { color: var(--testo-lieve); font-size: .88rem; }

/* --------------------------------------------------------- 15. Contatti */
.contatto-scheda {
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 1.6rem 1.7rem; display: flex; flex-direction: column; gap: .6rem; height: 100%;
}
.contatto-scheda__icona {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: var(--sfondo-verde); color: var(--verde-scuro); margin-bottom: .3rem;
}
.contatto-scheda h3 { margin: 0; font-size: 1.12rem; }
.contatto-scheda p { margin: 0; color: var(--testo-tenue); font-size: .96rem; }
.contatto-scheda a { font-weight: 550; word-break: break-word; }

/* Un numero di telefono nel mezzo di un paragrafo si perde: qui e' un
   piccolo elemento a se', riconoscibile a colpo d'occhio. */
.telefono-chip {
  display: inline-flex; align-items: center; gap: .45rem; width: fit-content;
  padding: .35rem .8rem; border-radius: 999px;
  background: var(--sfondo-verde); color: var(--verde-scuro) !important;
  font-size: .88rem; font-weight: 650; font-variant-numeric: tabular-nums;
  letter-spacing: .01em; text-decoration: none;
  transition: var(--transizione);
}
.telefono-chip:hover { background: var(--verde); color: #fff !important; }

/* Generosita': il bonifico ha piu' dati e occupa la colonna piu' larga;
   Satispay e 5x1000, piu' brevi, si impilano nell'altra. */
.generosita-griglia {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2rem); align-items: start;
}
@media (max-width: 780px) { .generosita-griglia { grid-template-columns: 1fr; } }
.generosita-colonna { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.4vw, 2rem); }
.generosita-griglia .contatto-scheda, .generosita-colonna .contatto-scheda { height: auto; }

/* --- progetto "Una casa per...": i due lati della gift card -------------- */
/* I due lati sono cartoncini appoggiati: una lieve inclinazione e l'ombra
   bastano a farli leggere come oggetti, senza mockup finti. Cliccandoli si
   aprono nel lightbox dei volantini, quindi il pulsante non deve sembrare
   un pulsante: nessuno sfondo, solo il cartoncino. */
.gift-card {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1rem, 2.5vw, 2rem); padding: .6rem .2rem;
}
.gift-card__lato {
  flex: 1 1 11rem; max-width: 15rem; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.gift-card__scatto {
  border: 0; padding: 0; background: none; cursor: zoom-in; width: 100%;
  border-radius: var(--raggio-s); display: block;
}
.gift-card__scatto img {
  display: block; width: 100%; border-radius: var(--raggio-s);
  box-shadow: var(--ombra-alta); transition: transform .25s ease;
}
.gift-card__lato:first-child .gift-card__scatto img { transform: rotate(-2deg); }
.gift-card__lato:last-child  .gift-card__scatto img { transform: rotate(2deg); }
.gift-card__scatto:hover img, .gift-card__scatto:focus-visible img { transform: none; }
.gift-card figcaption {
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--testo-tenue);
}
@media (prefers-reduced-motion: reduce) {
  .gift-card__scatto img { transition: none; }
}

/* --- gallerie fotografiche negli articoli --------------------------------- */
/* Griglia di scatti, tutti alla stessa proporzione cosi' la fila resta
   ordinata anche con foto di orientamento diverso. Aprono a schermo intero
   nello stesso lightbox dei volantini. */
.galleria {
  display: grid; gap: clamp(.75rem, 2vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.galleria__scatto {
  border: 0; padding: 0; background: none; cursor: zoom-in;
  border-radius: var(--raggio-s); overflow: hidden; aspect-ratio: 4 / 3;
  box-shadow: var(--ombra);
}
.galleria__scatto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease;
}
.galleria__scatto:hover img, .galleria__scatto:focus-visible img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .galleria__scatto img { transition: none; }
}

.dato-riga { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--bordo); }
.dato-riga:last-child { border-bottom: 0; }
.dato-riga dt { font-weight: 650; color: var(--blu-scuro); min-width: 9rem; margin: 0; font-size: .93rem; }
.dato-riga dd { margin: 0; font-variant-numeric: tabular-nums; }

.iban {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .98rem; letter-spacing: .02em; background: var(--sfondo-blu);
  padding: .2rem .5rem; border-radius: 5px; word-break: break-all;
}

/* ------------------------------------------------------------ 16. Footer */
.pie {
  background: var(--blu-scuro); color: rgba(255,255,255,.78);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; margin-top: 0;
  font-size: .95rem;
}
.pie a { color: rgba(255,255,255,.88); text-decoration-color: rgba(255,255,255,.3); }
.pie a:hover { color: #fff; }
/* Il pulsante "Sostieni la Fraternita'" e' un <a>: senza questa regola più
   specifica, ".pie a:hover" (che ha un selettore in più, quindi vince)
   lo terrebbe bianco sopra uno sfondo diventato anch'esso bianco all'hover. */
.pie .bottone--chiaro:hover { color: var(--blu-scuro); }
/* Flexbox invece di grid a colonne uguali: con una griglia a 1fr ciascuna,
   una colonna dal contenuto corto (Naviga) lascia dello spazio vuoto in
   coda al proprio riquadro prima che inizi la colonna successiva, e quello
   spazio si somma al gap "vero" - risultato: gap che sembrano diversi da
   una colonna all'altra, anche se il grid-gap dichiarato e' identico.
   Con flex e "justify-content:space-between" lo spazio fra un blocco di
   testo e il successivo e' sempre lo stesso, perche' ogni colonna occupa
   solo la larghezza del proprio contenuto. */
.pie__griglia {
  display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.15);
}
.pie__griglia > div { flex: 1 1 15rem; max-width: 17rem; }
/* Il marchio e' a colori scuri: su fondo blu va posato su una placca chiara */
.pie__marchio {
  display: inline-flex; align-items: center; margin-bottom: 1.2rem;
  background: #fff; border-radius: var(--raggio); padding: .7rem .9rem;
}
.pie__marchio img { height: 62px; width: auto; }
.pie h3 {
  color: #fff; font-family: var(--font-testi); font-size: .8rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; margin: 0 0 1rem;
}
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pie__lista a { text-decoration: none; }
.pie__lista a:hover { text-decoration: underline; }
.pie__app { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1rem; }
.pie__app img { height: 40px; width: auto; display: block; }
.pie__sociali { display: flex; gap: .6rem; margin-top: 1.2rem; }
.pie__sociali a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.1); transition: var(--transizione);
}
.pie__sociali a:hover { background: var(--verde); transform: translateY(-2px); }
.pie__coda {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between;
  padding-top: 1.8rem; font-size: .87rem; color: rgba(255,255,255,.6);
}
.pie__legali { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; margin: 0; padding: 0; }

/* ------------------------------------------------------ 17. Richiamo CTA */
.richiamo {
  background: linear-gradient(120deg, var(--blu-scuro), var(--blu) 50%, var(--verde-scuro));
  color: #fff; border-radius: var(--raggio); padding: clamp(2.2rem, 5vw, 3.5rem);
  text-align: center; position: relative; overflow: hidden;
}
.richiamo h2 { color: #fff; }
.richiamo p { color: rgba(255,255,255,.9); max-width: 34rem; margin-inline: auto; }
.richiamo__azioni { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.8rem; }

/* ------------------------------------------------------ 18. Banner cookie */
.cookie {
  position: fixed; inset: auto 0 0; z-index: 300;
  padding: clamp(.75rem, 2vw, 1.25rem);
  display: flex; justify-content: center;
  animation: cookie-entra 280ms cubic-bezier(.2, .8, .3, 1);
}
@keyframes cookie-entra { from { transform: translateY(12px); opacity: 0; } }
.cookie[hidden] { display: none; }
.cookie__riquadro {
  position: relative;
  width: min(100%, 44rem);
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-alta);
  padding: 1.4rem 1.6rem 1.5rem;
}
.cookie__titolo {
  font-size: 1.15rem; margin: 0 2rem .5rem 0;
}
.cookie__testo { font-size: .93rem; color: var(--testo-tenue); margin: 0 0 1.1rem; }
.cookie__azioni { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
/* Accettare e rifiutare devono avere pari evidenza (Linee guida del Garante,
   10 giugno 2021): stesso stile, stessa dimensione, stesso peso visivo.
   Nessuno dei due e' valorizzato rispetto all'altro. */
.cookie__azioni .bottone,
.cookie__azioni .bottone--pieno,
.cookie__azioni .bottone--vuoto {
  flex: 0 0 auto; min-width: 9.5rem; justify-content: center;
  background: #fff; color: var(--blu-scuro);
  border: 1.5px solid var(--blu); font-weight: 600;
}
.cookie__azioni .bottone:hover {
  background: var(--blu); color: #fff; border-color: var(--blu);
  transform: none; box-shadow: none;
}
.cookie__dettagli { font-size: .9rem; font-weight: 550; margin-left: auto; }
.cookie__chiudi {
  position: absolute; top: .55rem; right: .7rem;
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--testo-lieve);
  transition: var(--transizione);
}
.cookie__chiudi:hover { background: var(--sfondo-alt); color: var(--testo); }
@media (max-width: 560px) {
  .cookie__azioni .bottone { flex: 1 1 100%; }
  .cookie__dettagli { margin: .3rem auto 0; }
}

.pie__preferenze {
  font: inherit; color: rgba(255,255,255,.88); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.3); text-underline-offset: .18em;
}
.pie__preferenze:hover { color: #fff; text-decoration-color: currentColor; }

.video__anteprima--mappa { gap: 1rem; }
.video__anteprima--mappa .bottone { position: relative; }

/* ---------------------------------------------------- 18b. Volantino evento */
/* Un solo lightbox condiviso da tutta la pagina: i pulsanti "Vedi il
   volantino" ne popolano src/href via JS invece di duplicare un dialog per
   ogni evento (vedi sito.js). */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }
.lightbox__sfondo {
  position: absolute; inset: 0; background: rgba(21, 30, 46, .82);
  backdrop-filter: blur(2px); animation: lightbox-vela 200ms ease;
}
@keyframes lightbox-vela { from { opacity: 0; } }
.lightbox__contenuto {
  position: relative; max-width: min(100%, 640px); max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  animation: lightbox-entra 220ms cubic-bezier(.2, .8, .3, 1);
}
@keyframes lightbox-entra { from { transform: scale(.96); opacity: 0; } }
.lightbox__img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  border-radius: var(--raggio); box-shadow: 0 20px 60px rgba(10, 20, 40, .45);
  background: #fff;
}
.lightbox__chiudi {
  position: absolute; top: -46px; right: -6px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.1);
  color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: var(--transizione);
}
.lightbox__chiudi:hover { background: #fff; color: var(--blu-scuro); border-color: #fff; }
.lightbox__scarica {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; font-size: .9rem; font-weight: 600; text-decoration: none;
  padding: .6rem 1.1rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.4);
  transition: var(--transizione);
}
.lightbox__scarica:hover { background: #fff; color: var(--blu-scuro); border-color: #fff; }
@media (max-width: 480px) {
  .lightbox__chiudi { top: -50px; right: 0; }
}

/* ----------------------------------------------------------- 19. Tabelle */
.tabella-avvolta { overflow-x: auto; margin: 1.6em 0; }
.tabella {
  width: 100%; border-collapse: collapse; font-size: .92rem;
  min-width: 34rem;
}
.tabella th, .tabella td {
  text-align: left; vertical-align: top;
  padding: .75rem .9rem; border-bottom: 1px solid var(--bordo);
}
.tabella th {
  font-weight: 650; color: var(--blu-scuro); background: var(--sfondo-blu);
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 2px solid var(--bordo);
}
.tabella tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------ 20. Moduli */
.modulo {
  background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 1.6rem 1.7rem 1.7rem; display: grid; gap: 1.1rem;
}
.campo { display: grid; gap: .4rem; }
.campo-doppio { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 420px) { .campo-doppio { grid-template-columns: 1fr; } }
.campo label { font-size: .92rem; font-weight: 600; color: var(--blu-scuro); }
.campo__nota { font-weight: 400; color: var(--testo-lieve); font-size: .85em; }
.campo input[type="text"], .campo input[type="email"] {
  font: inherit; font-size: 1rem; padding: .7rem .9rem;
  border: 1.5px solid var(--bordo); border-radius: var(--raggio-s);
  background: var(--sfondo-alt); color: var(--testo);
  transition: var(--transizione); width: 100%;
}
.campo input:focus { background: #fff; border-color: var(--blu-chiaro); }
.campo--scelta {
  grid-template-columns: auto 1fr; align-items: start; gap: .7rem;
}
.campo--scelta input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--blu); }
.campo--scelta label { font-weight: 400; font-size: .89rem; color: var(--testo-tenue); line-height: 1.55; }
.modulo .bottone { justify-content: center; }
.avviso-modulo {
  font-size: .92rem; color: var(--testo-tenue);
  border-left: 3px solid var(--verde); padding-left: 1rem;
}

/* --------------------------------------------------------- 21. Onda decor */
.onda { display: block; width: 100%; height: auto; color: var(--sfondo-alt); }
.onda--blu { color: var(--sfondo-blu); }

/* ------------------------------------------------------------ 19. Stampa */
@media print {
  .intestazione, .pie, .sezione-filtri, .filtri, .video, .eroe__sfondo, .apri-menu { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .eroe { color: #000; }
  .eroe h1 { color: #000; text-shadow: none; }
  .eroe::after { display: none; }
  a { text-decoration: underline; }
  .prosa a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}