/* SHARPER 2026 — la mappa della piazza con le zone accese.
   Serve alla homepage e alla pagina Stand dell'area riservata: sta in un foglio suo
   perché il disegno è lo stesso, e due copie si sarebbero scollate alla prima
   modifica. */

.mappa-zone { margin: 0; }

.mappa-zone-cornice {
  position: relative;
  /* Il rapporto del render, scritto qui perché il posto sia tenuto prima che
     l'immagine arrivi: senza, quello che sta sotto salta in giù mentre lo si legge. */
  aspect-ratio: 1306 / 1722;
  border-radius: 14px;
  border: 1px solid var(--bordo);
  background: var(--superficie);
  overflow: hidden;
}

.mappa-zone-cornice img { display: block; width: 100%; height: 100%; object-fit: cover; }

.mappa-zone-strato { position: absolute; inset: 0; }

/* A riposo i rettangoli non si vedono: la mappa è una fotografia della piazza, e dieci
   riquadri sempre accesi la coprirebbero. Compaiono quando c'è qualcosa da indicare. */
/* Angoli appena smussati e non arrotondati: un gazebo solo è un rettangolo basso, e
   con otto pixel di raggio diventava una pastiglia. */
.zona {
  position: absolute;
  border-radius: 3px;
  border: 2px solid transparent;
  transition: background 180ms, border-color 180ms, box-shadow 180ms;
}
.zona span { display: none; }

.mappa-zone[data-evidenzia="si"] .zona[data-stato="acceso"] {
  border-color: var(--ancona);
  background: color-mix(in srgb, var(--ancona) 24%, transparent);
  /* L'alone scurisce tutto il resto della piazza: è quello che fa saltare all'occhio
     la fila giusta senza bisogno di una freccia. */
  box-shadow: 0 0 0 100vmax rgba(4, 7, 20, .55);
}

.mappa-zone figcaption {
  margin-top: .5rem;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--inchiostro-3);
}
.mappa-zone figcaption b { color: var(--inchiostro-2); font-weight: 600; }