/* ==========================================================================
   Via Francigena del Sud Salento — tema del frontend

   I valori nascono dalle bozze grafiche. I colori dell'identità sono cinque:
   il giallo delle chiamate all'azione, e i tre colori dei pallini che
   accompagnano ogni titolo di sezione, ripresi dall'arco del marchio.

   Regole di impianto:
     · intestazione, immagine di apertura e piè di pagina occupano tutta
       la larghezza; il resto del contenuto sta dentro un contenitore.
     · nessuna altezza fissa dove c'è testo: il pannello di accessibilità
       consente di ingrandirlo fino al doppio, e i riquadri devono crescere
       con lui invece di tagliarlo.
     · tutte le misure che riguardano il testo sono in unità relative, per
       la stessa ragione.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Caratteri

   Da servire in locale, mai da una rete di distribuzione esterna: un font
   caricato da un dominio di terzi comunica l'indirizzo di ogni visitatore a
   chi lo gestisce, e su un sito della pubblica amministrazione è una
   complicazione inutile.

   I file vanno in assets/fonts/. Finché non arrivano, valgono i caratteri di
   sistema indicati nella catena di scorta.
   -------------------------------------------------------------------------- */

/*
@font-face {
  font-family: 'Titolo';
  src: url('../fonts/titolo-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Testo';
  src: url('../fonts/testo-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Testo';
  src: url('../fonts/testo-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
*/


/* --------------------------------------------------------------------------
   2. Valori di riferimento
   -------------------------------------------------------------------------- */

:root {
  /* --- colori dell'identità, prelevati dalle bozze --- */
  --giallo:        #FFCA00;
  --giallo-scuro:  #E0B000;   /* per i bordi e gli stati premuti */
  --magenta:       #AD3386;
  --blu:           #2C9EDD;   /* pallini, accenti, elementi decorativi */
  --verde:         #3DAD47;

  /* Il blu dell'identita su fondo bianco raggiunge un contrasto di 2,98:1,
     sotto il minimo di 4,5 richiesto per il testo. Come pallino va bene, come
     colore di un collegamento no: chi ha una vista ridotta non lo distingue
     dal testo intorno. Questa variante conserva la stessa tinta e arriva a
     5,29:1. */
  --blu-testo:     #1A72A2;
  --giallo-testo:  #FFCA00;

  /* Collegamenti: valori del fondo chiaro, quello di quasi tutto il sito.
     I blocchi scuri li ridichiarano su se stessi, piu in basso. */
  --colore-link:       #1A72A2;
  --colore-link-hover: #14567B;

  /* --- superfici e testo --- */
  --inchiostro:    #180507;   /* titoli */
  --testo:         #2A2325;   /* corpo */
  --testo-tenue:   #6B6265;
  --carta:         #FFFFFF;
  --carta-tenue:   #F7F5F3;
  --bordo:         #E4DFDC;

  /* --- riquadri promozionali: sfumatura viola scuro verso blu --- */
  --banner-da:     #3A2540;
  --banner-a:      #1E6FB0;

  /* --- stati --- */
  --attenzione:    #B45309;
  --errore:        #B3261E;
  --conferma:      #2E7D32;

  /* --- impianto --- */
  --contenitore:   1180px;
  --gronda:        1.5rem;    /* margine laterale su schermi stretti */
  --raggio:        14px;
  --raggio-largo:  26px;

  /* --- ritmo verticale --- */
  --spazio-1: 0.5rem;
  --spazio-2: 1rem;
  --spazio-3: 1.5rem;
  --spazio-4: 2.5rem;
  --spazio-5: 4rem;
  --spazio-6: 6rem;

  /* --- caratteri --- */
  --font-titolo: 'Titolo', 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-testo:  'Testo', 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* --- ombre --- */
  --ombra-tenue:  0 2px 10px rgba(24, 5, 7, .08);
  --ombra-media:  0 6px 24px rgba(24, 5, 7, .12);

  /* --- movimento --- */
  --transizione: 180ms ease;
}


/* --------------------------------------------------------------------------
   3. Azzeramento e impostazioni di base
   -------------------------------------------------------------------------- */

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

html {
  /* Nessuna dimensione fissa in px: così l'impostazione del carattere scelta
     dall'utente nel proprio browser continua a valere. */
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--testo);
  background: var(--carta);
  overflow-x: hidden;
}

img,
picture,
video,
svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-titolo);
  color: var(--inchiostro);
  line-height: 1.2;
  margin: 0 0 var(--spazio-2);
  font-weight: 700;
  /* Le parole lunghe dei toponimi salentini non devono uscire dal riquadro
     quando il testo viene ingrandito. */
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--spazio-2); }
p:last-child { margin-bottom: 0; }

/*
 * Il colore dei collegamenti lo decide la SUPERFICIE, non il collegamento.
 *
 * Il sito ha fondo chiaro, ma alcuni blocchi sono scuri: l'apertura, le
 * schede dei luoghi in evidenza, i richiami. Un colore unico non puo
 * funzionare su entrambi — il blu si perde sul marrone, il giallo sparisce
 * sul bianco — e mettere una classe su ogni collegamento significa
 * ricordarsene ogni volta, e perderlo il giorno che si dimentica.
 *
 * Qui il collegamento legge due variabili ereditate: un blocco scuro le
 * ridichiara una volta sola, e tutto cio che ci finisce dentro si adegua da
 * se, anche quello che verra scritto domani.
 */
a {
  color: var(--colore-link);
  text-decoration: underline;
  text-underline-offset: .18em;
  transition: color var(--transizione);
}
a:hover { color: var(--colore-link-hover); }

/* Il contorno di messa a fuoco non si toglie mai: è l'unico modo in cui chi
   naviga da tastiera sa dove si trova. */
:focus-visible {
  outline: 3px solid var(--blu-testo);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Chi ha disturbi vestibolari imposta la riduzione del movimento nel proprio
   sistema: il sito la rispetta da sé, senza che debba cercare un pannello. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* --------------------------------------------------------------------------
   4. Impianto
   -------------------------------------------------------------------------- */

.contenitore {
  width: 100%;
  max-width: var(--contenitore);
  margin-inline: auto;
  padding-inline: var(--gronda);
}

/* Per le sezioni che devono uscire dal contenitore, dichiarate di volta in
   volta come previsto. */
.piena-larghezza {
  width: 100%;
  margin-inline: 0;
  max-width: none;
  padding-inline: 0;
}

/* I fieldset hanno per impostazione del browser una larghezza minima pari al
   contenuto piu largo che contengono, e non si restringono come un normale
   contenitore: con una mappa o un elenco di nomi lunghi dentro, sforano lo
   schermo del telefono. Azzerarla li fa comportare come ogni altro blocco. */
fieldset { min-width: 0; }

/* Leaflet assegna ai propri strati valori di sovrapposizione fino a 1000,
   ben sopra l'intestazione: il menu che si apre sul telefono finiva sotto la
   mappa. «isolation» racchiude quei valori dentro il riquadro della mappa,
   cosi non competono con il resto della pagina. Vale per ogni mappa del
   sito, presente e futura, perche Leaflet mette questa classe su tutte. */
.leaflet-container { isolation: isolate; }

/* Arrivando da un collegamento interno il titolo si ferma appena sotto il
   bordo superiore: un po' di stacco lo rende leggibile invece di incollarlo
   al margine. L'intestazione non e fissa, quindi non serve compensarla. */
[id] { scroll-margin-top: 1.5rem; }

/* Il contorno del fuoco su una sezione intera sarebbe un rettangolo grande
   quanto lo schermo. Qui il fuoco non segnala un elemento da usare: serve
   solo a spostare il punto di lettura di chi e arrivato da un collegamento,
   e il titolo in cima dice gia dove si e. */
[tabindex="-1"]:focus { outline: none; }

.sezione { padding-block: var(--spazio-5); }
.sezione--fitta { padding-block: var(--spazio-4); }

/* Salto al contenuto: la prima cosa che incontra chi naviga da tastiera. */
.salta-al-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: .75rem 1.25rem;
  /* Colore scritto per esteso e non con var(--inchiostro): i validatori
     automatici (MAUVE++ fra questi) non sempre risolvono le variabili, e
     calcolando il contrasto su un fondo che non vedono segnalano un errore
     che non c'e. Il valore e lo stesso della variabile. */
  background: #180507;
  color: #fff;
  /* Sottolineato come ogni altro collegamento: riconoscibile come tale
     anche da chi non distingue i colori. */
  text-decoration: underline;
  text-underline-offset: .18em;
  border-radius: 0 0 var(--raggio) 0;
}
/* Il contorno e dichiarato qui, su :focus, oltre che nella regola globale su
   :focus-visible: questo collegamento riceve il fuoco solo da tastiera, e
   dichiararlo sul suo stato di fuoco lo rende esplicito anche per chi lo
   verifica leggendo il foglio di stile. */
.salta-al-contenuto:focus {
  left: 0;
  color: #fff;
  /* #1A72A2 e --blu-testo, scritto per esteso per i validatori. */
  outline: 3px solid #1A72A2;
  outline-offset: 2px;
}

/* Testo destinato ai soli lettori di schermo. */
.solo-lettori {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  color: #000;
  background: #fff;
}


/* --------------------------------------------------------------------------
   5. Segno di sezione

   Barra gialla e tre pallini: il gesto che apre ogni sezione nelle bozze,
   ripreso dall'arco del marchio. È l'elemento che dà ritmo alla pagina.
   -------------------------------------------------------------------------- */

.segno-sezione {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: var(--spazio-2);
}

.segno-sezione::before {
  content: '';
  width: 5.5rem;
  height: .6rem;
  border-radius: 999px;
  background: var(--giallo);
  flex: none;
}

.segno-sezione i {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  flex: none;
}
.segno-sezione i:nth-of-type(1) { background: var(--magenta); }
.segno-sezione i:nth-of-type(2) { background: var(--blu); }
.segno-sezione i:nth-of-type(3) { background: var(--verde); }


/* --------------------------------------------------------------------------
   6. Pulsanti
   -------------------------------------------------------------------------- */

.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  /* L'area sensibile non scende mai sotto i 44 pixel: è la misura sotto la
     quale un dito, in movimento e con una mano sola, sbaglia bersaglio. */
  min-height: 2.75rem;
  padding: .65rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-testo);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transizione), border-color var(--transizione),
              color var(--transizione), transform var(--transizione);
}

