/* =====================================================================
   Cultura per Crescere Asti — sito pubblico
   Mobile-first. Un blocco = un'idea, come sul sito di riferimento VCO.
   ===================================================================== */

/* I sette colori della palette ufficiale, con i nomi che avevano nel file:
   Color 1 · Color 2 · testo · cxc 1 · cxc 2 · blue · text.
   I quattro sotto sono derivati, e solo perché servono stati che la palette
   non prevede: rosa e azzurro scuri per hover e link (alla tinta piena non
   resterebbe contrasto sufficiente) e due velature chiare per le etichette.
   Tutto il resto deve pescare da qui. */
:root {
  --bianco: #fff;        /* Color 1 */
  --bordo: #e0e0e0;      /* Color 2 */
  --tenue: #595959;      /* testo   */
  --rosa: #e52a7b;       /* cxc 1   */
  --azzurro: #179dd8;    /* cxc 2   */
  --blu: #004188;        /* blue    */
  --inchiostro: #212934; /* text    */

  --rosa-scuro: #c01f66;
  --azzurro-scuro: #0f7aab;
  --rosa-tenue: #fdeef5;
  --azzurro-tenue: #eaf6fc;

  /* Le due tinte per il testo bianco sopra un fondo pieno.
     Il rosa della palette con sopra il bianco dà 4.24:1, e per il testo
     normale ne servono 4.5. Non è un cavillo: a quel rapporto, un pulsante
     letto di sbieco o su uno schermo al sole diventa una macchia. Scurendolo
     appena — un rosa che accanto all'originale non si distingue — si arriva a
     4.83. Stesso ragionamento per l'azzurro pieno, che partiva da 3.07.
     Il --rosa e l'--azzurro originali restano per tutto il resto: strisce,
     sfumature, bordi, marchio, dove non c'è testo sopra. */
  --rosa-piena: #d62470;      /* bianco sopra: 4.83:1 */
  --azzurro-pieno: #0f7aab;   /* bianco sopra: 4.78:1 */

  /* I titoli grandi hanno una soglia più bassa (3:1), ma l'azzurro della
     palette sul grigio dei blocchi si ferma a 2.91: manca per un soffio.
     Questo è lo stesso azzurro appena scurito, indistinguibile a occhio,
     che passa su bianco e su grigio. */
  --azzurro-titolo: #1590c8;  /* su bianco 3.59:1 · su #f9f9f9 3.41:1 */

  /* Il fondo neutro del sito. È lo stesso #f9f9f9 che usa il footer del sito
     attuale: così i blocchi e il piè di pagina stanno sulla stessa scala di
     grigi, invece di alternare un crema caldo a un grigio freddo. */
  --grigio: #f9f9f9;
  --grigio-bordo: #ececec;
  --crema: #f9f9f9;

  /* Un raggio solo per tutti i campi: menù a tendina, caselle di testo,
     pulsanti. Prima erano 12, 14 e 999px e si vedeva. */
  --raggio: 10px;
  --raggio-grande: 24px;
  --ombra: 0 2px 8px rgb(44 42 51 / 6%), 0 12px 32px rgb(44 42 51 / 5%);
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --misura: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { 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);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--inchiostro);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* I titoli non sono mai neri: prendono l'azzurro della palette.
   Sotto il corpo grande l'azzurro chiaro perde contrasto sul bianco, quindi
   i titoli piccoli (h3 e h4: quelli dentro card, box ed elenchi) passano al
   blu scuro, che è lo stesso colore letto più fitto. */
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .75rem; font-weight: 800; letter-spacing: -.015em; }
h1, h2 { color: var(--azzurro-titolo); }
h3, h4 { color: var(--blu); }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-bottom: 1rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
a { color: var(--azzurro-scuro); }

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

/* Un titolo che c'è per chi ascolta la pagina e non per chi la guarda.
   Serve quando la struttura visiva rende ovvio un passaggio che, letto a voce,
   sparisce: un elenco di schede sotto un titolo di pagina, per esempio.
   Non si usa display:none né visibility:hidden — quelli tolgono l'elemento
   anche ai lettori di schermo, che è l'opposto di quello che serve qui. */
.solo-lettori {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}

.salta { position: absolute; left: -9999px; }
.salta:focus {
  left: 1rem; top: 1rem; z-index: 100;
  background: var(--bianco); padding: .7rem 1.2rem;
  border-radius: var(--raggio); box-shadow: var(--ombra);
}

.contenitore { width: 100%; max-width: 1248px; margin-inline: auto; padding-inline: 1.5rem; }
/* La colonna di testo parte dal bordo sinistro come tutto il resto della
   pagina, e arriva a 860px.

   Ci sono volute due correzioni per arrivarci. All'inizio era appoggiata a
   sinistra ma larga 640px: su uno schermo da 1440 lasciava mezza pagina
   bianca a destra, e sembrava un errore. Centrandola il vuoto è diventato
   simmetrico, ma si è rotto l'allineamento con tutto quello che sta sopra e
   sotto — la testata, le card, i richiami — che partono dal bordo del
   contenitore: su «Il progetto in sintesi» il titolo era a sinistra e il
   testo rientrava, come una pagina impaginata male.

   Così: stesso bordo sinistro degli altri blocchi, e una misura abbastanza
   larga da non lasciare il buco. Le righe sono più lunghe del canone
   tipografico — intorno ai 90 caratteri invece di 75 — ed è il prezzo
   dell'allineamento: su una pagina dove ogni sezione comincia sulla stessa
   verticale si legge meglio una riga lunga che una colonna che balla. */
.contenitore--stretto > * { max-width: 860px; }
/* Ripetuto e non «100%»: .testo ha la sua misura (68ch) con una specificità
   che batterebbe la riga qui sopra, e il blocco tornerebbe stretto. */
.contenitore--stretto .testo { max-width: 860px; }

/* --- intestazione ---------------------------------------------------- */
.sito-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / 94%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bordo);
}
/* Sul telefono niente sfocatura: è l'effetto più caro che esista da calcolare,
   e su un'intestazione appiccicata in cima il browser lo rifà a ogni pixel di
   scorrimento. Si sente come lentezza dappertutto, menù compreso. Fondo pieno
   e via: a quella larghezza sotto l'intestazione non passa quasi niente, e la
   sfocatura non si vedeva comunque. */
@media (max-width: 899.98px) {
  .sito-header { backdrop-filter: none; background: var(--bianco); }
}
.header-riga {
  display: flex; align-items: center; gap: 1rem;
  padding-block: 1rem;
}
.sito-logo {
  display: flex; align-items: center;
  font-weight: 800; text-decoration: none; line-height: 1.05;
  color: var(--rosa); font-size: 1.15rem;
}
/* Il marchio è un'immagine sola: porta già dentro la scritta «Cultura per
   Crescere Asti», quindi accanto non va ripetuta a testo. */
