/* Mappa dell'evento: pagina a sé (non riusa home.css — le classi qui sotto sono
   dedicate, stesso principio di duplicazione-non-condivisione già usato per
   classifica-mobile.css). Header sottile invece del banner ufficiale a piena
   pagina: sullo schermo di un telefono il banner da solo mangerebbe un quarto
   di viewport utile alla mappa.

   Ridisegnata 2026-08-29 su un mockup di riferimento (DESIGN/mappa3.jpg,
   fornito da Mirco): non più "solo la mappa a schermo intero" ma una pagina
   normale che scorre — card indirizzo, mappa (ancora pan/zoom, ora dentro una
   card invece che a bordo schermo), elenco "Le aree" sotto con tutte le zone
   in forma di lista (utile su mobile: toccare un pallino piccolo è scomodo,
   toccare una riga larga no). */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
}

.mappa-corpo {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
}

/* Stessa identica linea grafica dell'header delle altre pagine di dettaglio
   (.pagina-header/.pagina-indietro/.pagina-titolo/.pagina-sottotitolo in
   home.css: catalogo, programma, sponsor...) — duplicata qui invece che
   condivisa, stesso principio del resto del file (vedi nota in cima).
   Richiesto da Mirco 2026-08-29: prima questa pagina aveva un header a sé,
   una barra fissa con bordo/sfondo proprio e la barra brand sotto, mentre le
   altre pagine usano un bottone indietro circolare dentro il flusso normale
   della pagina, senza barra colorata. */
.mappa-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding-top: calc(0.5rem + env(safe-area-inset-top));
}

.mappa-header-indietro {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--raggio-pillola);
  border: 1.5px solid var(--bordo-marcato);
  background: var(--superficie);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.mappa-header-indietro:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

.mappa-header-testi {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.mappa-header-titolo {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--fg);
  line-height: 1.2;
}

.mappa-header-sottotitolo {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--fg-attenuato);
}

/* Card indirizzo/struttura (mockup Mirco): stesso linguaggio delle righe
   cliccabili della home pubblica (.home-riga in home.css), duplicato qui
   invece che condiviso — stesso principio delle altre pagine indipendenti
   del progetto (vedi nota in cima al file). Link reale verso Google Maps
   costruito dall'indirizzo, non un chevron decorativo che non porta a
   nulla. */
.mappa-venue {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.9rem 1rem;
  margin-top: 1rem;
  border-radius: 20px;
  border: 1.5px solid var(--bordo-marcato);
  background: var(--superficie);
  text-decoration: none;
  color: var(--fg);
}

.mappa-venue:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

.mappa-venue-icona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: var(--raggio-pillola);
  background: var(--tinta-rosa, #f6b3c6);
  color: var(--fg);
  flex-shrink: 0;
}

.mappa-venue-testi {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.mappa-venue-titolo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
}

.mappa-venue-indirizzo {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--fg-attenuato);
}

.mappa-venue-freccia {
  flex-shrink: 0;
  color: var(--fg);
}

/* Elenco "Le aree": stesso ruolo dei pallini sulla mappa ma in forma di
   lista — un target largo tutta-riga invece di un cerchietto piccolo,
   pensato per il dito su mobile. Il colore del badge numerato è lo stesso
   colore di riempimento della forma corrispondente nell'SVG (impostato
   inline da mappa.js da ZONE[id].colore), non una palette CSS separata da
   tenere sincronizzata a mano. */
.mappa-aree {
  margin-top: 1.4rem;
}

.mappa-aree-eyebrow {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-attenuato);
}