.pulsante--primario {
  background: var(--giallo);
  /* Testo scuro sul giallo: il bianco sopra questo tono darebbe un rapporto
     di contrasto intorno a 1.8, ben sotto il minimo richiesto. */
  color: var(--inchiostro);
}
.pulsante--primario:hover {
  background: var(--giallo-scuro);
  color: var(--inchiostro);
}

.pulsante--chiaro {
  background: transparent;
  border-color: rgba(255, 255, 255, .85);
  color: #fff;
}
.pulsante--chiaro:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

.pulsante--contorno {
  background: transparent;
  border-color: var(--inchiostro);
  color: var(--inchiostro);
}
.pulsante--contorno:hover {
  background: var(--inchiostro);
  color: #fff;
}

.pulsante:active { transform: translateY(1px); }


/* --------------------------------------------------------------------------
   7. Intestazione — a tutta larghezza
   -------------------------------------------------------------------------- */

.intestazione {
  width: 100%;
  background: var(--carta);
  border-bottom: 1px solid var(--bordo);
  position: relative;
  z-index: 50;
}

.intestazione__interno {
  /*max-width: var(--contenitore);*/
  margin-inline: auto;
  padding: .85rem var(--gronda);
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  /*
   * Tre loghi, sei voci, la ricerca e le lingue chiedono circa 85rem in una
   * riga sola, piu di quanto offra un portatile comune, e molto piu di quanto
   * resti con lo zoom al 200%. Senza andare a capo la riga usciva dallo
   * schermo a destra e le bandierine delle lingue sparivano (WCAG 1.4.4 e
   * 1.4.10). Qui, se lo spazio manca, la navigazione scende sotto i loghi:
   * l'intestazione si allunga invece di perdere pezzi.
   */
  flex-wrap: wrap;
  row-gap: .5rem;
}

.intestazione__marchio { flex: none; }
.intestazione__marchio img { height: 4.25rem; width: auto; }

/* Il marchio del ministero finanziatore, accanto a quello del progetto. */
.intestazione__ente {
  flex: none;
  padding-left: var(--spazio-3);
  border-left: 1px solid var(--bordo);
}
.intestazione__ente img { height: 4rem; width: auto; }
.intestazione__ente2 img { height: 2rem; width: auto; }
.intestazione__navigazione {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  /* Anche sulla riga propria la navigazione puo non starci per intero, con
     lo zoom spinto: allora va a capo a sua volta, allineata a destra. */
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: .25rem;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Fra le voci 1rem; fra due righe di voci, se il menu va a capo, meno:
     sono righe di testo, non blocchi separati. */
  gap: .25rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  display: block;
  padding: .4rem 0;
  color: var(--inchiostro);
  text-decoration: none;
  font-weight: 500;
  font-size: .85rem;
  position: relative;
}

/* La voce attiva si riconosce dalla barra gialla, non dal solo colore: chi
   non distingue i colori deve poterla individuare comunque. */
.menu a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -.15rem;
  height: 3px;
  border-radius: 999px;
  background: var(--giallo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transizione);
}
.menu a:hover::after,
.menu a[aria-current='page']::after { transform: scaleX(1); }

.lingue {
  display: flex;
  align-items: center;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* La bandierina usa il pacchetto flag-icon, lo stesso del pannello: cosi il
   codice paese scritto nella tabella lingue vale per entrambi.
   L'area sensibile e piu grande del disegno, per restare comoda al tocco. */
.lingue a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  text-decoration: none;
  opacity: .5;
  transition: opacity var(--transizione);
}
.lingue a:hover,
.lingue a[aria-current='true'] { opacity: 1; }

.lingue .flag-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--bordo);
  background-size: cover;
  background-position: center;
  line-height: 1;
}

/* Se una lingua non ha la bandierina, resta il codice: due lettere dicono
   comunque di quale lingua si tratta. */
.lingue__codice {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--inchiostro);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: .15rem .35rem;
}

/* --- apertura del menu su schermi stretti --- */
.apri-menu {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--raggio);
  background: transparent;
  color: var(--inchiostro);
  cursor: pointer;
}
.apri-menu svg { margin-inline: auto; }


/* --------------------------------------------------------------------------
   8. Apertura — a tutta larghezza
   -------------------------------------------------------------------------- */

.apertura {
  position: relative;
  width: 100%;
  min-height: clamp(20rem, 34vw, 37rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Fondo sotto la fotografia, scritto per esteso per la stessa ragione del
     salto al contenuto: un validatore che non legge l'immagine calcola il
     contrasto del titolo su questo colore. */
  background: #180507;
}

.apertura__sfondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La velatura serve a leggere il testo, non a decorare: senza, il bianco
   sull'oliveto assolato diventa illeggibile. */
.apertura::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(24, 5, 7, .72) 0%,
              rgba(24, 5, 7, .45) 38%,
              rgba(24, 5, 7, .05) 68%);
}

.apertura__testo {
  position: relative;
  z-index: 2;
  max-width: var(--contenitore);
  width: 100%;
  margin-inline: auto;
  padding: var(--spazio-4) var(--gronda);
  color: #fff;
}

.apertura__testo h1 {
  color: #fff;
  max-width: 18ch;
  margin-bottom: var(--spazio-3);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}


/* --------------------------------------------------------------------------
   9. Mappa
   -------------------------------------------------------------------------- */

.mappa-riquadro {
  position: relative;
  border: 5px solid var(--giallo);
  border-radius: var(--raggio-largo);
  overflow: hidden;
  background: var(--carta-tenue);
}

.mappa {
  width: 100%;
  /* L'altezza è proporzionata, non fissa, ma la mappa non contiene testo
     scorrevole: qui una proporzione è legittima. */
  aspect-ratio: 16 / 10;
  min-height: 20rem;
}

/* Sulla scheda di una struttura la mappa serve solo a collocare un punto:
   occupa meno spazio, perche sopra ci sono i recapiti, che contano di piu. */
/* Un punto solo in una pagina redazionale.

   L'altezza e fissa e non proporzionale alla larghezza: legarla alla
   larghezza la fa schiacciare nelle pagine a due colonne, dove il
   contenitore e stretto. Si puo cambiare caso per caso con
   [posizione altezza="300"]. */
.mappa--punto {
  aspect-ratio: auto;
  height: 24rem;
  min-height: 0;
}

@media (max-width: 47.9375rem) {
  /* Su telefono 24rem occuperebbero quasi tutto lo schermo. */
  .mappa--punto { height: 17rem; }
}

.posizione-azioni { margin-top: var(--spazio-2); }

.mappa--piccola {
  aspect-ratio: 16 / 9;
  min-height: 14rem;
}

.mappa-modi {
  position: absolute;
  top: .9rem;
  left: .9rem;
  z-index: 500;
  display: flex;
  gap: .35rem;
  padding: .3rem;
  background: var(--carta);
  border-radius: 999px;
  box-shadow: var(--ombra-tenue);
}

.mappa-modi button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.25rem;
  padding: .35rem .9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--testo);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.mappa-modi button[aria-pressed='true'] {
  background: var(--giallo);
  color: var(--inchiostro);
}


/* --------------------------------------------------------------------------
   10. Schede degli itinerari
   -------------------------------------------------------------------------- */

.griglia-schede {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: var(--spazio-3);
}

.scheda {
  position: relative;
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--inchiostro);
  box-shadow: var(--ombra-tenue);
  transition: transform var(--transizione), box-shadow var(--transizione);
}
.scheda:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombra-media);
}

.scheda__figura {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--carta-tenue);
}
.scheda__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scheda__corpo {
  padding: .9rem 1.1rem 1.1rem;
  background: rgba(42, 16, 19, .96);
  color: #fff;
}

.scheda__titolo {
  font-size: 1.02rem;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}

.scheda__luogo {
  display: block;
  margin-top: .2rem;
  font-size: .88rem;
  color: rgba(255, 255, 255, .82);
}

/* Il collegamento copre l'intera scheda, ma il nome resta l'unico testo del
   collegamento: un lettore di schermo deve annunciare il luogo, non "leggi". */
.scheda__collegamento::after {
  content: '';
  position: absolute;
  inset: 0;
}


/* --------------------------------------------------------------------------
   11. Riquadri promozionali
   -------------------------------------------------------------------------- */

.richiamo {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
  gap: 0;
  border-radius: var(--raggio-largo);
  overflow: hidden;
  /* Colore pieno sotto la sfumatura: e l'estremo PIU CHIARO dei due, quindi
     il caso peggiore per il testo bianco (5,31:1 sul titolo, 4,64:1 sul
     paragrafo). Chi non legge le sfumature, come alcuni validatori, calcola
     il contrasto qui invece che sul bianco della pagina. */
  background-color: #1E6FB0;
  background-image: linear-gradient(102deg, var(--banner-da) 0%, var(--banner-a) 100%);
  color: #fff;
}
.richiamo + .richiamo { margin-top: var(--spazio-3); }

.richiamo__testo {
  padding: var(--spazio-4);
  align-self: center;
}

.richiamo__testo h2 {
  color: #fff;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  margin-bottom: .6rem;
}

.richiamo__testo p {
  color: rgba(255, 255, 255, .9);
  max-width: 42ch;
  margin-bottom: var(--spazio-3);
}

.richiamo__figura {
  margin: 0;
  min-height: 100%;
  /* Il taglio arrotondato a sinistra riprende la forma del marchio. */
  border-radius: var(--raggio-largo) 0 0 var(--raggio-largo);
  overflow: hidden;
}
.richiamo__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   12. Pagina interna
   -------------------------------------------------------------------------- */

.testata-pagina { padding-block: var(--spazio-5) var(--spazio-3); }

.contenuto-pagina {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--spazio-4);
  align-items: start;
}

.contenuto-pagina__figura { margin: 0; }
.contenuto-pagina__figura img { border-radius: var(--raggio); width: 100%; }

/* Il testo redazionale arriva dall'editor: le sue regole si applicano qui,
   non alla pagina intera, per non interferire con l'interfaccia. */