.sito-logo img { height: 58px; width: auto; }
/* Sul telefono il marchio è il solo elemento di identità visibile: 5% in più
   di quello che era, per non farlo sparire accanto alle tre righe. */
@media (max-width: 899.98px) { .sito-logo img { height: 48px; } }
.sito-logo span { display: block; font-size: .6rem; letter-spacing: .28em; color: var(--azzurro); }

/* Le tre righe, e la croce quando è aperto.
   Niente riquadro intorno: il simbolo si riconosce da solo, e un bordo in
   quell'angolo tira l'occhio più del marchio. Il quadrato di 44px resta,
   invisibile: è la misura minima perché un dito lo prenda senza mirare. */
.menu-apri {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: var(--raggio);
  color: var(--inchiostro); cursor: pointer;
}
/* La croce sta nel documento sempre, ma si vede solo a menù aperto: le due
   icone si scambiano guardando aria-expanded, così il disegno non può dire
   una cosa diversa da quella che il pulsante dichiara. Più piccola delle tre
   righe perché una X piena di quella misura pesa il doppio. */
.menu-apri .icona-chiudi { display: none; }
.menu-apri[aria-expanded="true"] .icona-righe { display: none; }
.menu-apri[aria-expanded="true"] .icona-chiudi { display: block; }
@media (min-width: 900px) { .menu-apri { display: none; } }

.sito-menu { margin-left: auto; }
.sito-menu > ul { list-style: none; display: flex; gap: .3rem; margin: 0; padding: 0; flex-wrap: wrap; }
.sito-menu ul { list-style: none; margin: 0; padding: 0; }
.sito-menu a {
  display: block; padding: .5rem .8rem; border-radius: var(--raggio);
  text-decoration: none; color: var(--inchiostro); font-weight: 600; font-size: .95rem;
}
.sito-menu a:hover { background: var(--crema); }
.sito-menu a[aria-current="page"] { background: var(--rosa-piena); color: var(--bianco); }

.menu-voce { position: relative; }
.sito-menu .sottomenu {
  padding: .4rem;
  display: none; position: absolute; left: 0; top: 100%;
  min-width: 15rem; background: var(--bianco);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra); z-index: 60;
}
.sito-menu .sottomenu.aperto { display: block; }

/* La voce che nasconde altre pagine è un pulsante, dentro e fuori dal
   telefono: si apre toccandola o cliccandola, mai passandoci sopra col mouse.
   Il passaggio del mouse apriva tendine per sbaglio a chi attraversava la
   barra per arrivare altrove, e su uno schermo tattile non esiste proprio.
   La pagina della voce non si perde: quando serve è la prima del sottomenù. */
.menu-voce--con-figli > .voce-link { display: none; }
.voce-apri {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .8rem; border: 0; background: none; border-radius: var(--raggio);
  font: inherit; font-weight: 600; font-size: .95rem;
  color: var(--inchiostro); cursor: pointer;
}
.voce-apri:hover { background: var(--crema); }
.voce-apri .segno-piu { color: var(--tenue); }
.voce-apri[aria-expanded="true"] { background: var(--crema); }
.voce-apri[aria-expanded="true"] .segno-piu { transform: rotate(45deg); }

/* Il menù sul telefono: un elenco corto, e le sezioni si aprono a richiesta.
   Le voci che nascondono altre pagine portano un «+»: si vede subito che
   sotto c'è dell'altro, senza doverlo provare. Se ne apre una alla volta —
   due elenchi aperti su una colonna stretta spingono il resto fuori dallo
   schermo, e si perde il filo di dove si era. */