.mappa-aree-lista {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Contenitore-card della mappa (mockup Mirco, DESIGN/mappa3.jpg): non più a
   bordo schermo, bordo/ombra come le altre card dell'app, altezza legata alle
   proporzioni reali dell'SVG (6159×3275, vedi mappa.js) invece che riempire
   tutto lo spazio verticale residuo — la mappa qui è UNA card nella pagina,
   non l'unico contenuto. */
.mappa-viewport-contenitore {
  margin-top: 1rem;
  border-radius: var(--raggio-largo);
  border: 1px solid var(--bordo);
  box-shadow: var(--ombra-soft);
  overflow: hidden;
}

.mappa-viewport {
  position: relative;
  width: 100%;
  /* Altezza di riserva prima che mappa.js la sovrascriva in px (calcolata a
     runtime dalle proporzioni vere del viewBox, con un tetto del 55% di
     window.innerHeight) — niente più aspect-ratio/max-height in CSS: quella
     combinazione, con display:flex sullo stesso elemento, sospetto abbia
     un'interazione specifica di Safari mobile che produceva comunque una
     card troppo alta/uno zoom iniziale sballato (segnalato da Mirco
     2026-08-29, persistito anche dopo un primo tentativo di fix; non
     riproducibile qui, nessun Safari/WebKit disponibile in questo ambiente).
     Un'altezza fissa in pixel, impostata via JS con aritmetica semplice, è un
     meccanismo di sizing più universale, senza proprietà di layout recenti
     che possano comportarsi diversamente tra motori. */
  height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
}

.mappa-stage {
  position: relative;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

.mappa-stage.sta-trascinando {
  cursor: grabbing;
}

.mappa-transform {
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}

.mappa-transform svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Overlay di hit-test/evidenziazione: un rettangolo per zona, disegnato sopra
   l'illustrazione originale — così l'area toccabile è generosa (non i soli
   tratti sottili del disegno) e l'highlight non deve ricolorare i path
   originali, che portano già colori fissi via style inline. */
.mappa-zona {
  fill: var(--accento-vivo);
  fill-opacity: 0;
  stroke: var(--accento-vivo);
  stroke-opacity: 0;
  stroke-width: 6;
  cursor: pointer;
  transition: fill-opacity 120ms ease, stroke-opacity 120ms ease;
}

.mappa-zona:hover,
.mappa-zona.is-hover {
  fill-opacity: 0.12;
  stroke-opacity: 0.55;
}

.mappa-zona:focus-visible,
.mappa-zona.is-selezionata {
  fill-opacity: 0.16;
  stroke-opacity: 0.85;
  outline: none;
}

/* Marcatore: SOLO l'alone che si espande e sfuma, niente più pallino pieno
   sopra — l'SVG disegna già il suo pallino bianco col numero per ogni zona,
   un secondo cerchio pieno sopra era ridondante (richiesto da Mirco
   2026-08-29). pointer-events:none: il tocco resta gestito dal rettangolo di
   hit-test in .mappa-zona, il marcatore è solo indicazione visiva. */
.mappa-marcatore-anello {
  pointer-events: none;
  fill: #ffffff;
  transform-box: fill-box;
  transform-origin: center;
  animation: mappa-radar 2s ease-out infinite;
}

@keyframes mappa-radar {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mappa-marcatore-anello {
    animation: none;
    opacity: 0.35;
  }
}

.mappa-controlli {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 2;
}

.mappa-controllo {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--raggio-pillola);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  color: var(--fg);
  box-shadow: var(--ombra-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  padding: 0;
}

.mappa-controllo:active {
  transform: scale(0.95);
}

.mappa-controllo:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

.mappa-suggerimento {
  margin: 0.7rem 0 0;
  color: var(--fg-attenuato);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
}

.mappa-suggerimento svg {
  flex-shrink: 0;
  color: var(--fg-attenuato);
}

/* ---------- Fumetto compatto ancorato al pallino ---------- */
/* Sostituisce la modale centrata (richiesto da Mirco 2026-08-29, su un
   mockup di riferimento): niente sfondo scuro, solo un fumetto piccolo
   posizionato in JS (top/left) sopra il pallino toccato — position:fixed
   apposta, per poter comparire ovunque sullo schermo senza essere ritagliato
   dall'overflow:hidden della card mappa. Tutto il bottone è cliccabile:
   toccarlo espande la riga corrispondente in "Le aree" (vedi
   mappa.js:apriFumetto/espandiRiga), non è solo un'etichetta. */
.mappa-fumetto {
  position: fixed;
  z-index: 20;
  max-width: 16rem;
  padding: 0.7rem 0.9rem;
  border-radius: 16px;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  box-shadow: var(--ombra);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--fg);
  /* Ancorato sopra il pallino (mappa.js calcola top/left dalla posizione
     reale sullo schermo), qui solo lo scarto dalla coda + la centratura
     orizzontale sul punto — vedi anche .mappa-fumetto-coda sotto. */
  transform: translate(-50%, calc(-100% - 12px));
}

.mappa-fumetto.nascosto {
  display: none;
}

.mappa-fumetto:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

.mappa-fumetto-titolo {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--fg);
}

