/* mappa.css — la mappa della pagina contatti. Caricato solo da quella pagina.
   La mappa non sta dentro una card: la mappa *e'* la card. Cornice bianca
   come un passe-partout, angoli molto arrotondati, ombra ampia e morbida,
   nessuna fascia colorata intorno e nessun titolo dentro: quello che c'e' da
   dire sull'indirizzo e' gia' scritto nella colonna qui sopra. */

/* Le classi .btn del sito impostano display:flex, che vince sull'attributo
   hidden. Senza questa riga, scambiare mappa e immagine non funzionerebbe in
   modo affidabile. */
.mappa-card [hidden] { display: none !important; }

.mappa-card {
  margin-block-start: var(--spazio-3xl);
  aspect-ratio: 1200 / 430;
  border: 10px solid var(--bianco);
  border-radius: 32px;
  box-shadow: 0 18px 46px rgba(26, 26, 26, .14);
  overflow: hidden; /* senza, gli angoli arrotondati non tagliano le tessere */
  background: var(--grigio-chiaro);
}
.mappa-card > a,
.mappa-card > a > img,
.mappa-card > .mappa__tela {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.mappa-card > a > img { object-fit: cover; }

.mappa-nota {
  margin-block-start: var(--spazio-md);
  text-align: center;
  font-size: .8125rem;
  color: var(--testo-leggero);
}
.mappa-nota a { color: var(--verde); text-decoration: underline; }

/* Come arrivare: una riga di dettagli sotto la mappa, non una sezione a se'.
   Niente card, niente fondo grigio — le informazioni restano, l'impalcatura
   intorno no. */
.mappa-dettagli {
  margin-block-start: var(--spazio-2xl);
}
.mappa-dettagli h3 {
  font-size: 1.05rem;
  margin-bottom: var(--spazio-xs, .35rem);
}
.mappa-dettagli p {
  font-size: .9375rem;
  color: var(--testo-leggero);
  margin: 0;
}

/* --- Dentro la mappa ----------------------------------------------------- */
.mappa__tela { z-index: 0; } /* Leaflet alza i suoi livelli: senza, scavalca l'header */

/* Il filtro sta sul livello delle tessere, non sull'intera mappa: cosi'
   segnaposto, popup e controlli restano a piena saturazione mentre le tessere
   si accordano col verde del sito.
   Le tessere di OpenStreetMap sono immagini gia' disegnate, non dati: si
   possono correggere solo in blocco, e la tentazione e' di alzare sepia e
   hue-rotate finche' tutto diventa verde. Sbagliato: e' proprio il sepia alto
   a far collassare ogni tinta su una sola, e una mappa monocroma si legge
   peggio. Con sepia basso e rotazione corta i parchi restano verdi, gli
   edifici scivolano sul caldo e le strade si tengono un oro pallido — che e'
   l'altro colore del sito.
   Lo stesso filtro e' impresso nell'immagine di riserva: le due rese devono
   coincidere, altrimenti dando il consenso la mappa cambierebbe colore. */
.mappa__tela .leaflet-tile-pane {
  filter: saturate(.72) sepia(.16) hue-rotate(16deg) brightness(1.05) contrast(.96);
}

.mappa__segnaposto svg path {
  fill: var(--verde);
  stroke: var(--oro);
  stroke-width: 1.5;
}
.mappa__segnaposto svg circle { fill: var(--bianco); }

.mappa__tela .leaflet-popup-content-wrapper {
  border-radius: var(--raggio);
  box-shadow: var(--ombra-md);
  font-family: inherit;
  color: var(--testo);
}
.mappa__tela .leaflet-popup-content {
  margin: var(--spazio-md);
  line-height: 1.5;
  font-size: .9375rem;
}
.mappa__tela .leaflet-popup-tip { box-shadow: none; }

/* Il nome del centro e' un link a Google Maps: deve sembrarlo. */
.mappa__tela .mappa__link { text-decoration: none; }
.mappa__tela .mappa__link strong {
  color: var(--verde);
  border-block-end: 1px solid currentColor;
}
.mappa__tela .mappa__link:hover strong { color: var(--verde-scuro); }

.mappa__tela .leaflet-bar a {
  color: var(--verde);
  border-radius: var(--raggio);
  border-color: var(--grigio);
}
.mappa__tela .leaflet-bar a:hover { background: var(--verde-chiaro); }

.mappa__tela .leaflet-control-attribution {
  font-size: .75rem;
  background: rgba(255, 255, 255, .85);
}
.mappa__tela .leaflet-control-attribution a { color: var(--verde); }

/* Su telefono una striscia 2,8:1 diventa una fessura: meglio un riquadro piu'
   alto, con l'immagine ritagliata al centro dove sta il segnaposto. */
@media (max-width: 640px) {
  .mappa-card {
    aspect-ratio: 4 / 3;
    border-width: 6px;
    border-radius: 22px;
  }
}

/* Chi non vuole animazioni non le subisce. */
@media (prefers-reduced-motion: reduce) {
  .mappa__tela .leaflet-fade-anim .leaflet-tile,
  .mappa__tela .leaflet-zoom-anim .leaflet-zoom-animated { transition: none; }
}