@media (max-width: 899.98px) {
  .sito-menu {
    display: none; width: 100%; margin-left: 0;
    padding-bottom: .5rem;
  }
  /* Il menù aperto scorre per conto suo, invece di allungare la pagina:
     aprendo un sottomenù il resto non viene spinto giù, e la voce che si è
     appena toccata resta dov'era. */
  .sito-menu.aperto {
    display: block;
    max-height: calc(100vh - 6rem); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sito-menu > ul { flex-direction: column; gap: 0; }
  /* Niente attesa fra il dito e la reazione. */
  .menu-apri, .voce-apri, .sito-menu a { touch-action: manipulation; }

  /* Una riga fra una sezione e l'altra. Sulla prima no: sopra c'è già il
     bordo dell'intestazione. */
  .sito-menu > ul > li + li { border-top: 1px solid var(--bordo); }
  .sito-menu > ul > li > a { padding: .85rem .2rem; border-radius: 0; }

  /* Sul telefono la voce occupa tutta la riga e il «+» va a fondo destra. */
  .voce-apri {
    display: flex; justify-content: space-between; width: 100%; gap: 1rem;
    padding: .85rem .2rem; border-radius: 0; text-align: left;
  }
  .voce-apri:hover, .voce-apri[aria-expanded="true"] { background: none; }
  .voce-apri .segno-piu { flex: 0 0 auto; }

  .sito-menu .sottomenu {
    position: static;
    border: 0; box-shadow: none; padding: 0 0 .6rem 1rem;
    min-width: 0;
  }
  .sito-menu .sottomenu a {
    padding: .5rem .2rem; border-radius: 0;
    font-weight: 500; font-size: .9rem; color: var(--tenue);
  }
  /* La voce corrente non prende il fondo pieno: su una colonna stretta
     sembrerebbe un pulsante. Basta il colore e una barretta a sinistra. */
  .sito-menu a[aria-current="page"] {
    background: none; color: var(--rosa-scuro);
    box-shadow: inset 3px 0 0 var(--rosa-piena); padding-left: .8rem;
  }

  .header-riga { flex-wrap: wrap; }
}

/* --- blocchi --------------------------------------------------------- */
.blocco { padding-block: clamp(3rem, 7vw, 5.5rem); }
.blocco > .contenitore > :last-child { margin-bottom: 0; }

/* Alternanza bianco / grigio chiarissimo: separa le sezioni senza colorarle.
   «rosa» resta come nome per i blocchi già salvati nel database, ma non è più
   rosa: cambiare qui evita di dover riscrivere i contenuti. */
.sfondo-chiaro   { background: var(--bianco); }
.sfondo-crema    { background: var(--grigio); }
.sfondo-grigio   { background: var(--grigio); }
.sfondo-rosa     { background: var(--grigio); }
.sfondo-azzurro  { background: var(--grigio); }

/* Due blocchi di seguito sullo stesso fondo si leggono come una sezione sola:
   il doppio margine interno diventa un buco. Qui si accorcia lo stacco fra
   loro — restano separati, ma senza il vuoto. */
:is(.sfondo-crema, .sfondo-grigio, .sfondo-rosa, .sfondo-azzurro)
  + :is(.sfondo-crema, .sfondo-grigio, .sfondo-rosa, .sfondo-azzurro),
.sfondo-chiaro + .sfondo-chiaro {
  padding-top: 1rem;
}
:is(.sfondo-crema, .sfondo-grigio, .sfondo-rosa, .sfondo-azzurro):has(
  + :is(.sfondo-crema, .sfondo-grigio, .sfondo-rosa, .sfondo-azzurro)),
.sfondo-chiaro:has(+ .sfondo-chiaro) {
  padding-bottom: 1rem;
}

.occhiello {
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .75rem; font-weight: 800; color: var(--azzurro-scuro);
  margin: 0 0 .5rem;
}
.testo { max-width: var(--misura); }
.testo > :last-child { margin-bottom: 0; }
.testo ul, .testo ol { padding-left: 1.2rem; }
.testo li { margin-bottom: .35rem; }

/* --- pulsanti -------------------------------------------------------- */
/* Non più a pastiglia: 12px è circa la metà del raggio che serviva a
   chiudere il fianco, e il bordo interno è più stretto. Vale per tutti i
   pulsanti del sito, non solo per quelli dell'hero: due forme diverse per lo
   stesso comando si leggerebbero come un errore. */
.bottone {
  display: inline-block; padding: .55rem 1.15rem;
  border-radius: var(--raggio); border: 2px solid transparent;
  font-weight: 700; font-size: .95rem; text-decoration: none;
  cursor: pointer; transition: transform .12s ease, background-color .12s ease;
}
.bottone:hover { transform: translateY(-1px); }
.bottone--rosa    { background: var(--rosa-piena); color: var(--bianco); }
.bottone--rosa:hover { background: var(--rosa-scuro); }
.bottone--azzurro { background: var(--azzurro-pieno); color: var(--bianco); }
.bottone--azzurro:hover { background: var(--azzurro-scuro); }
.bottone--vuoto   { border-color: var(--rosa); color: var(--rosa-scuro); background: transparent; }
.bottone--vuoto:hover { background: var(--rosa-piena); color: var(--bianco); }

.fila-bottoni { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

/* --- hero ------------------------------------------------------------ */
.hero .sommario { font-size: 1.12rem; }
.hero-contenuto { max-width: 1248px; }
.hero .fila-bottoni { margin-top: 2rem; }

/* Senza foto: è la testata delle pagine interne, definita più sotto
   insieme a .scheda-testata perché le due devono restare identiche. */
.hero--liscio h1 { color: var(--azzurro-titolo); }

/* Con la foto: immagine a tutta larghezza e testo sopra, come sul sito VCO.
   «isolation» crea un contesto di impilamento tutto suo, così gli z-index
   negativi qui dentro non finiscono dietro allo sfondo della pagina. */
.hero--foto {
  position: relative; isolation: isolate;
  display: grid; align-items: center;
  min-height: min(76vh, 660px);
  /* sotto, lo spazio in più tiene i pulsanti sopra le onde */
  padding-block: clamp(3.5rem, 9vw, 6rem) calc(clamp(3.5rem, 9vw, 6rem) + 90px);
}
.hero-sfondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* La velatura serve a leggere: la foto da sola non garantisce contrasto,
   e cambiandola cambierebbe anche la leggibilità del titolo. Scura a
   sinistra, dove sta il testo, trasparente a destra.

   Era più scura: 76% a sinistra e 6% a destra, cioè velata dappertutto. Il
   coordinamento ha scritto che «le foto sono molto belle ma quasi
   invisibili», e aveva ragione: la metà destra, dove testo non ce n'è, non
   aveva motivo di stare sotto un velo.

   Ora cala a zero, e dove il testo c'è resta al 62%: sopra una fotografia
   bianchissima il bianco del titolo tiene 4,8:1, oltre il 4,5 che serve.
   Il testo arriva al massimo a 40rem dal bordo del contenitore, cioè
   intorno alla metà dello schermo: è lì che la velatura si apre. */
.hero--foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgb(11 20 32 / 66%) 0%,
    rgb(11 20 32 / 62%) 44%,
    rgb(11 20 32 / 26%) 64%,
    rgb(11 20 32 / 0%) 88%);
}
/* La testata bassa: stessa altezza delle sezioni di elenco, perché la
   fotografia che ci va è una striscia e in un hero alto si taglierebbe.
   Le onde restano, più corte: sono il segno della casa. */
.hero--banda {
  min-height: 340px;
  padding-block: 3rem calc(3rem + 40px);
}
.hero--banda .hero-onde { height: 70px; }
.hero--banda h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
@media (max-width: 699.98px) {
  .hero--banda { min-height: 0; padding-block: 2.5rem calc(2.5rem + 30px); }
}

/* Il testo sta sopra alle onde: gli si dà un piano suo, altrimenti l'ultima
   onda, che è bianca piena, gli passerebbe davanti. */
.hero--foto .hero-contenuto { position: relative; z-index: 1; }
.hero-onde {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: 140px; display: block; pointer-events: none;
}
@media (max-width: 699.98px) { .hero-onde { height: 80px; } }
.hero--foto h1 { color: var(--bianco); text-wrap: balance; }
/* .92 e non .85: l'occhiello è piccolo e in maiuscolo, quindi gli serve il
   4,5:1 pieno. Con la velatura alleggerita, a .85 scendeva a 4,28. */
.hero--foto .occhiello { color: var(--bianco); opacity: .92; }
.hero--foto .sommario { color: rgb(255 255 255 / 92%); max-width: 44ch; }
.hero--foto .hero-contenuto { max-width: 1248px; }
.hero--foto .hero-contenuto > * { max-width: 40rem; }
@media (max-width: 699.98px) {
  /* Su schermo stretto il testo copre quasi tutta la foto: meglio una
     velatura piena, altrimenti le ultime righe finiscono sul chiaro. */
  .hero--foto::after { background: rgb(11 20 32 / 66%); }
}

/* --- griglia di card ------------------------------------------------- */
.griglia { display: grid; gap: 1.5rem; }
.griglia--2 { grid-template-columns: 1fr; }
.griglia--3 { grid-template-columns: 1fr; }
.griglia--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .griglia--2, .griglia--3, .griglia--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .griglia--3 { grid-template-columns: repeat(3, 1fr); }
  .griglia--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--bianco); border: 1px solid var(--bordo);
  border-radius: var(--raggio-grande); padding: 1.75rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--tenue); font-size: .95rem; }

/* --- box delle aree tematiche ----------------------------------------
   La fotografia riempie la testa del riquadro: nessun margine sopra né ai
   lati, come una copertina. È il riquadro stesso a ritagliarla, con
   overflow:hidden, così segue i suoi angoli arrotondati.
   -------------------------------------------------------------------- */