.mappa-fumetto-testo {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--fg-attenuato);
}

/* Coda a triangolo che punta verso il pallino sotto — un quadrato ruotato a
   45°, metà nascosto dal bordo arrotondato del fumetto sopra di lui. */
.mappa-fumetto-coda {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: var(--superficie);
  border-right: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
  transform: rotate(45deg);
}

/* ---------- "Le aree": righe ad accordion ---------- */
/* Toccare una riga la apre in loco (niente più modale/pagina separata,
   richiesto da Mirco 2026-08-29): stesso identico contenuto che prima viveva
   nella modale (testo, link, lista espositori di Area Stand), qui dentro il
   corpo estraibile di ogni riga. */
.mappa-aree-elemento {
  border-radius: 18px;
  border: 1.5px solid var(--bordo-marcato);
  background: var(--superficie);
  overflow: hidden;
}

.mappa-aree-riga {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.8rem 1rem;
  background: none;
  border: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mappa-aree-riga:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

.mappa-aree-numero {
  flex-shrink: 0;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: var(--raggio-pillola);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--fg);
}

.mappa-aree-titolo {
  flex: 1;
  min-width: 0;
  font-size: 0.94rem;
  font-weight: 700;
}

.mappa-aree-freccia {
  flex-shrink: 0;
  color: var(--fg-attenuato);
  transition: transform 150ms ease;
}

.mappa-aree-elemento.aperto .mappa-aree-freccia {
  transform: rotate(90deg);
}

.mappa-aree-dettaglio {
  padding: 0 1.1rem 1rem;
}

.mappa-aree-dettaglio[hidden] {
  display: none;
}

.mappa-aree-dettaglio-testo {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--fg-attenuato);
}

.mappa-aree-dettaglio-link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.mappa-aree-dettaglio-pulsante {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: var(--raggio-pillola);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.mappa-aree-dettaglio-pulsante--secondario {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bordo);
}

.mappa-aree-dettaglio-pulsante:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

.mappa-aree-dettaglio-lista {
  display: flex;
  flex-direction: column;
}

.mappa-aree-dettaglio-voce {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--bordo);
}

.mappa-aree-dettaglio-voce:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Riga titolo (+ prezzo facoltativo a destra, es. voci del menù Bar — vedi
   mappa.js costruisciDettaglioZona/ZONE.FoodDrink.voci): senza "gap" apposta,
   stesso motivo di tutto il resto del file (browser TV/datati poco
   affidabili su flexbox gap) — il prezzo si scosta da solo col margin-left:auto. */
.mappa-aree-dettaglio-voce-riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.mappa-aree-dettaglio-voce-titolo {
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--fg);
}

.mappa-aree-dettaglio-voce-prezzo {
  flex-shrink: 0;
  margin-left: 0.75rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primario);
}

.mappa-aree-dettaglio-voce-testo {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--fg-attenuato);
}

.mappa-aree-dettaglio-voce-link {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primario);
  text-decoration: none;
}

.mappa-aree-dettaglio-voce-link:focus-visible {
  outline: 2px solid var(--accento-vivo);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}