.testo-redazionale { /*max-width: 68ch;*/ }
.testo-redazionale h2 { margin-top: var(--spazio-4); font-size: 1.35rem; }
.testo-redazionale h3 { margin-top: var(--spazio-3); }
.testo-redazionale h2:first-child,
.testo-redazionale h3:first-child { margin-top: 0; }
.testo-redazionale ul,
.testo-redazionale ol { padding-left: 1.4rem; margin-bottom: var(--spazio-2); }
.testo-redazionale li { margin-bottom: .35rem; }
.testo-redazionale img { border-radius: var(--raggio); margin-block: var(--spazio-2); }
.testo-redazionale blockquote {
  margin: var(--spazio-3) 0;
  padding: .3rem 0 .3rem 1.2rem;
  border-left: 4px solid var(--giallo);
  color: var(--testo-tenue);
}
.testo-redazionale table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--spazio-3);
}
.testo-redazionale th,
.testo-redazionale td {
  padding: .6rem .8rem;
  border: 1px solid var(--bordo);
  text-align: left;
}
.testo-redazionale th { background: var(--carta-tenue); font-weight: 600; }


/* --------------------------------------------------------------------------
   13. Piè di pagina — a tutta larghezza
   -------------------------------------------------------------------------- */

.pie {
  width: 100%;
  background: var(--carta);
  padding-top: var(--spazio-5);
  position: relative;
}

.pie__interno {
  max-width: var(--contenitore);
  margin-inline: auto;
  padding-inline: var(--gronda);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-4);
  align-items: flex-start;
}

.pie__marchio img { height: 4rem; width: auto; }

.pie__colonne {
  display: flex;
  gap: var(--spazio-4);
  padding-left: var(--spazio-4);
  border-left: 1px solid var(--bordo);
}

.pie__colonne ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pie__colonne li { margin-bottom: .3rem; }
.pie__colonne a {
  color: var(--inchiostro);
  text-decoration: none;
  font-weight: 500;
  font-size: .95rem;
}
.pie__colonne a:hover { text-decoration: underline; }

.pie__legale {
  max-width: var(--contenitore);
  margin-inline: auto;
  padding: var(--spazio-3) var(--gronda) var(--spazio-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2) var(--spazio-3);
  align-items: center;
  font-size: .85rem;
  color: var(--testo-tenue);
}
.pie__legale a { color: var(--testo-tenue); }
.pie__legale a:hover { color: var(--inchiostro); }

/* L'onda conclusiva: l'unico ornamento della pagina, ripreso dalle bozze.
   È decorativa, quindi nascosta ai lettori di schermo. */
.pie__onda {
  width: 100%;
  margin-top: var(--spazio-3);
  display: block;
  line-height: 0;
}
.pie__onda svg { width: 100%; height: auto; display: block; }


/* --------------------------------------------------------------------------
   14. Schermi stretti

   Non una riduzione del desktop: chi cammina usa il sito in piedi, con una
   mano sola e spesso al sole. Le aree sensibili crescono, la navigazione si
   raccoglie in un pannello, le colonne si impilano.
   -------------------------------------------------------------------------- */

@media (max-width: 61.9375rem) {

  .contenuto-pagina { grid-template-columns: 1fr; }

  .richiamo { grid-template-columns: 1fr; }
  .richiamo__figura {
    order: -1;
    border-radius: 0;
    aspect-ratio: 21 / 9;
    min-height: 0;
  }
  .richiamo__testo { padding: var(--spazio-3); }
}

@media (max-width: 47.9375rem) {

  :root {
    --gronda: 1.15rem;
    --spazio-5: 3rem;
    --spazio-6: 4rem;
  }

  .apri-menu { display: inline-flex; align-items: center; justify-content: center; }

  /*
   * Sul telefono restano il logo del sito, quello del Ministero e il
   * pulsante del menu. Il logo delle Vie Francigene sparisce: tre loghi e il
   * menu non stanno in una riga, e fra i due istituzionali prevale il
   * Ministero, ente finanziatore del progetto.
   */
  /* Sul telefono la navigazione e un pannello a parte e la riga contiene
     solo loghi e pulsante: non si va a capo, e se lo spazio manca e il logo
     del sito a restringersi, come spiegato qui sotto. */
  .intestazione__interno { gap: .75rem; flex-wrap: nowrap; }
  .intestazione__ente2 { display: none; }

  /*
   * Il pulsante del menu non deve mai uscire dallo schermo: senza, sul
   * telefono il sito non si naviga. Se lo spazio manca e il logo del sito a
   * restringersi, non il menu a sparire.
   */
  .apri-menu { flex: none; }
  .intestazione__marchio {
    flex: 0 1 auto;
    min-width: 0;
  }
  .intestazione__marchio img {
    height: auto;
    max-height: 2.5rem;
    max-width: 100%;
  }

  .intestazione__ente { flex: none; padding-left: .75rem; }
  .intestazione__ente img { height: 2.375rem; }

  /* Il menu diventa un pannello che scende: le voci occupano tutta la
     larghezza e sono alte abbastanza da centrarle con il pollice. */
  .intestazione__navigazione {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--spazio-2) var(--gronda) var(--spazio-3);
    background: var(--carta);
    border-bottom: 1px solid var(--bordo);
    box-shadow: var(--ombra-media);
  }
  .intestazione__navigazione.aperto { display: flex; }

  .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .menu a {
    padding: .9rem .25rem;
    border-bottom: 1px solid var(--bordo);
    font-size: 1.05rem;
  }
  .menu a::after { display: none; }
  .menu a[aria-current='page'] {
    border-left: 4px solid var(--giallo);
    padding-left: .75rem;
  }

  .lingue {
    margin-top: var(--spazio-2);
    justify-content: flex-start;
    gap: .75rem;
  }
  .lingue a { width: 2.75rem; height: 2.75rem; }
  .lingue .flag-icon { width: 1.75rem; height: 1.75rem; }

  .apertura { min-height: 22rem; }
  .apertura::after {
    /* In verticale la velatura deve coprire dal basso, non da sinistra. */
    background: linear-gradient(to top,
                rgba(24, 5, 7, .8) 0%,
                rgba(24, 5, 7, .45) 45%,
                rgba(24, 5, 7, .12) 100%);
  }
  .apertura__testo h1 { max-width: none; }

  .griglia-schede { grid-template-columns: 1fr; }

  .mappa { aspect-ratio: 3 / 4; min-height: 24rem; }
  .mappa-modi { top: .6rem; left: .6rem; }

  .pie__interno { flex-direction: column; gap: var(--spazio-3); }
  .pie__colonne {
    padding-left: 0;
    border-left: 0;
    flex-wrap: wrap;
    gap: var(--spazio-3);
  }
}

/* --------------------------------------------------------------------------
   15. Mappa: segnaposti, finestre e alternativa testuale
   -------------------------------------------------------------------------- */

/* Il segnaposto e un cerchio colorato invece dell'immagine predefinita di
   Leaflet: si distingue per categoria e resta leggibile anche piccolo. */
.segnaposto__cerchio {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  margin: .32rem;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(24, 5, 7, .45);
}

/* Con il simbolo dentro, il cerchio si allarga quanto basta a contenerlo
   senza schiacciarlo. Il simbolo e bianco e tutti i colori dei tipi sono
   scelti abbastanza scuri da reggerlo. */
.segnaposto--simbolo .segnaposto__cerchio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin: .15rem;
  color: #fff;
  font-size: .78rem;
}

/* Il giallo dei luoghi e chiaro: sopra, il simbolo bianco sparirebbe. */
.segnaposto--simbolo .segnaposto__cerchio[style*="#FFCA00"] {
  color: var(--inchiostro);
}

/* Il contorno di messa a fuoco deve vedersi anche sopra la mappa: senza, chi
   naviga da tastiera perde di vista dove si trova appena entra nei segnaposti. */
.leaflet-marker-icon:focus-visible,
.leaflet-interactive:focus-visible {
  outline: 3px solid var(--inchiostro);
  outline-offset: 2px;
}

.leaflet-popup-content-wrapper {
  border-radius: var(--raggio);
  box-shadow: var(--ombra-media);
}
.leaflet-popup-content {
  margin: .9rem 1rem;
  font-family: var(--font-testo);
  line-height: 1.5;
  min-width: 12rem;
}

.popup__foto {
  width: 100%;
  height: 7rem;
  object-fit: cover;
  border-radius: calc(var(--raggio) - 4px);
  margin-bottom: .6rem;
}
.popup__titolo {
  font-size: 1rem;
  margin: 0 0 .2rem;
}
.popup__dati {
  margin: 0 0 .5rem;
  font-size: .88rem;
  color: var(--testo-tenue);
}
.popup__accesso {
  margin: 0 0 .5rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--conferma);
}

/* Il nome della tappa che segue il puntatore. */
.leaflet-tooltip {
  font-family: var(--font-testo);
  font-size: .88rem;
  font-weight: 600;
  padding: .35rem .7rem;
  border: 0;
  border-radius: var(--raggio);
  background: var(--inchiostro);
  color: #fff;
  box-shadow: var(--ombra-media);
}
.leaflet-tooltip-top::before { border-top-color: var(--inchiostro); }

/* Il tratto sotto il puntatore diventa una mano: senza, non si capisce che
   e cliccabile. */
.leaflet-interactive { cursor: pointer; }

/* L'attribuzione dei tasselli e un obbligo della licenza dei dati: resta
   leggibile, non si nasconde. */
.leaflet-control-attribution {
  font-size: .72rem;
  background: rgba(255, 255, 255, .85);
}

/* Leaflet toglie la sottolineatura ai collegamenti dell'attribuzione e li
   distingue solo con il blu, che sul grigio del testo intorno arriva a
   2,56:1: chi non distingue i colori non li riconosce come collegamenti.

   Il selettore parte da .leaflet-container di proposito: leaflet.css e
   caricato DOPO questo foglio, e la sua regola ha la stessa forza di
   «.leaflet-control-attribution a». A parita di forza vince l'ultima letta,
   e la sottolineatura sparirebbe. Con il contenitore davanti questa regola
   e piu specifica e vince comunque, in qualunque ordine si carichino. */
.leaflet-container .leaflet-control-attribution a {
  text-decoration: underline;
}

/* Comandi della mappa (zoom, attribuzione). Il foglio di Leaflet, al fuoco,
   schiarisce appena lo sfondo del pulsante: un cambiamento quasi invisibile.
   Qui si aggiunge il contorno, in inchiostro perche resti visibile sopra
   qualunque tassello, mare compreso. */