.box-area {
  position: relative; display: block; text-decoration: none; color: inherit;
  border-radius: var(--raggio-grande); overflow: hidden;
  background: var(--bianco); border: 1px solid var(--bordo);
  padding: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.box-area:hover { transform: translateY(-3px); box-shadow: var(--ombra); }
/* «cover» e non «contain»: le fotografie sono già tagliate in 3:2, quindi non
   perdono niente, ma se un domani ne entrasse una di formato diverso
   riempirebbe lo spazio invece di lasciare due bande bianche ai lati. */
.box-area img {
  display: block; width: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 0;
}
.box-area .senza-foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--colore) 22%, white), transparent 60%),
    radial-gradient(circle at 75% 70%, color-mix(in srgb, var(--colore) 14%, white), transparent 55%),
    var(--crema);
}
/* Sotto la fotografia niente filetto: fra una foto a tutta larghezza e il
   testo il confine si vede già, e una riga in più sarebbe rumore. Resta
   l'aria, che è quella che rende leggibile il titolo. */
.box-area .etichetta {
  /* è uno <span>: senza display block i margini verticali non fanno nulla */
  display: block;
  margin: 0; padding: 20px 24px 24px;
}
.box-area .etichetta strong { display: block; font-size: 1.05rem; color: var(--blu); }
.box-area .etichetta span { font-size: .8rem; color: var(--tenue); }
/* la fascia colorata rende riconoscibile l'area anche senza immagine */
.box-area::before {
  content: ""; position: absolute; inset: 0 0 auto;
  height: 6px; background: var(--colore, var(--rosa));
}

/* --- eventi ---------------------------------------------------------- */
.evento-card {
  background: var(--bianco); border: 1px solid var(--bordo);
  border-radius: var(--raggio-grande); overflow: hidden;
  display: flex; flex-direction: column;
  /* la velina del link sta dentro questi confini */
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/*
 * Tutta la scheda porta all'evento, non solo il titolo: su un telefono la
 * foto è il bersaglio grande e naturale, e chi la tocca si aspetta che
 * succeda qualcosa. Il link però resta uno solo — questa è la sua ombra
 * stesa sopra al riquadro.
 */
.evento-card .evento-link::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
}
.evento-card:hover {
  border-color: var(--azzurro); box-shadow: 0 6px 18px rgb(0 0 0 / .07);
  transform: translateY(-2px);
}
.evento-card:hover .evento-link { color: var(--rosa-scuro); }

/* Con la tastiera il contorno va attorno a tutta la scheda, non attorno alle
   tre parole del titolo: è la scheda intera che si sta per aprire. */
@supports selector(:has(*)) {
  .evento-card:has(.evento-link:focus-visible) {
    outline: 3px solid var(--azzurro-pieno); outline-offset: 2px;
  }
  /* si toglie solo qui: dove :has() non c'è, il contorno del titolo resta
     l'unico segnale di dove si è, e toglierlo lascerebbe ciechi */
  .evento-card .evento-link:focus-visible { outline: none; }
}

/* Chi ha chiesto meno movimento non lo subisce. */
@media (prefers-reduced-motion: reduce) {
  .evento-card { transition: none; }
  .evento-card:hover { transform: none; }
}
/*
 * Le locandine sono fogli A4, sempre: è il formato con cui gli enti le
 * disegnano e le stampano. Ritagliarle in orizzontale — com'era prima, 3:2 —
 * voleva dire tagliare via metà del manifesto, di solito proprio la parte con
 * data, luogo e contatti, che stanno in fondo. Il riquadro ora ha le
 * proporzioni di un A4 in piedi (1 : 1,414).
 *
 * «contain» e non «cover»: un A4 dentro un riquadro A4 lo riempie esatto, ma
 * se qualcuno carica una fotografia orizzontale si vede tutta, con due
 * bande chiare ai lati, invece di essere tagliata a metà. Meglio una banda
 * che un titolo mozzato.
 */
.evento-card img {
  width: 100%; aspect-ratio: 1 / 1.4142;
  object-fit: contain; background: var(--crema);
}
/* Il riquadro «senza foto» resta basso: l'altezza di un A4 serve a far
   leggere una locandina, e dove locandina non c'è sarebbe mezzo schermo di
   grigio. */
.evento-card .senza-foto {
  aspect-ratio: 3 / 2; background: var(--crema);
  display: grid; place-items: center; color: var(--tenue); font-size: .8rem;
}

/*
 * La locandina nella pagina dell'evento o della news. Senza un limite, un A4
 * largo quanto la colonna diventa alto mille pixel e si porta via lo schermo
 * intero: si scorre tutto il manifesto prima di arrivare a una riga di testo.
 */
.foto-locandina {
  display: block; width: 100%; max-width: 420px; height: auto;
  border-radius: var(--raggio-grande);
  margin-bottom: 1.5rem;
  background: var(--crema);
}
.evento-corpo { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.evento-corpo h3 { margin: 0; font-size: 1.05rem; }
.evento-corpo h3 a { color: var(--blu); text-decoration: none; }
.evento-corpo h3 a:hover { color: var(--rosa-scuro); }
/* Rosa scuro e non il rosa pieno: la data è piccola (.92rem) e in grassetto,
   quindi le serve il 4,5:1. Il rosa della palette su bianco si ferma a 4,24.
   Non si vedeva perché in questo periodo la home non aveva appuntamenti da
   mostrare: sono tornati con il recupero dei recenti, e con loro il problema. */
.evento-quando { font-weight: 700; color: var(--rosa-scuro); font-size: .92rem; }
/* «già passato» accanto alla data: grigio e in tondo, perché è una nota, non
   un'etichetta da leggere prima del titolo. Serve quando il coordinamento
   accende il recupero degli appuntamenti recenti. */
.evento-finito {
  display: inline-block; margin-left: .4rem;
  padding: .05rem .45rem;
  border: 1px solid var(--bordo); border-radius: 999px;
  font-weight: 500; font-size: .78rem; color: var(--tenue);
  background: var(--bianco);
  vertical-align: .05em;
}
.evento-dove { color: var(--tenue); font-size: .9rem; }
.evento-tag {
  display: inline-block; margin-top: .4rem; padding: .12rem .6rem;
  border-radius: var(--raggio); background: var(--azzurro-tenue); color: var(--azzurro-scuro);
  font-size: .72rem; font-weight: 700;
}

/* scorrevole su mobile, griglia da tablet in su */
.eventi-scorrevoli {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
  gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .75rem; margin-inline: -1.25rem; padding-inline: 1.25rem;
  scrollbar-width: thin;
}
.eventi-scorrevoli > * { scroll-snap-align: start; }
@media (min-width: 700px) {
  .eventi-scorrevoli { grid-auto-columns: 44%; }
}
/* Da mille pixel in su resta un nastro — tre schede e mezza in vista, così
   la mezza dice che ce n'è altre — invece di diventare una griglia a tre
   colonne. Con otto appuntamenti la griglia faceva tre file e spingeva
   «Scopri tutti gli appuntamenti» fuori dallo schermo: è la cosa che il
   coordinamento ha chiesto di togliere. */
@media (min-width: 1000px) {
  /* Niente più sbordo ai lati: serviva sul telefono, perché le schede
     arrivassero al bordo dello schermo. Qui il nastro sta dentro al
     contenitore, e comincia da zero — se no la prima freccia nasce accesa
     con venti pixel già scorsi. */
  .eventi-scorrevoli {
    grid-auto-columns: 30%;
    margin-inline: 0; padding-inline: 0;
  }
}

/* --- il nastro e le sue frecce ---------------------------------------
   Le frecce stanno sopra al nastro, mezze dentro e mezze fuori. Le mette
   il JavaScript solo quando c'è davvero qualcosa oltre il bordo: su tre
   eventi comparirebbero e non servirebbero a niente.
   -------------------------------------------------------------------- */
.nastro { position: relative; }
/* La freccia è fucsia, non bianca: bianca su una scheda bianca si vedeva
   solo per l'ombra, e in cima alla home — dove il nastro sta su fondo
   chiaro — scompariva del tutto. Il rosa pieno della palette la stacca da
   qualunque sfondo le capiti sotto, e il bianco sopra tiene il contrasto
   (4.83:1). Il cerchio bianco intorno le fa da stacco quando passa sopra
   una fotografia: senza, il fucsia su una foto scura si confonde. */
.nastro-freccia {
  position: absolute; top: calc(50% - 1.5rem); z-index: 2;
  width: 48px; height: 48px;           /* la misura che un dito prende */
  display: grid; place-items: center;
  border: 3px solid var(--bianco); border-radius: 999px;
  background: var(--rosa-piena); color: var(--bianco);
  box-shadow: 0 2px 6px rgb(33 41 52 / 18%), 0 8px 20px rgb(33 41 52 / 14%);
  cursor: pointer;
  font-size: 1.35rem; font-weight: 700; line-height: 1;
  transition: background .15s ease, opacity .15s ease, transform .15s ease;
}
.nastro-freccia--indietro { left: -16px; }
.nastro-freccia--avanti   { right: -16px; }
.nastro-freccia:hover { background: var(--rosa-scuro); transform: scale(1.06); }
.nastro-freccia:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 2px; }
/* Arrivati al capo, la freccia si spegne invece di sparire: se sparisse,
   l'altra salterebbe di posto e il dito tornerebbe sul vuoto. Spenta resta
   comunque leggibile — è un pulsante disattivato, non un fantasma. */
.nastro-freccia[disabled] {
  background: var(--bordo); color: var(--tenue);
  opacity: 1; cursor: default; box-shadow: none; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .nastro-freccia:hover { transform: none; }
}
/* Il nastro prende il fuoco con Tab: lo si deve vedere. */
.eventi-scorrevoli:focus-visible { outline: 3px solid var(--azzurro); outline-offset: 4px; }
@media (max-width: 999.98px) {
  /* Sul telefono si scorre col dito: le frecce sarebbero solo ingombro. */
  .nastro-freccia { display: none; }
}

/* --- elenco enti ----------------------------------------------------- */
.ente-card {
  background: var(--bianco); border: 1px solid var(--bordo);
  border-radius: var(--raggio-grande); padding: 1.6rem 1.6rem 1.4rem;
  display: flex; flex-direction: column; gap: .55rem;
  position: relative; overflow: hidden;
}
/* Non tutti gli enti hanno il logo: la fascia in cima tiene ordinata la
   griglia anche quando lo spazio dell'immagine resta vuoto. */
.ente-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 5px;
  background: linear-gradient(90deg, var(--rosa), var(--azzurro));
}
.ente-card > :first-child { margin-top: .4rem; }
/* Il logo è il modo più veloce per riconoscere un ente: gli si dà una fascia
   fissa, circa il 60% dell'altezza della scheda, e ci sta dentro intero
   («contain») qualunque sia la sua forma. Le schede senza logo — oggi la
   maggioranza — partono direttamente dal nome: la griglia le pareggia
   comunque in altezza riga per riga. */
.ente-logo {
  height: 163px; width: 100%;
  object-fit: contain; object-position: left center;
  margin-bottom: .2rem;
}
/* Il logo sale di 20px: sopra di lui basta l'aria della fascia colorata.
   Le schede senza logo restano come sono, il titolo non deve incollarsi. */
.ente-card > .ente-logo:first-child { margin-top: -20px; }
.ente-card h3 { margin: 0; font-size: 1.02rem; }
.ente-card h3 a { color: var(--blu); text-decoration: none; }
/* Tutta la scheda porta all'ente, non solo il nome: chi guarda una griglia di
   riquadri clicca il riquadro, e prendere la mira sulle due parole del titolo
   è un ostacolo inutile, soprattutto col dito su un telefono.
   Si allarga il collegamento che c'è già invece di avvolgere tutto in un <a>:
   così resta un solo collegamento, con il nome dell'ente come testo — che è
   quello che leggono i lettori di schermo e i motori di ricerca. */
.ente-card h3 a::after { content: ""; position: absolute; inset: 0; }
.ente-card { transition: border-color .15s, box-shadow .15s, transform .15s; }
.ente-card:hover, .ente-card:focus-within {
  border-color: var(--azzurro);
  box-shadow: 0 4px 14px rgb(0 0 0 / .07);
  transform: translateY(-2px);
}
.ente-card:hover h3 a, .ente-card:focus-within h3 a { color: var(--azzurro-scuro); }
/* Chi non usa il mouse deve vedere dove si trova: il contorno va sulla
   scheda, perché il collegamento vero è alto quanto una riga di testo. */
.ente-card h3 a:focus-visible { outline: none; }
.ente-card:focus-within { outline: 2px solid var(--azzurro); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ente-card { transition: none; }
  .ente-card:hover, .ente-card:focus-within { transform: none; }
}
.ente-aree { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: 30px; }
.pillola {
  font-size: .72rem; font-weight: 700; padding: .15rem .6rem;
  border-radius: var(--raggio); background: var(--crema); color: var(--tenue);
}

/* «A chi si rivolge»: le fasce d'età sono l'informazione che un genitore
   cerca per prima, e nella pillola piccola e grigia si perdevano — per giunta
   su un riquadro dello stesso grigio, così non si distingueva nemmeno il
   contorno. Corpo più grande, velatura azzurra e un bordo che la stacca dal
   fondo. Il testo in blu: sulla velatura fa 9:1, si legge anche di sbieco. */