.leaflet-control a:focus {
  /* #180507 e --inchiostro, scritto per esteso per i validatori. */
  outline: 3px solid #180507;
  outline-offset: 2px;
}

/* Salto della mappa: creato da mappa.js come primo elemento del riquadro,
   porta all'elenco sotto la mappa senza attraversare tutti i segnaposti.
   Come il salto al contenuto, compare solo quando riceve il fuoco.

   I selettori partono da .leaflet-container perche leaflet.css, caricato
   dopo questo foglio, colora e dimensiona ogni collegamento della mappa: a
   parita di forza vincerebbe il suo. */
.leaflet-container .mappa-salta {
  position: absolute;
  left: -9999px;
  top: .75rem;
  z-index: 1001;          /* sopra i comandi della mappa, che stanno a 1000 */
  padding: .65rem 1.1rem;
  background: #180507;    /* --inchiostro, per esteso per i validatori */
  color: #fff;
  font-family: var(--font-testo);
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: .18em;
  border-radius: var(--raggio);
}
.leaflet-container .mappa-salta:focus {
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
}

/* --- alternativa testuale --- */
.mappa-elenco {
  margin-top: var(--spazio-3);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta-tenue);
}
.mappa-elenco > summary {
  padding: .85rem 1.1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--inchiostro);
  list-style-position: inside;
  border-radius: var(--raggio);
}
.mappa-elenco > summary:hover { background: rgba(24, 5, 7, .04); }
.mappa-elenco[open] > summary { border-bottom: 1px solid var(--bordo); }

.mappa-elenco__corpo { padding: 1rem 1.1rem 1.2rem; }
.mappa-elenco__corpo h3 {
  font-size: 1.02rem;
  margin-top: var(--spazio-2);
}
.mappa-elenco__corpo h3:first-child { margin-top: 0; }
.mappa-elenco__corpo ul {
  margin: 0 0 var(--spazio-2);
  padding-left: 1.3rem;
}
.mappa-elenco__corpo li { margin-bottom: .3rem; }
.tenue { color: var(--testo-tenue); font-size: .9rem; }

/* Inconvenienti nel disegno della mappa: compaiono qui invece di restare
   nella console, che chi amministra il sito non apre mai. */
.mappa-errore {
  padding: .7rem .9rem;
  margin-bottom: var(--spazio-2);
  border-left: 4px solid var(--attenzione);
  background: #FDF0DC;
  color: #7C4A03;
  font-size: .9rem;
  border-radius: 0 var(--raggio) var(--raggio) 0;
}

/* --- legenda --- */
.mappa-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  margin-top: var(--spazio-2);
  padding: 0;
  list-style: none;
  font-size: .88rem;
  color: var(--testo-tenue);
}
.mappa-legenda li {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.mappa-legenda i {
  width: 1.6rem;
  height: .3rem;
  border-radius: 999px;
  flex: none;
}
.mappa-legenda i.punto {
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--bordo);
}

/* Nella legenda il pallino porta lo stesso simbolo che compare sulla mappa:
   una legenda che mostra qualcosa di diverso da cio che spiega e peggio che
   non averla. */
.mappa-legenda i.punto--simbolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: #fff;
  font-size: .6rem;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   16. Scheda del luogo
   -------------------------------------------------------------------------- */

.luogo-testata { padding-block: var(--spazio-5) var(--spazio-2); }

.briciole {
  font-size: .88rem;
  color: var(--testo-tenue);
  margin-bottom: var(--spazio-2);
}
.briciole a { color: var(--testo-tenue); }
.briciole span { margin-inline: .35rem; }

.luogo-sottotitolo {
  font-size: 1.15rem;
  color: var(--testo-tenue);
  max-width: 60ch;
}

.luogo-etichette {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block: var(--spazio-2);
}

.etichetta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  /* Fondo tenue e testo scuro: un fondo pieno con il colore della categoria
     costringerebbe a verificare il contrasto per ognuna delle otto. */
  background: color-mix(in srgb, var(--tinta, #2C9EDD) 14%, #fff);
  color: var(--inchiostro);
  border: 1px solid color-mix(in srgb, var(--tinta, #2C9EDD) 35%, #fff);
}
.etichetta--luogo {
  background: var(--carta-tenue);
  border-color: var(--bordo);
  color: var(--testo-tenue);
}

/* Il pulsante che apre la lavagna: riconoscibile ma non allarmante. */
.pulsante--accesso {
  background: var(--carta-tenue);
  border-color: var(--bordo);
  color: var(--inchiostro);
  font-size: 1rem;
}
.pulsante--accesso:hover {
  background: var(--inchiostro);
  color: #fff;
  border-color: var(--inchiostro);
}
.pulsante--accesso i { font-size: 1.3em; }

/* --- la lavagna --- */
.lavagna {
  border: 2px solid var(--bordo);
  border-radius: var(--raggio-largo);
  padding: var(--spazio-4);
  background: var(--carta-tenue);
  margin-top: var(--spazio-2);
}
.lavagna__titolo { margin-bottom: .6rem; }
.lavagna__titolo:focus-visible { outline: 3px solid var(--blu-testo); outline-offset: 4px; }

.lavagna__premessa {
  max-width: 62ch;
  color: var(--testo-tenue);
  margin-bottom: var(--spazio-3);
}
.lavagna__sezione { margin-top: var(--spazio-4); font-size: 1.1rem; }

.livelli {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--spazio-3);
}

.livello {
  display: flex;
  gap: .9rem;
  padding: 1rem;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}
.livello__icona { font-size: 1.6rem; color: var(--inchiostro); flex: none; }
.livello__nome { font-size: 1.02rem; margin-bottom: .25rem; }
.livello__valore { margin-bottom: .4rem; }
.livello__scala {
  display: block;
  font-size: .85rem;
  color: var(--testo-tenue);
}

/* La barra accompagna la parola, non la sostituisce: da sola non direbbe
   nulla a chi non vede, e il colore da solo nulla a chi non lo distingue. */
.livello__barra {
  display: flex;
  gap: .2rem;
  margin-bottom: .4rem;
}
.livello__barra i {
  width: 2rem;
  height: .45rem;
  border-radius: 999px;
  background: var(--bordo);
}
.livello__barra i.acceso.liv1 { background: #B3261E; }
.livello__barra i.acceso.liv2 { background: #B45309; }
.livello__barra i.acceso.liv3 { background: #A16207; }
.livello__barra i.acceso.liv4 { background: #4D7C0F; }
.livello__barra i.acceso.liv5 { background: #2E7D32; }

.livello__note {
  font-size: .92rem;
  color: var(--testo);
  margin-bottom: .3rem;
}
.livello__data { font-size: .82rem; color: var(--testo-tenue); margin: 0; }

/* --- servizi rilevati --- */
.servizi-rilevati {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: .6rem;
}
.servizio {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  flex-wrap: wrap;
}
.servizio__icona { color: var(--testo-tenue); }
.servizio__nome { flex: 1; }
.servizio__esito {
  font-weight: 700;
  font-size: .88rem;
  padding: .1rem .55rem;
  border-radius: 999px;
}
.servizio--si       .servizio__esito { background: #E6F4E7; color: #1B5E20; }
.servizio--parziale .servizio__esito { background: #FDF0DC; color: #7C4A03; }
.servizio--no       .servizio__esito { background: #FBE7E6; color: #8C1D18; }
.servizio__note {
  flex-basis: 100%;
  font-size: .85rem;
  color: var(--testo-tenue);
}

.lavagna__azione {
  margin-top: var(--spazio-4);
  padding-top: var(--spazio-3);
  border-top: 1px solid var(--bordo);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2) var(--spazio-3);
}
.lavagna__azione p { margin: 0; color: var(--testo-tenue); }

/* --- corpo della scheda --- */
.luogo-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--spazio-4);
  align-items: start;
}

.luogo-figura { margin: 0 0 var(--spazio-3); }
.luogo-figura img { border-radius: var(--raggio); width: 100%; }

/* --- le tre forme del racconto --- */
.guide {
  margin-block: var(--spazio-4);
  padding: var(--spazio-3);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-largo);
  background: var(--carta-tenue);
}
.guide__titolo { font-size: 1.25rem; margin-bottom: var(--spazio-2); }
.guide__elenco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--spazio-3);
}
.guida {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1rem;
}
.guida__nome {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1rem;
  margin-bottom: .3rem;
}
.guida__nota {
  font-size: .88rem;
  color: var(--testo-tenue);
  margin-bottom: .8rem;
}
.guida__lettore { width: 100%; border-radius: calc(var(--raggio) - 4px); }
video.guida__lettore { background: #000; aspect-ratio: 16 / 9; }
.guida--lis { border-color: var(--blu); }

.avviso-lingua {
  padding: .7rem 1rem;
  background: var(--carta-tenue);
  border-left: 4px solid var(--giallo);
  border-radius: 0 var(--raggio) var(--raggio) 0;
  color: var(--testo-tenue);
}

/* --- gallery --- */
.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  gap: var(--spazio-2);
}
.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raggio);
}
.gallery figcaption {
  font-size: .85rem;
  color: var(--testo-tenue);
  margin-top: .3rem;
}

/* --- colonna delle informazioni --- */
.luogo-lato {
  position: sticky;
  top: var(--spazio-2);
  padding: var(--spazio-3);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-largo);
  background: var(--carta-tenue);
}
.visita__titolo { font-size: 1.1rem; margin-bottom: var(--spazio-2); }
.visita__titolo + .visita { margin-top: 0; }

.visita { margin: 0 0 var(--spazio-3); }
.visita dt {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--testo-tenue);
  margin-top: .8rem;
}
.visita dt:first-child { margin-top: 0; }
.visita dd { margin: .15rem 0 0; }

.mappa-luogo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--raggio);
  overflow: hidden;
  border: 1px solid var(--bordo);
}

.coordinate {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  align-items: baseline;
  margin-top: .6rem;
  font-size: .85rem;
}
.coordinate__valori {
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
  /* Selezionabile con un doppio clic: si copiano in un navigatore. */
  user-select: all;
}

.pulsante--largo { width: 100%; margin-top: var(--spazio-2); }

.vicini { list-style: none; margin: 0; padding: 0; }
.vicini li {
  display: flex;
  gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--bordo);
  font-size: .92rem;
}
.vicini li:last-child { border-bottom: 0; }
.vicini__icona { color: var(--tinta, var(--blu)); flex: none; }
.vicini strong { display: block; }
.vicini .tenue { display: block; }

@media (max-width: 61.9375rem) {
  .luogo-corpo { grid-template-columns: 1fr; }
  .luogo-lato { position: static; }
  .livelli { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   17. Legenda della scala e finestra di ingrandimento
   -------------------------------------------------------------------------- */

/* --- legenda della scala di accessibilità --- */
.legenda-scala {
  margin-bottom: var(--spazio-3);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
}
.legenda-scala > summary {
  padding: .7rem 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  border-radius: var(--raggio);
}
.legenda-scala > summary:hover { background: rgba(24, 5, 7, .04); }
.legenda-scala[open] > summary { border-bottom: 1px solid var(--bordo); }

.legenda-scala__corpo { padding: 1rem; }
.legenda-scala__corpo > .tenue { max-width: 66ch; margin-bottom: var(--spazio-2); }

.legenda-scala__voci { margin: 0; }
.legenda-scala__voci dt {
  display: flex;
  align-items: center;
  /* La barra e l'etichetta stanno affiancate finche c'e spazio; quando non ce
     n'e piu, l'etichetta scende sotto invece di uscire dallo schermo. */
  flex-wrap: wrap;
  gap: .3rem .6rem;
  margin-top: .9rem;
}
.legenda-scala__voci dt:first-child { margin-top: 0; }
.legenda-scala__voci dd {
  margin: .1rem 0 0 0;
  padding-left: calc(5 * 2rem + 4 * .2rem + .6rem);
  font-size: .9rem;
  color: var(--testo-tenue);
}

/* --- gallery: ogni immagine è un pulsante --- */
.gallery__apri {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--raggio);
  overflow: hidden;
  background: none;
  cursor: zoom-in;
}
.gallery__apri img { transition: transform var(--transizione); }
.gallery__apri:hover img { transform: scale(1.04); }

.gallery__lente {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(24, 5, 7, .72);
  color: #fff;
  font-size: .95rem;
}

/* --- finestra di ingrandimento --- */
.lente {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto auto;
  align-items: center;
  gap: .5rem;
  padding: 1rem;
  background: rgba(12, 6, 7, .94);
  color: #fff;
}
.lente[hidden] { display: none; }

/* Il corpo non scorre dietro la finestra: altrimenti chiudendola ci si
   ritrova in un punto diverso della pagina da dove si era partiti. */
body.senza-scorrimento { overflow: hidden; }

.lente__barra {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
}
.lente__conta {
  margin: 0;
  font-size: .9rem;
  color: rgba(255, 255, 255, .8);
  font-variant-numeric: tabular-nums;
}
.lente__comandi { display: flex; gap: .4rem; }

.lente__pulsante {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transizione);
}
.lente__pulsante:hover { background: rgba(255, 255, 255, .2); }
.lente__pulsante:disabled { opacity: .35; cursor: default; }
.lente__pulsante:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.lente__freccia {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}
.lente__freccia:hover { background: rgba(255, 255, 255, .24); }
.lente__freccia:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lente__freccia[hidden] { display: none; }

.lente__area {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100%;
  min-height: 0;
}
.lente__area--ingrandita { cursor: grab; }
.lente__area--ingrandita:active { cursor: grabbing; }

.lente__area img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--raggio);
  transform-origin: center;
  transition: transform var(--transizione);
  cursor: zoom-in;
}

.lente__didascalia,
.lente__aiuto {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
}
.lente__didascalia { font-size: 1rem; }
.lente__aiuto {
  font-size: .82rem;
  color: rgba(255, 255, 255, .6);
}

@media (max-width: 47.9375rem) {
  .lente { padding: .6rem; gap: .35rem; }
  .lente__freccia { width: 2.75rem; height: 2.75rem; }
  /* Su schermo stretto l'aiuto da tastiera non serve a nessuno. */
  .lente__aiuto { display: none; }
  /* Su schermo stretto l'etichetta va sempre sotto la barra: affiancarla
     lascerebbe due o tre parole per riga, con la scala che si allontana da
     cio che descrive. */
  .legenda-scala__voci dt {
    display: block;
    margin-top: 1.1rem;
  }
  .legenda-scala__voci dt .livello__barra { margin-bottom: .35rem; }
  .legenda-scala__voci dd { padding-left: 0; }

  /* Le barre si restringono per lasciare respiro al testo. */
  .legenda-scala__voci .livello__barra i { width: 1.6rem; }
}

/* --- mappa inserita in una pagina editoriale --- */
/* Esce dalla colonna del testo, che e stretta per la leggibilita: una mappa
   larga quanto una riga di prosa non si consulta. */
.segnaposto-mappa {
  margin-block: var(--spazio-4);
  max-width: none;
}
.segnaposto-mappa .mappa { min-height: 22rem; }

/* --- pagina a una colonna --- */
/* L'immagine occupa tutta la larghezza del contenitore invece di stare in
   una colonna: e la resa che serve a un testo lungo o a una pagina con la
   mappa. */
.pagina-figura-larga {
  margin: 0 0 var(--spazio-4);
}
.pagina-figura-larga img {
  width: 100%;
  max-height: 26rem;
  object-fit: cover;
  border-radius: var(--raggio);
}

/* A una colonna il testo occupa davvero tutta la larghezza del contenitore,
   com'e dichiarato nella scelta del pannello. Limitarlo lascerebbe meta
   pagina vuota, che e poi l'aspetto di due colonne con la seconda sguarnita.
   Il contenitore stesso, a 1180 pixel, e il solo limite. */
.testo-redazionale--largo { max-width: none; }
.testo-redazionale--largo > .segnaposto-mappa {
  max-width: none;
  width: 100%;
}

/* --- elenco dei luoghi inserito in una pagina --- */
.griglia-luoghi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: var(--spazio-3);
  margin-block: var(--spazio-4);
}

.scheda-luogo {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
  background: var(--carta);
  transition: box-shadow var(--transizione), transform var(--transizione);
}
.scheda-luogo:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombra-media);
}

.scheda-luogo__figura {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--carta-tenue);
}
.scheda-luogo__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Riquadro neutro per i luoghi ancora senza fotografia: compaiono ugualmente,
   perche escluderli significherebbe nascondere un luogo per un dettaglio di
   allestimento. */
.scheda-luogo__figura--vuota {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bordo);
  font-size: 2.5rem;
}

.scheda-luogo__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.1rem 1.2rem;
}

.scheda-luogo__nome {
  font-size: 1.08rem;
  margin-bottom: .15rem;
}
.scheda-luogo__comune {
  font-size: .85rem;
  color: var(--testo-tenue);
  margin-bottom: .6rem;
}
.scheda-luogo__testo {
  font-size: .94rem;
  margin-bottom: var(--spazio-2);
}

/* Il pulsante si allinea in basso: con descrizioni di lunghezza diversa,
   altrimenti, ogni scheda lo mostrerebbe a un'altezza propria e la griglia
   sembrerebbe sbilanciata. */
.scheda-luogo__azione {
  margin-top: auto;
  align-self: flex-start;
}

/* --- elenco delle strutture e dei servizi --- */
.elenco-servizi { margin-block: var(--spazio-4); }

.elenco-servizi__gruppo {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.2rem;
  margin: var(--spazio-4) 0 var(--spazio-2);
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--giallo);
}
.elenco-servizi__gruppo:first-child { margin-top: 0; }
.elenco-servizi__quanti {
  margin-left: auto;
  font-size: .82rem;
  font-weight: 600;
  color: var(--testo-tenue);
  background: var(--carta-tenue);
  border-radius: 999px;
  padding: .1rem .6rem;
}

.griglia-servizi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: var(--spazio-2);
}

.scheda-servizio {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
}

.scheda-servizio__testata {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: .5rem;
}
.scheda-servizio__icona {
  font-size: 1.3rem;
  color: var(--tinta, var(--blu));
  flex: none;
  line-height: 1.4;
}
.scheda-servizio__nome {
  font-size: 1.02rem;
  margin: 0;
}
.scheda-servizio__nome a { color: var(--inchiostro); text-decoration: none; }
.scheda-servizio__nome a:hover { text-decoration: underline; }
.scheda-servizio__tipo {
  font-size: .85rem;
  color: var(--testo-tenue);
  margin: .1rem 0 0;
}
.scheda-servizio__bollo {
  margin-left: auto;
  flex: none;
  font-size: .75rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: #E6F4E7;
  color: #1B5E20;
}

.scheda-servizio__testo {
  font-size: .92rem;
  margin-bottom: .6rem;
}

/* Accessibilità rilevata: si mostrano i soli tipi per cui il sopralluogo ha
   dato esito positivo. Un elenco di cio che non e accessibile, in un riquadro
   di sintesi, sarebbe piu scoraggiante che informativo — il dettaglio sta
   nella scheda. */
.scheda-servizio__accesso {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .6rem;
}
.bollo-accesso {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: #E6F4E7;
  color: #1B5E20;
}

.scheda-servizio__dati {
  margin: 0 0 .7rem;
  font-size: .88rem;
  color: var(--testo);
}
.scheda-servizio__dati dd {
  margin: 0 0 .25rem;
  display: flex;
  gap: .45rem;
}
.scheda-servizio__dati dd i {
  color: var(--testo-tenue);
  width: 1rem;
  text-align: center;
  flex: none;
  margin-top: .2rem;
}

.scheda-servizio__recapiti {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: auto 0 0;
  padding-top: .6rem;
  border-top: 1px solid var(--bordo);
}
.scheda-servizio__recapiti a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  /* Area sensibile piena: si tocca con il pollice, camminando. */
  min-height: 2.5rem;
  padding: .3rem .7rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--blu-testo);
}
.scheda-servizio__recapiti a:hover {
  background: var(--carta-tenue);
  color: var(--banner-da);
}

/* --------------------------------------------------------------------------
   18. Scheda della tappa
   -------------------------------------------------------------------------- */

.tappa-testata { padding-block: var(--spazio-5) var(--spazio-2); }

.tappa-numero {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin-bottom: .2rem;
}