.pillole--target { gap: .45rem; }
.pillole--target .pillola {
  font-size: .88rem; padding: .3rem .8rem;
  background: var(--azzurro-tenue); color: var(--blu);
  border: 1px solid #a8d9f0;
}

/* --- FAQ ------------------------------------------------------------- */
/* Il gruppo è chiuso di suo: si vede l'indice delle sezioni, si apre quella
   che serve. Con trenta domande aperte tutte insieme, su un telefono la
   pagina diventa impraticabile. */
.faq-gruppo {
  margin-bottom: .75rem;
  border: 1px solid var(--bordo); border-radius: var(--raggio-grande);
  background: var(--bianco); overflow: hidden;
}
.faq-gruppo > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.3rem;
  background: var(--crema);
}
.faq-gruppo > summary::-webkit-details-marker { display: none; }
.faq-gruppo > summary::before {
  content: "▸"; color: var(--rosa); font-size: 1.1rem; line-height: 1; flex: none;
}
.faq-gruppo[open] > summary::before { content: "▾"; }
.faq-gruppo > summary:hover { background: var(--azzurro-tenue); }
.faq-gruppo > summary h3 { margin: 0; font-size: 1.15rem; color: var(--blu); flex: 1; }
.faq-quante { color: var(--tenue); font-size: .85rem; white-space: nowrap; }
/* Le domande stanno dentro il gruppo: un filo di aria e nessuna cornice
   doppia, se no si vedono scatole dentro scatole. */
.faq-gruppo > .faq { margin: .6rem .8rem; border-radius: var(--raggio); }
.faq-gruppo > .faq:first-of-type { margin-top: .8rem; }
.faq-gruppo > .faq:last-child { margin-bottom: .9rem; }
.faq {
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  margin-bottom: .6rem; background: var(--bianco); overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: .95rem 1.1rem; font-weight: 700;
  list-style: none; display: flex; gap: .75rem; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; color: var(--rosa); font-size: 1.3rem; line-height: 1;
  flex: none; transition: transform .15s ease;
}
.faq[open] summary::before { content: "−"; }
.faq summary:hover { background: var(--crema); }
.faq-risposta { padding: 0 1.1rem 1.1rem 2.6rem; }
.faq-risposta > :last-child { margin-bottom: 0; }
.faq-allegati { list-style: none; padding: 0; margin: .8rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.faq-allegati a {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--azzurro-tenue); color: var(--azzurro-scuro);
  padding: .4rem .8rem; border-radius: var(--raggio);
  font-size: .85rem; font-weight: 700; text-decoration: none;
}
.faq-allegati a::before { content: "↓"; }

/* --- banner e citazione ---------------------------------------------- */
.banner { text-align: center; }
.banner .contenitore { max-width: 720px; }
.banner h2 { color: var(--azzurro-titolo); }
.citazione {
  border-left: 5px solid var(--rosa); padding-left: 1.2rem;
  font-size: 1.2rem; font-style: italic; color: var(--inchiostro);
  max-width: var(--misura);
}

/* --- testo + immagine ------------------------------------------------ */
.testo-immagine { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 820px) {
  .testo-immagine { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .testo-immagine.foto-sinistra .parte-foto { order: -1; }
}
.testo-immagine img { border-radius: var(--raggio-grande); }

/* --- form ------------------------------------------------------------ */
.modulo { max-width: 620px; }
.modulo label { display: block; font-weight: 700; font-size: .9rem; margin: 1rem 0 .3rem; }
.modulo input, .modulo textarea, .modulo select {
  width: 100%; padding: .7rem .9rem; font: inherit;
  border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--bianco);
}
.modulo .consenso { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.2rem; font-size: .9rem; }
.modulo .consenso input { width: auto; margin-top: .25rem; }
.errore-campo { color: #b3261e; font-size: .85rem; margin-top: .25rem; }
.avviso {
  padding: .9rem 1.1rem; border-radius: var(--raggio);
  border-left: 5px solid; margin-bottom: 1.5rem;
}
.avviso--ok     { background: #eef7f1; border-color: #2f7a4f; }
.avviso--errore { background: #fdeeec; border-color: #b3261e; }

/* --- filtri ---------------------------------------------------------- */
/* --- pannello dei filtri ---------------------------------------------
   Chiuso di partenza: la pagina si apre sull'elenco, non sui menù a tendina.
   È un <details>, quindi si apre anche senza JavaScript.
   -------------------------------------------------------------------- */
/* Un riquadro solo, largo quanto la pagina: in cima la barra «Filtra», sotto
   i campi, separati da un filetto. */
.pannello-filtri {
  background: var(--crema); border: 1px solid var(--bordo);
  border-radius: var(--raggio); overflow: hidden;
  margin-bottom: 2rem;
}
.pannello-filtri > summary {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  cursor: pointer; list-style: none; user-select: none;
  padding: .9rem 1.25rem;
  font-weight: 700; font-size: .95rem; color: var(--inchiostro);
}
.pannello-filtri > summary::-webkit-details-marker { display: none; }
.pannello-filtri > summary:hover { background: color-mix(in srgb, var(--bordo) 45%, var(--bianco)); }
.pannello-filtri[open] > summary { border-bottom: 1px solid var(--bordo); }
.pannello-filtri > summary svg { transition: transform .15s ease; flex: none; }
.pannello-filtri[open] > summary svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .pannello-filtri > summary svg { transition: none; }
}

/* I campi non si allargano più a riempire la riga: stanno uno accanto
   all'altro a partire da sinistra, staccati di 40px. */
.filtri {
  display: flex; flex-wrap: wrap; gap: 1rem 40px; align-items: flex-end;
  padding: 1.25rem;
}
.filtri label { font-size: .8rem; font-weight: 700; display: block; margin-bottom: .2rem; }
.filtri select, .filtri input {
  padding: .5rem .7rem; font: inherit; font-size: .92rem;
  border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--bianco);
  width: 100%; height: 42px;
}
/* La freccina la disegniamo noi invece di lasciarla al sistema: quella nativa
   sta incollata al bordo e non risponde al padding, così il testo più lungo le
   finiva sotto. Con «appearance: none» lo spazio a destra è davvero quello
   scritto qui. */
.filtri select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23595959' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 14px 14px;
}
/* Larghezza uguale per tutti e tetto massimo: su /eventi i campi sono cinque
   e senza tetto «Partner» si prende metà riga, mandando gli altri a capo. */
.filtri .campo { flex: 0 0 auto; width: 11.5rem; }
/* Il filtro per età è il più usato dalle famiglie: sta per primo e si vede. */
.filtri .campo--eta { width: 12.5rem; }
@media (max-width: 599.98px) { .filtri .campo, .filtri .campo--eta { width: 100%; } }
.filtri .campo--eta select { border-color: var(--rosa); font-weight: 600; }

/* --- testata delle pagine interne ------------------------------------
   Una sola forma per tutte: le pagine costruite a blocchi (aree, chi siamo,
   contatti…) usano «hero--liscio», quelle scritte a mano (eventi, enti, news)
   usano «scheda-testata». Stessa altezza minima ovunque, con il contenuto
   centrato: così passando da una pagina all'altra la testata non salta.
   -------------------------------------------------------------------- */
.scheda-testata,
.hero--liscio {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  /* Alta uguale su ogni pagina: chi ha l'introduzione corta guadagna aria,
     nessuno resta fuori. */
  min-height: 340px;
  padding-block: 3rem;
  background: var(--grigio);
}
/* La fotografia della home all'8%: dà continuità fra le pagine senza togliere
   contrasto al titolo. Se il file non c'è, resta il grigio e basta. */
.scheda-testata::before,
.hero--liscio::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/uploads/sito/hero.jpg") center / cover no-repeat;
  opacity: .08;
}
.scheda-testata .testo,
.hero--liscio .sommario { max-width: 68ch; }
/* Con la fotografia: la testata diventa una banda, alta uguale a prima ma
   con l'immagine a tutta larghezza e il testo sopra in bianco.

   Le fotografie che manda il coordinamento sono strisce 3:1, pensate per
   questo: in un hero alto 76vh verrebbero tagliate nel mezzo e dei bambini
   che camminano resterebbero le gambe. Qui ci stanno per intero.

   La velatura è la stessa dell'hero della home, con gli stessi numeri: 66%
   dove scorre il testo, zero dove non c'è. Sotto i 700px diventa piena,
   perché a quella larghezza il testo copre quasi tutta l'immagine. */
.scheda-testata--foto { background: var(--inchiostro); }
.scheda-testata--foto::before { content: none; }
.testata-sfondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.scheda-testata--foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgb(11 20 32 / 66%) 0%,
    rgb(11 20 32 / 62%) 44%,
    rgb(11 20 32 / 26%) 64%,
    rgb(11 20 32 / 0%) 88%);
}
.scheda-testata--foto .contenitore { position: relative; z-index: 1; }
.scheda-testata--foto h1 { color: var(--bianco); }
.scheda-testata--foto .occhiello { color: var(--bianco); opacity: .92; }
.scheda-testata--foto .testo { color: rgb(255 255 255 / 92%); }
.scheda-testata--foto .testo a { color: var(--bianco); }
@media (max-width: 699.98px) {
  .scheda-testata--foto::after { background: rgb(11 20 32 / 66%); }
}

/* Variante bianca, per la scheda di un ente: vedi il commento in
   app/Views/site/ente.php — i loghi non sono trasparenti. */
.scheda-testata--bianca { background: var(--bianco); border-bottom: 1px solid var(--bordo); }
.scheda-testata--bianca::before { content: none; }
@media (max-width: 699.98px) {
  .scheda-testata, .hero--liscio { min-height: 0; padding-block: 2.5rem; }
}

/* La testata è già un blocco a sé: sotto basta un respiro, non l'intero
   margine di una sezione nuova. */
.scheda-testata + .blocco { padding-top: clamp(2rem, 4vw, 3rem); }

/* --- scheda di dettaglio --------------------------------------------- */
.scheda-griglia { display: grid; gap: 2rem; }
@media (min-width: 900px) { .scheda-griglia { grid-template-columns: 2fr 1fr; } }
.riquadro {
  background: var(--crema); border-radius: var(--raggio-grande);
  padding: 1.3rem; margin-bottom: 1rem;
}
/* Nel riquadro laterale i titoli sono h2 — dopo l'h1 dell'evento, saltare a
   h3 lascerebbe un buco nella struttura per chi ascolta la pagina — ma
   restano piccoli e blu come tutti i titoli di servizio. */
.riquadro :is(h2, h3) { font-size: 1rem; margin-bottom: .6rem; color: var(--blu); }
.dati { margin: 0; font-size: .95rem; }
.dati dt { font-weight: 700; font-size: .8rem; color: var(--tenue); margin-top: .7rem; }
.dati dd { margin: 0; }
.servizio { border-bottom: 1px solid var(--bordo); padding: .8rem 0; }
.servizio:last-child { border-bottom: 0; }
/* Il nome del servizio sta su una riga sua, e per quello serve il blocco.
   I grassetti dentro la descrizione, invece, sono parole in mezzo a una
   frase: diventando blocchi spezzavano la riga, e l'articolo che li precede
   restava solo in cima al riquadro — «Le» e poi, a capo, «Settimane Verdi».
   L'ha segnalato Anita e i suoi fratelli. */
.servizio strong { display: block; }
.servizio-testo strong,
.servizio-testo b { display: inline; }
.orari { white-space: pre-line; font-size: .93rem; }

.vuoto { color: var(--tenue); font-style: italic; padding: 2rem 0; }

/* --- piè di pagina ---------------------------------------------------
   Proporzioni riprese dal footer del sito attuale, misurate a 1440px:
   fondo #f9f9f9, 60px sopra e sotto, contenuto largo 1248px,
   colonne 2/5 e 3/5, striscia loghi alta ~48px allineata a sinistra.
   -------------------------------------------------------------------- */
.sito-footer { background: var(--grigio); border-top: 1px solid var(--bordo); }

.footer-riga {
  display: grid; gap: 2rem;
  padding-block: 60px 10px;
}
@media (min-width: 820px) {
  .footer-riga { grid-template-columns: 2fr 3fr; gap: 3rem; }
}

.footer-titolo { font-size: 1.05rem; margin: 0 0 .6rem; color: var(--blu); }
.sito-footer address { font-style: normal; display: flex; flex-direction: column; gap: .2rem; font-size: .97rem; }
.sito-footer address a { color: var(--inchiostro); text-decoration: none; }
.sito-footer address a:hover { text-decoration: underline; }
.footer-indirizzo { color: var(--tenue); }
.footer-payoff { color: var(--tenue); margin: 0; max-width: 44ch; }

/* --- striscia dei sostenitori ---------------------------------------
   Staccata di 30px in più dal blocco dei contatti, con un filetto che la
   chiude: sono loghi altrui, non devono sembrare parte dell'indirizzo.
   -------------------------------------------------------------------- */