.tappa-estremi {
  font-size: 1.15rem;
  color: var(--testo-tenue);
  margin-bottom: var(--spazio-2);
}

/* --- i numeri della tappa --- */
.dati-tappa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: 1px;
  list-style: none;
  margin: var(--spazio-3) 0;
  padding: 0;
  background: var(--bordo);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
}
.dati-tappa li {
  background: var(--carta);
  padding: .9rem 1rem;
  text-align: center;
}
.dati-tappa__valore {
  display: block;
  font-family: var(--font-titolo);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--inchiostro);
  line-height: 1.2;
}
.dati-tappa__voce {
  display: block;
  font-size: .82rem;
  color: var(--testo-tenue);
  margin-top: .15rem;
}

/* --- percorribilità ---
   Ha un riquadro proprio e non sta fra gli altri numeri: e il dato per cui
   questo sito esiste. */
.percorribilita {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--spazio-2);
  list-style: none;
  margin: 0 0 var(--spazio-3);
  padding: 0;
}
.percorribilita__voce {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--bordo);
  border-left-width: 5px;
  border-radius: var(--raggio);
  background: var(--carta);
}
.percorribilita__voce i { font-size: 1.5rem; }
.percorribilita__voce strong { display: block; }

.percorribilita__voce--si            { border-left-color: #2E7D32; }
.percorribilita__voce--si i          { color: #2E7D32; }
.percorribilita__voce--parziale      { border-left-color: #A16207; }
.percorribilita__voce--parziale i    { color: #A16207; }
.percorribilita__voce--no            { border-left-color: #B3261E; }
.percorribilita__voce--no i          { color: #B3261E; }
/* Non rilevato resta neutro: un colore d'allarme direbbe "no", che e cosa
   diversa da "non lo sappiamo". */
.percorribilita__voce--non_rilevato       { border-left-color: var(--bordo); }
.percorribilita__voce--non_rilevato i     { color: var(--testo-tenue); }

/* --- traccia --- */
.tappa-traccia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
  margin-top: var(--spazio-2);
}
.tappa-traccia .tenue { max-width: 40ch; }

/* --- varianti --- */
.elenco-varianti {
  list-style: none;
  margin: var(--spazio-2) 0 0;
  padding: 0;
}
.variante {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  padding: .8rem 1rem;
  border: 1px solid var(--bordo);
  border-left: 5px solid var(--magenta);
  border-radius: var(--raggio);
  margin-bottom: .5rem;
}
.variante--for_all { border-left-color: var(--verde); }
.variante a { font-weight: 600; }

/* --- distanza dal percorso --- */
.scheda-luogo__accesso { margin-bottom: .5rem; }

/* --- tappa precedente e successiva --- */
.tappe-vicine {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
  justify-content: space-between;
}
.tappe-vicine__voce {
  flex: 1 1 15rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  text-decoration: none;
  color: var(--inchiostro);
}
.tappe-vicine__voce:hover { background: var(--carta-tenue); color: var(--inchiostro); }
.tappe-vicine__voce--dx { text-align: right; }
.tappe-vicine__voce strong { display: block; margin-top: .15rem; }

@media (max-width: 47.9375rem) {
  .dati-tappa { grid-template-columns: repeat(2, 1fr); }

  .tappe-vicine__voce--dx { text-align: left; }
}

/* --------------------------------------------------------------------------
   19. Segnalazione di una barriera
   -------------------------------------------------------------------------- */

.segnala-testata { padding-block: var(--spazio-5) var(--spazio-2); }
.segnala-premessa { font-size: 1.1rem; color: var(--testo-tenue); max-width: 60ch; }

.modulo-segnala { max-width: 46rem; }

/* I tre passi sono riquadri distinti e numerati: un modulo lungo compilato in
   piedi, con una mano sola, ha bisogno di dire a che punto si e. */
.passo {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-largo);
  padding: var(--spazio-3);
  margin-bottom: var(--spazio-3);
  background: var(--carta);
}
.passo__titolo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-titolo);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--inchiostro);
  padding: 0;
  margin-bottom: .6rem;
}
.passo__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 50%;
  background: var(--giallo);
  color: var(--inchiostro);
  font-size: 1rem;
}
.passo__aiuto {
  color: var(--testo-tenue);
  font-size: .93rem;
  margin-bottom: var(--spazio-2);
  max-width: 58ch;
}

.campo { margin-bottom: var(--spazio-2); }
.campo > label,
.campo > legend {
  display: block;
  font-weight: 600;
  margin-bottom: .3rem;
}
.campo__aiuto {
  font-size: .86rem;
  color: var(--testo-tenue);
  margin-top: .3rem;
  max-width: 58ch;
}
.obbligatorio { color: var(--errore); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="file"],
.campo select,
.campo textarea {
  width: 100%;
  /* L'area di tocco non scende sotto i 44 pixel: si compila camminando. */
  min-height: 2.75rem;
  padding: .6rem .8rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  font-family: inherit;
  font-size: 1rem;
  color: var(--testo);
  background: var(--carta);
}
.campo textarea { min-height: 6rem; resize: vertical; }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 3px solid var(--blu-testo);
  outline-offset: 1px;
}

.form-riga {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--spazio-2);
}

/* --- posizione --- */
.posizione-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
  margin-bottom: var(--spazio-2);
}

.mappa-scelta {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 18rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
  margin-bottom: .5rem;
}

/* --- gravità --- */
.gravita { border: 0; padding: 0; margin-bottom: var(--spazio-2); }
.gravita__scelte { display: grid; gap: .35rem; }
.gravita__voce {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem .8rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  cursor: pointer;
}
.gravita__voce:hover { background: var(--carta-tenue); }
.gravita__voce input { margin-top: .2rem; flex: none; }
.gravita__voce:focus-within {
  outline: 3px solid var(--blu-testo);
  outline-offset: 1px;
}

.anteprima-foto {
  margin-top: .6rem;
  max-height: 14rem;
  border-radius: var(--raggio);
}

/* --- consenso --- */
.consenso__voce {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-weight: 400;
}
.consenso__voce input { margin-top: .25rem; flex: none; width: 1.15rem; height: 1.15rem; }

.modulo-segnala__invio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
}
.modulo-segnala__invio .tenue { max-width: 34ch; }

/* --- esito --- */
.esito {
  padding: 1rem 1.2rem;
  border-radius: var(--raggio);
  margin-bottom: var(--spazio-3);
  border-left: 5px solid;
}
.esito:focus-visible { outline: 3px solid var(--blu-testo); outline-offset: 2px; }
.esito--ok     { background: #E6F4E7; border-color: #2E7D32; color: #1B5E20; }
.esito--errore { background: #FBE7E6; border-color: #B3261E; color: #8C1D18; }

/* --- richiamo alla segnalazione, in fondo alla scheda della tappa --- */
.richiamo-segnala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
  padding: var(--spazio-3) var(--spazio-4);
  border-radius: var(--raggio-largo);
  background: var(--carta-tenue);
  border: 1px solid var(--bordo);
}
.richiamo-segnala h2 { font-size: 1.25rem; margin-bottom: .35rem; }
.richiamo-segnala p { color: var(--testo-tenue); max-width: 52ch; margin: 0; }

/* --- barriere segnalate sulla mappa --- */
/* Il segnaposto porta un simbolo dentro il cerchio, non il solo colore: chi
   non distingue il rosso dal verde deve poter dire se una barriera e ancora
   presente o e stata risolta. */
.segnaposto--barriera .segnaposto__cerchio {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .75rem;
}

/* --- elenco delle tappe --- */
.elenco-tappe {
  list-style: none;
  counter-reset: none;
  margin: var(--spazio-4) 0;
  padding: 0;
  display: grid;
  gap: var(--spazio-3);
}

.tappa-voce > article {
  border: 1px solid var(--bordo);
  border-left: 5px solid var(--giallo);
  border-radius: var(--raggio);
  padding: var(--spazio-3);
  background: var(--carta);
}

/* Con la fotografia il riquadro diventa a due colonne: immagine a sinistra,
   dati e collegamento a destra.
   
   ATTENZIONE ALL'ORDINE: questa regola deve precedere quella per gli schermi
   stretti, che riporta il riquadro a una colonna. A parita di specificita
   vince l'ultima dichiarata, e invertendole la colonna singola varrebbe
   ovunque. */
.tappa-voce--con-figura > article {
  display: grid;
  /* La colonna dell'immagine e larga il doppio di prima, ma espressa anche
     in percentuale: a 30rem fisse, su uno schermo da tablet, al testo
     resterebbero poche parole per riga. Cosi cresce con il riquadro e si
     ferma quando diventerebbe sproporzionata. */
  grid-template-columns: minmax(0, clamp(15rem, 40%, 30rem)) minmax(0, 1fr);
  gap: var(--spazio-3);
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}
.tappa-voce__figura {
  margin: 0;
  height: 100%;
  min-height: 15rem;
  background: var(--carta-tenue);
}
.tappa-voce__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tappa-voce--con-figura .tappa-voce__corpo {
  padding: var(--spazio-3) var(--spazio-3) var(--spazio-3) 0;
}


.tappa-voce__testata {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: .7rem;
}
.tappa-voce__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 50%;
  background: var(--carta-tenue);
  border: 1px solid var(--bordo);
  font-family: var(--font-titolo);
  font-weight: 700;
  color: var(--inchiostro);
}
.tappa-voce__nome { font-size: 1.15rem; margin: 0; }
.tappa-voce__nome a { color: var(--inchiostro); text-decoration: none; }
.tappa-voce__nome a:hover { text-decoration: underline; }
.tappa-voce__estremi {
  margin: .15rem 0 0;
  color: var(--testo-tenue);
  font-size: .95rem;
}