.footer-sostenitori {
  margin-top: 30px; padding-top: 30px; padding-bottom: 44px;
  border-top: 1px solid var(--bordo);
}
.footer-sostenitori .etichetta {
  font-size: .82rem; color: var(--tenue);
  margin: 0 0 1.15rem; font-weight: 600;
}
.striscia-loghi {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.75rem 3.25rem;
}
.striscia-loghi img {
  height: 38px; width: auto;
  /* Alcuni loghi arrivano da JPEG e si portano dietro il rettangolo bianco:
     su un fondo #f9f9f9 si vedrebbe come una toppa. «multiply» fa sparire il
     bianco nel fondo lasciando intatto il resto — funziona proprio perché il
     fondo è chiarissimo. Un filo di desaturazione li fa convivere senza che
     uno urli più degli altri. */
  mix-blend-mode: multiply;
  filter: saturate(.92);
}
.striscia-loghi img.alto { height: 46px; }
@media (max-width: 560px) {
  .striscia-loghi { gap: 1.25rem 2rem; }
  .striscia-loghi img { height: 32px; }
  .striscia-loghi img.alto { height: 38px; }
}

.footer-chiusura {
  border-top: 1px solid var(--bordo);
  padding-block: 1.1rem;
  font-size: .82rem; color: var(--tenue); text-align: center;
}
.footer-chiusura p { margin: 0; }

/* Privacy, cookie, accessibilità: sotto la riga del copyright, separate da un
   punto mediano che a video non è un carattere da leggere ma una pausa. */
.footer-legale ul {
  list-style: none; margin: .5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1rem;
}
.footer-legale a { color: var(--tenue); text-decoration: underline; }
.footer-legale a:hover, .footer-legale a:focus-visible { color: var(--azzurro-scuro); }

/* --- Avviso sui cookie ----------------------------------------------- */
/* In basso a sinistra, non al centro dello schermo: non c'è niente da
   accettare, quindi non deve sbarrare la strada. Si legge quando si vuole e
   nel frattempo il sito si usa. */
.avviso-cookie {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 50;
  max-width: 25rem;
  background: var(--bianco); color: var(--inchiostro);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: 0 8px 30px rgb(0 0 0 / .16);
  padding: 1.1rem 1.2rem;
  font-size: .88rem; line-height: 1.5;
}
/* La striscia di marchio in cima, come sulle schede: lega l'avviso al sito
   invece di farlo sembrare una finestra del browser. */
.avviso-cookie::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  border-radius: var(--raggio) var(--raggio) 0 0;
  background: linear-gradient(90deg, var(--rosa), var(--azzurro));
}
.avviso-cookie p { margin: 0; }
.avviso-cookie-azioni {
  display: flex; align-items: center; gap: 1rem;
  margin-top: .9rem !important; flex-wrap: wrap;
}
.avviso-cookie-azioni a { color: var(--azzurro-scuro); }
.avviso-cookie-azioni button {
  margin-left: auto;
  font: inherit; font-weight: 700; cursor: pointer;
  color: var(--bianco); background: var(--azzurro-pieno);
  border: 1px solid var(--azzurro-pieno); border-radius: var(--raggio);
  padding: .45rem 1.1rem;
}
.avviso-cookie-azioni button:hover { background: var(--azzurro-scuro); border-color: var(--azzurro-scuro); }
.avviso-cookie-azioni button:focus-visible,
.avviso-cookie a:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

/* Su schermo stretto occupa la larghezza: a 25rem su un telefono uscirebbe
   dallo schermo, e in basso a sinistra non ci starebbe comunque. */
@media (max-width: 30rem) {
  .avviso-cookie { left: .6rem; right: .6rem; bottom: .6rem; max-width: none; }
}

/* --- paginazione ------------------------------------------------------
   L'elenco degli enti si ferma a nove per pagina. I numeri sono bersagli
   da dito prima che da mouse: 44 pixel di lato, che è la misura sotto la
   quale su un telefono si sbaglia riga. */
.conteggio-elenco {
  color: var(--tenue);
  font-size: .92rem;
  margin: 0 0 1rem;
}

.paginazione {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 1rem;
  margin-top: 2.5rem;
}
.paginazione ul {
  display: flex; flex-wrap: wrap; gap: .35rem;
  list-style: none; margin: 0; padding: 0;
}
.paginazione a,
.paginazione .corrente {
  display: inline-grid; place-items: center;
  min-width: 44px; min-height: 44px;
  padding: 0 .6rem;
  border-radius: var(--raggio);
  text-decoration: none;
  font-weight: 600;
}
.paginazione a {
  color: var(--azzurro-scuro);
  border: 1px solid var(--bordo);
  background: var(--bianco);
}
.paginazione a:hover { background: var(--grigio); }
.paginazione .corrente {
  /* Il fondo pieno vuole l'azzurro che regge il bianco (4.78:1), non quello
     dei titoli, che sta sotto il minimo per il testo normale. */
  background: var(--azzurro-pieno);
  color: var(--bianco);
  border: 1px solid var(--azzurro-pieno);
}
.paginazione-salto { font-weight: 600; }

/* Il testo di un servizio: gli enti ci scrivono elenchi lunghi — gli
   ambulatori dell'ASL sono otto — e vanno letti come li hanno scritti,
   con gli a capo al loro posto. */
/* Niente più «pre-line»: adesso qui dentro arriva HTML vero — paragrafi,
   elenchi, link — e gli a capo li fanno i tag, non gli spazi. */
.servizio-testo {
  margin: .5rem 0 0;
  color: var(--tenue);
  font-size: .94rem;
  line-height: 1.6;
}


/* Gli elenchi dentro i testi scritti dal pannello: senza un rientro esplicito
   il browser li allinea al testo e le voci sembrano righe qualsiasi. */
.testo ul, .testo ol,
.servizio-testo ul, .servizio-testo ol {
  margin: 0 0 1rem; padding-left: 1.5rem;
}
.testo li, .servizio-testo li { margin-bottom: .35rem; }
.servizio-testo p:last-child, .servizio-testo ul:last-child { margin-bottom: 0; }

/* --- la galleria di una scheda ente ----------------------------------
   Due colonne sul desktop, una sola sul telefono. Le fotografie vengono
   dagli enti e arrivano in ogni formato: il ritaglio 3:2 le mette tutte
   sulla stessa riga d'orizzonte, invece di una colonna a scalini.
   -------------------------------------------------------------------- */
.galleria-ente {
  display: grid; gap: 1rem; margin-top: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .galleria-ente { grid-template-columns: repeat(2, 1fr); }
}
.galleria-ente figure { margin: 0; }
.galleria-ente img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--raggio-grande);
  background: var(--crema);
}
.galleria-ente figcaption {
  margin-top: .4rem; font-size: .85rem; color: var(--tenue);
}

/* Le fasce d'età sotto a un servizio. Una riga di pillole, staccata dal
   testo quanto basta a leggersi come una didascalia e non come l'ultima
   frase della descrizione. */
.servizio-fasce {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: .6rem 0 0;
}