.tappa-voce__dati {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  list-style: none;
  margin: 0 0 .7rem;
  padding: 0;
  font-size: .92rem;
  color: var(--testo);
}
.tappa-voce__dati li {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.tappa-voce__dati i { color: var(--testo-tenue); }

/* La percorribilita sta su una riga propria: su questo cammino e cio che
   decide se una tappa si puo affrontare, e mescolarla ai chilometri la
   farebbe leggere di sfuggita. */
.tappa-voce__accesso {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .7rem;
}

.bollo-percorribilita {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  padding: .25rem .7rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.bollo-percorribilita--si       { background: #E6F4E7; color: #1B5E20; }
.bollo-percorribilita--parziale { background: #FDF0DC; color: #7C4A03; }
.bollo-percorribilita--no       { background: #FBE7E6; color: #8C1D18; }
/* Non rilevata resta neutra: un colore d'allarme direbbe "no", che e cosa
   diversa da "non lo sappiamo". */
.bollo-percorribilita--ignoto   {
  background: var(--carta-tenue);
  color: var(--testo-tenue);
  border-color: var(--bordo);
}

.tappa-voce__testo {
  font-size: .95rem;
  margin-bottom: .8rem;
  max-width: 62ch;
}

.tappa-voce__varianti {
  margin-bottom: .8rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta-tenue);
}
.tappa-voce__varianti > summary {
  padding: .55rem .9rem;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 600;
  border-radius: var(--raggio);
}
.tappa-voce__varianti > summary:hover { background: rgba(24, 5, 7, .04); }
.tappa-voce__varianti[open] > summary { border-bottom: 1px solid var(--bordo); }
.tappa-voce__varianti ul {
  list-style: none;
  margin: 0;
  padding: .7rem .9rem;
}
.tappa-voce__varianti .variante {
  background: var(--carta);
  margin-bottom: .4rem;
}
.tappa-voce__varianti .variante:last-child { margin-bottom: 0; }

@media (max-width: 47.9375rem) {
  /* Su schermo stretto la fotografia va sopra: affiancata a un testo di
     poche parole per riga renderebbe illeggibili entrambi.

     Queste regole devono stare dopo quelle generali dell'elenco, non nella
     sezione della scheda: a parita di specificita vince l'ultima dichiarata,
     e messe prima non avrebbero alcun effetto. */
  .tappa-voce--con-figura > article { grid-template-columns: 1fr; }
  .tappa-voce__figura { min-height: 0; aspect-ratio: 16 / 9; }
  .tappa-voce--con-figura .tappa-voce__corpo {
    padding: 0 var(--spazio-3) var(--spazio-3);
  }
}

/* --- elenco delle notizie --- */
.elenco-news {
  display: grid;
  gap: var(--spazio-3);
  margin-block: var(--spazio-4);
}

.voce-news {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta);
  overflow: hidden;
}

/* Con la fotografia il riquadro diventa a due colonne, come l'elenco delle
   tappe. La colonna cresce con il riquadro e si ferma prima di lasciare al
   testo poche parole per riga. */
.voce-news--con-figura {
  display: grid;
  grid-template-columns: minmax(0, clamp(14rem, 36%, 26rem)) minmax(0, 1fr);
  align-items: stretch;
}
.voce-news__figura {
  margin: 0;
  height: 100%;
  min-height: 13rem;
  background: var(--carta-tenue);
}
.voce-news__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voce-news__corpo { padding: var(--spazio-3); }

.voce-news__etichette {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .5rem;
}
.etichetta-news {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: var(--carta-tenue);
  color: var(--testo-tenue);
  border: 1px solid var(--bordo);
}
.etichetta-news--evento {
  background: #E3F0FA;
  color: #14567B;
  border-color: transparent;
}
/* Un evento passato resta consultabile ma si distingue subito: chi arriva da
   un collegamento vecchio non deve leggere l'orario e mettersi in viaggio. */
.etichetta-news--concluso {
  background: var(--carta-tenue);
  color: var(--testo-tenue);
  border-color: var(--bordo);
}

.voce-news__titolo { font-size: 1.2rem; margin: 0 0 .3rem; }
.voce-news__titolo a { color: var(--inchiostro); text-decoration: none; }
.voce-news__titolo a:hover { text-decoration: underline; }

.voce-news__quando {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  font-size: .9rem;
  color: var(--testo-tenue);
  margin-bottom: .6rem;
}

.voce-news__testo { font-size: .95rem; margin-bottom: .9rem; max-width: 60ch; }

@media (max-width: 47.9375rem) {
  .voce-news--con-figura { grid-template-columns: 1fr; }
  .voce-news__figura { min-height: 0; aspect-ratio: 16 / 9; }
}


/* --- scheda della notizia --- */
.notizia-testata { padding-block: var(--spazio-5) var(--spazio-2); }

.avviso-concluso {
  display: inline-block;
  padding: .6rem 1rem;
  margin-bottom: var(--spazio-2);
  border-radius: var(--raggio);
  background: #FDF0DC;
  color: #7C4A03;
  border-left: 4px solid var(--attenzione);
}

.notizia-sommario {
  font-size: 1.15rem;
  color: var(--testo-tenue);
  max-width: 62ch;
  margin-bottom: var(--spazio-2);
}

.notizia-dati {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  font-size: .95rem;
  color: var(--testo-tenue);
}
.notizia-dati span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.notizia-figura { margin: var(--spazio-2) 0 0; }
.notizia-figura img {
  width: 100%;
  max-height: 26rem;
  object-fit: cover;
  border-radius: var(--raggio);
}

.altre-news { list-style: none; margin: 0; padding: 0; }
.altre-news li {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  align-items: baseline;
  padding: .6rem 0;
  border-bottom: 1px solid var(--bordo);
}
.altre-news li:last-child { border-bottom: 0; }
.altre-news a { font-weight: 600; }

/* --- stemmi dei comuni nel piè di pagina --- */
/* Quattro per riga: con sette elementi si dispongono in 4 + 3, che e la
   forma richiesta e anche quella che tiene la seconda riga centrata sotto
   la prima senza buchi laterali. */
.pie__comuni {
  padding-left: var(--spazio-4);
  border-left: 1px solid var(--bordo);
}
.pie__comuni-titolo {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--testo-tenue);
  margin-bottom: .6rem;
}
.pie__stemmi {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: .7rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-items: center;
  align-items: center;
}
.pie__stemmi img {
  height: 2rem;
  width: auto;
  /* Gli stemmi hanno proporzioni diverse fra loro: contenendoli invece di
     ritagliarli restano interi, che per uno stemma comunale conta. */
  object-fit: contain;
}

@media (max-width: 61.9375rem) {
  .pie__comuni {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--bordo);
    padding-top: var(--spazio-3);
    width: 100%;
  }
  .pie__stemmi { justify-items: start; }
}

/*
 * Su schermi larghi logo, menu e comuni stanno su una riga, ma nelle
 * traduzioni i testi si allungano: in inglese il titolo «THE MUNICIPALITIES
 * OF THE PROJECT», in maiuscolo, e quasi il doppio di quello italiano, e
 * mandava a capo l'intero blocco dei comuni. Qui la riga non va a capo e il
 * blocco dei comuni si restringe: il titolo si spezza su due righe, la
 * griglia degli stemmi resta intatta. Dove tutto ci sta gia non cambia
 * nulla. Sotto i 62rem vale la disposizione su piu righe definita sopra.
 */
@media (min-width: 62rem) {
  .pie__interno { flex-wrap: nowrap; }
  .pie__marchio { flex: none; }
  .pie__comuni {
    flex: 0 1 auto;
    min-width: 12rem;
  }
}

@media (max-width: 30rem) {
  .pie__stemmi { grid-template-columns: repeat(3, auto); }
  .pie__stemmi img { height: 3rem; }
}


/* --- testi legali --- */
.legale-data {
  color: var(--testo-tenue);
  font-size: .9rem;
  margin-bottom: var(--spazio-3);
}
/* Un documento legale si legge per intero, non si scorre: la riga piu stretta
   e le voci numerate aiutano a non perdere il segno. */
.testo-legale { /*max-width: 62ch;*/ }
.testo-legale h2 { font-size: 1.3rem; margin-top: var(--spazio-4); }
.testo-legale h3 { font-size: 1.1rem; margin-top: var(--spazio-3); }
.testo-legale li { margin-bottom: .4rem; }

/* --------------------------------------------------------------------------
   Scheda della struttura
   -------------------------------------------------------------------------- */

.struttura-testata { padding-block: var(--spazio-5) var(--spazio-2); }

.struttura-tipo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  color: var(--testo-tenue);
  margin-bottom: .3rem;
}
.struttura-tipo__icona {
  color: var(--tinta, var(--blu));
  font-size: 1.2rem;
}

/* I recapiti stanno in un riquadro proprio e in cima: chi apre questa pagina
   sta decidendo se telefonare o se passare, e far scorrere due schermate per
   trovare un numero e tempo perso a chi e in cammino. */
.struttura-recapiti {
  padding: var(--spazio-3);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-largo);
  background: var(--carta-tenue);
}

/* Con la fotografia il riquadro diventa a due colonne: immagine a sinistra,
   recapiti a destra. La colonna cresce con il riquadro e si ferma prima di
   lasciare ai recapiti poche parole per riga. */
.struttura-recapiti--con-figura {
  display: grid;
  grid-template-columns: minmax(0, clamp(13rem, 36%, 24rem)) minmax(0, 1fr);
  gap: var(--spazio-3);
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}
.struttura-recapiti__figura {
  margin: 0;
  height: 100%;
  min-height: 13rem;
  background: var(--carta);
}
.struttura-recapiti__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.struttura-recapiti--con-figura .struttura-recapiti__dati {
  padding: var(--spazio-3) var(--spazio-3) var(--spazio-3) 0;
}

@media (max-width: 47.9375rem) {
  /* Su schermo stretto la fotografia va sopra: affiancata a un indirizzo
     spezzato su quattro righe renderebbe illeggibili entrambi. */
  .struttura-recapiti--con-figura { grid-template-columns: 1fr; }
  .struttura-recapiti__figura { min-height: 0; aspect-ratio: 16 / 9; }
  .struttura-recapiti--con-figura .struttura-recapiti__dati {
    padding: 0 var(--spazio-3) var(--spazio-3);
  }
}
.struttura-recapiti p {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .5rem;
}
.struttura-recapiti p i {
  color: var(--testo-tenue);
  width: 1.1rem;
  text-align: center;
  flex: none;
  margin-top: .2rem;
}

.struttura-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: var(--spazio-2) 0 0;
}
.struttura-azioni i { color: inherit; width: auto; margin: 0; }

/* Serve anche alla scheda del luogo, che usa la stessa struttura. */
.livello__corpo { flex: 1 1 auto; min-width: 0; }

/* Servizi per l'accessibilita: si elenca anche cio che manca, perche sapere
   che non c'e un bagno accessibile cambia una giornata. Il simbolo distingue
   presente e assente anche senza il colore. */
.elenco-servizi-accesso {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: .5rem 1.4rem;
  list-style: none;
  margin: var(--spazio-3) 0 0;
  padding: 0;
}
.elenco-servizi-accesso li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.elenco-servizi-accesso li i {
  flex: none;
  margin-top: .22rem;
  font-size: .9rem;
}
.elenco-servizi-accesso li.presente i { color: #2E7D32; }
.elenco-servizi-accesso li.assente  i { color: #B3261E; }
.elenco-servizi-accesso li.assente    { color: var(--testo-tenue); }

/* --------------------------------------------------------------------------
   Ricerca nel sito
   -------------------------------------------------------------------------- */

/* --- collegamento nell'intestazione --- */
.intestazione__cerca {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  /* Area di tocco piena: si usa anche camminando, con il telefono in mano. */
  min-height: 2.75rem;
  padding: .4rem .7rem;
  border-radius: var(--raggio);
  color: var(--inchiostro);
  text-decoration: none;
  font-weight: 600;
}
.intestazione__cerca:hover { background: var(--carta-tenue); }
.intestazione__cerca[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--giallo);
}

/* --- modulo --- */
.ricerca { max-width: 46rem; margin-bottom: var(--spazio-3); }
.ricerca__etichetta {
  display: block;
  font-weight: 600;
  margin-bottom: .4rem;
}
.ricerca__riga {
  display: flex;
  gap: .5rem;
}
.ricerca__riga input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.9rem;
  padding: .6rem .9rem;
  font-size: 1.05rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  color: var(--testo);
  background: var(--carta);
}
.ricerca__riga input[type="search"]:focus-visible {
  outline: 3px solid var(--blu-testo);
  outline-offset: 1px;
}
.ricerca .tenue { margin-top: .4rem; }

/* --- esito e suggerimenti --- */
.ricerca-esito { margin-bottom: var(--spazio-3); font-size: 1.05rem; }
.ricerca-vuota ul { padding-left: 1.2rem; }

/* --- risultati --- */
.ricerca-gruppo { margin-bottom: var(--spazio-4); }
.ricerca-gruppo h2 {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.25rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--giallo);
}
.ricerca-gruppo__quanti {
  font-size: .82rem;
  font-weight: 600;
  color: var(--testo-tenue);
  background: var(--carta-tenue);
  border-radius: 999px;
  padding: .1rem .6rem;
}

.ricerca-elenco { list-style: none; margin: 0; padding: 0; }
.ricerca-voce {
  padding: .9rem 0;
  border-bottom: 1px solid var(--bordo);
}
.ricerca-voce:last-child { border-bottom: 0; }
.ricerca-voce__titolo { font-size: 1.08rem; margin: 0 0 .15rem; }
.ricerca-voce__dove {
  font-size: .88rem;
  color: var(--testo-tenue);
  margin: 0 0 .3rem;
}
.ricerca-voce__testo { margin: 0; font-size: .95rem; max-width: 70ch; }

/* L'evidenziazione non si affida al solo colore: anche il peso cambia, cosi
   la parola trovata si distingue per chi non percepisce il giallo. */
.ricerca-voce__testo mark {
  background: #FFE9A8;
  color: var(--inchiostro);
  font-weight: 700;
  padding: 0 .1em;
  border-radius: 2px;
}

@media (max-width: 30rem) {
  /* Sul telefono il margine interno dei passi ruba spazio ai campi: si
     riduce, cosi resta posto per il testo senza sforare. */
  .passo { padding: var(--spazio-2); }
}

@media (max-width: 47.9375rem) {
  .ricerca__riga { flex-direction: column; }
  .ricerca__riga .pulsante { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Barriere segnalate, nelle schede di luoghi e tappe
   -------------------------------------------------------------------------- */

.segnalazioni-scheda h2 { margin-bottom: .3rem; }
.segnalazioni-scheda > .tenue { margin-bottom: var(--spazio-2); }

.elenco-segnalazioni {
  list-style: none;
  margin: 0 0 var(--spazio-2);
  padding: 0;
  display: grid;
  gap: .6rem;
}

.segnalazione {
  padding: .8rem 1rem;
  border: 1px solid var(--bordo);
  border-left: 5px solid #B3261E;
  border-radius: var(--raggio);
  background: var(--carta);
}
/* Una barriera risolta resta consultabile ma non allarma: il filetto passa
   al verde e la gravita non viene piu mostrata. */
.segnalazione--risolta { border-left-color: #2E7D32; }

.segnalazione__testata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .7rem;
  margin: 0 0 .3rem;
}

/* La gravita e scritta a parole: il colore la rafforza, non la sostituisce. */
.segnalazione__gravita {
  font-size: .8rem;
  font-weight: 700;
  padding: .12rem .6rem;
  border-radius: 999px;
  background: var(--carta-tenue);
  color: var(--testo);
}
.segnalazione__gravita--4,
.segnalazione__gravita--5 { background: #FBE7E6; color: #8C1D18; }
.segnalazione__gravita--3 { background: #FDF0DC; color: #7C4A03; }

.segnalazione__testo { margin: 0 0 .3rem; font-size: .95rem; max-width: 70ch; }
.segnalazione__data  { margin: 0; font-size: .85rem; color: var(--testo-tenue); }
.segnalazione__esito {
  margin: .4rem 0 0;
  font-size: .9rem;
  color: #1B5E20;
}

.segnalazioni-risolte {
  margin-bottom: var(--spazio-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--carta-tenue);
}
.segnalazioni-risolte > summary {
  padding: .6rem .9rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
}
.segnalazioni-risolte[open] > summary { border-bottom: 1px solid var(--bordo); }
.segnalazioni-risolte .elenco-segnalazioni { padding: .7rem .9rem; margin: 0; }

.segnalazioni-scheda__azione a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  font-weight: 600;
}

/* --- fotografia allegata alla segnalazione --- */
/* Con la foto la segnalazione diventa a due colonne: la miniatura a sinistra,
   il testo a destra. La miniatura e piccola di proposito: serve a riconoscere
   l'ostacolo, e chi vuole vederlo bene la ingrandisce. */
.segnalazione--con-foto {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
}

.segnalazione__foto {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--raggio);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--carta-tenue);
  aspect-ratio: 4 / 3;
}
.segnalazione__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.segnalazione__foto:focus-visible {
  outline: 3px solid var(--blu-testo);
  outline-offset: 2px;
}
/* La lente in sovrimpressione dice che la miniatura si ingrandisce, anche a
   chi non passa il puntatore sopra: sul telefono il puntatore non c'e. */
.segnalazione__lente {
  position: absolute;
  right: .3rem;
  bottom: .3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: rgba(24, 5, 7, .72);
  color: #fff;
  font-size: .75rem;
}

@media (max-width: 30rem) {
  .segnalazione--con-foto { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .7rem; }
}

/* --- barriere segnalate sulla mappa --- */

/* Segno di avviso sul segnaposto di un luogo con barriere ancora presenti.
   Invita a toccare il luogo prima ancora di aprirlo; il contenuto sta nel
   riquadro, e nel nome accessibile del segnaposto per chi non lo vede. */
.segnaposto__avviso {
  position: absolute;
  top: -.35rem;
  right: -.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #B3261E;
  color: #fff;
  border: 2px solid #fff;
  font: 700 .7rem/1 var(--font-testo, sans-serif);
  box-shadow: 0 1px 3px rgba(24, 5, 7, .4);
  pointer-events: none;
}

.popup__barriere {
  margin: .5rem 0;
  padding: .5rem .65rem;
  border-left: 4px solid #B3261E;
  background: #FBE7E6;
  border-radius: 0 var(--raggio) var(--raggio) 0;
}
.popup__barriere-titolo {
  margin: 0 0 .25rem;
  font-weight: 700;
  color: #8C1D18;
}
.popup__barriere ul { margin: 0 0 .3rem; padding-left: 1.1rem; }
.popup__barriere li { margin-bottom: .1rem; }
.popup__barriere p:last-child { margin: 0; }
.popup__barriere .tenue { color: #5E1512; }
/* Il blu dei collegamenti sul fondo rosato scende a 4,45:1, appena sotto il
   minimo: dentro il blocco si usa la variante scura. */
.popup__barriere a { color: #14567B; font-weight: 600; }

.elenco-avviso {
  color: #8C1D18;
  font-size: .88rem;
}

/* --------------------------------------------------------------------------
   Superfici scure: ridichiarano il colore dei collegamenti
   --------------------------------------------------------------------------

   Il bianco e l'unico colore che regge su tutti e tre i fondi scuri: sul
   richiamo, che e una sfumatura, il giallo scende a 3,46:1 all'estremo
   chiaro, sotto il minimo richiesto. Dove il giallo passa con margine — le
   schede e l'apertura, su fondo inchiostro, dove da 12,88:1 — lo si usa per
   il passaggio del puntatore: resta riconoscibile senza perdere
   leggibilita.                                                             */

.apertura,
.scheda {
  --colore-link:       #FFFFFF;
  --colore-link-hover: var(--giallo-testo);
}

.richiamo {
  --colore-link:       #FFFFFF;
  --colore-link-hover: #FFFFFF;
}
/* Sul richiamo il colore non puo cambiare senza scendere sotto il minimo:
   il passaggio del puntatore si segnala ispessendo la sottolineatura. */
.richiamo a:hover { text-decoration-thickness: 3px; }


/* --------------------------------------------------------------------------
   20. Stampa

   Una scheda stampata serve a chi cammina senza rete: si tolgono navigazione
   e ornamenti, e gli indirizzi dei collegamenti diventano visibili.
   -------------------------------------------------------------------------- */

@media print {
  .intestazione__navigazione,
  .apri-menu,
  .pie__onda,
  .mappa-modi,
  .lente,
  .gallery__lente,
  .leaflet-control-zoom,
  .leaflet-control-attribution,
  .asw-menu-btn,
  .asw-widget { display: none !important; }

  body { color: #000; background: #fff; }
  .apertura { min-height: auto; }
  .apertura::after { display: none; }

  .testo-redazionale a::after {
    content: ' (' attr(href) ')';
    font-size: .85em;
    color: #444;
  }
}