/* SHARPER 2026 — la pagina Stand.
   Si apre dal telefono, spesso già in piazza: la ricerca sta in cima e resta grande,
   e ogni stand è una riga che si apre, così l'elenco intero resta scorribile con il
   pollice senza diventare un muro di testo. */

/* ── la mappa e la legenda ───────────────────────────────────────────────────── */

/* Su uno schermo largo la mappa sta a sinistra, piccola, e i nomi delle zone le
   stanno accanto: si guarda un rettangolo e si legge come si chiama senza spostare
   la testa. Sul telefono le due cose si impilano — prima la piazza, poi i nomi —
   perché affiancarle su 375 px vorrebbe dire due colonne strette e illeggibili. */
.mappa-con-legenda {
  display: grid;
  gap: 1rem 1.4rem;
  align-items: start;
  margin-bottom: 1.4rem;
}
.mappa-con-legenda .mappa-zone { max-width: 260px; margin-inline: auto; width: 100%; }
/* La mappa si può toccare: libera la scelta della legenda. Il cursore lo dice. */
.mappa-con-legenda .mappa-zone-cornice { cursor: pointer; }

/* Sul desktop la mappa può permettersi di essere grande — è lo spazio che c'è — e
   la legenda si stringe: meno righe alte, caratteri più piccoli, così i nomi delle
   zone stanno tutti accanto alla piazza senza farla scorrere. */
@media (min-width: 720px) {
  /* La mappa prende quasi metà della riga e la legenda l'altra: così la piazza si
     legge davvero, e i nomi delle zone le stanno accanto a tutta altezza. Se le zone
     diventassero più delle righe che ci stanno, la legenda scorre dentro di sé
     invece di allungare la pagina. */
  .mappa-con-legenda { grid-template-columns: minmax(300px, 44%) minmax(0, 1fr); align-items: start; }
  .mappa-con-legenda .mappa-zone { max-width: none; margin-inline: 0; }
  .legenda { max-height: min(70vh, 640px); overflow-y: auto; }
  .legenda { gap: 0; }
  .legenda-voce { padding: .12rem .4rem; font-size: .76rem; gap: .4rem; }
  .legenda-n { font-size: .68rem; }
  .legenda-quanti { font-size: .68rem; }
  .legenda-dove { font-size: .75em; }
}

/* ── sul telefono: la mappa resta ferma, la legenda scorre sotto ──────────────
   La legenda è lunga quindici righe e in verticale spingerebbe la piazza fuori
   schermo proprio mentre si guarda quale rettangolo si è acceso. Allora la mappa si
   appiccica in alto e la legenda scorre dentro una finestra sua, sfumata sopra e
   sotto perché si veda che c'è dell'altro. */
@media (max-width: 719px) {
  .mappa-con-legenda { position: relative; }

  .mappa-con-legenda .mappa-zone {
    position: sticky;
    top: .4rem;
    z-index: 2;
    max-width: 240px;
  }

  .legenda {
    max-height: 42vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    /* La sfumatura è una maschera, non un velo sopra: così sfuma su qualunque fondo
       e non copre niente. Le prime e le ultime righe entrano ed escono invece di
       essere tagliate di netto. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
    padding-block: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--bordo) transparent;
  }
  .legenda::-webkit-scrollbar { width: 4px; }
  .legenda::-webkit-scrollbar-thumb { background: var(--bordo); border-radius: 2px; }

  /* La riga scelta resta segnata mentre si scorre, e il tocco non lascia l'alone
     grigio di sistema sopra un bottone che ha già un suo stato. */
  .legenda-voce { -webkit-tap-highlight-color: transparent; }
  .legenda-voce[aria-pressed="true"] { position: relative; }
}

@media (min-width: 1040px) {
  .mappa-con-legenda { gap: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .legenda { scroll-behavior: auto; }
}

.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; align-content: start; }

.legenda-voce {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
  width: 100%;
  padding: .25rem .45rem;
  border: 1px solid transparent;
  border-radius: calc(var(--r) - 4px);
  background: transparent;
  color: var(--inchiostro-2);
  font: inherit;
  font-size: .87rem;
  text-align: left;
  cursor: pointer;
}
.legenda-voce:hover:not(:disabled) { border-color: var(--bordo); color: var(--inchiostro); }
.legenda-voce[aria-pressed="true"] {
  border-color: var(--ancona);
  background: color-mix(in srgb, var(--ancona) 14%, transparent);
  color: var(--inchiostro);
}
.legenda-voce:disabled { opacity: .45; cursor: default; }

.legenda-nome { display: grid; gap: 0; min-width: 0; line-height: 1.25; }
.legenda-nome b { color: var(--inchiostro); font-weight: 600; overflow-wrap: anywhere; }
.legenda-dove { color: var(--inchiostro-3); font-size: .78em; }

.legenda-n {
  font-family: var(--dato);
  font-size: .78rem;
  color: var(--ancona);
  text-align: right;
}
.legenda-quanti { font-family: var(--dato); font-size: .76rem; color: var(--inchiostro-3); }

.stand-cerca { padding-top: 0; border-top: 0; padding-bottom: 1rem; }
.stand-elenco { padding-top: 1rem; }

.campo-cerca { margin: 0 0 .9rem; }
.campo-cerca input {
  width: 100%;
  padding: .75rem .9rem;
  border: 1px solid var(--bordo);
  border-radius: calc(var(--r) - 3px);
  background: var(--superficie);
  color: var(--inchiostro);
  font: inherit;
  font-size: 1.05rem;
}

.filtri-luogo { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtro {
  padding: .4rem .75rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: transparent;
  color: var(--inchiostro-2);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.filtro[aria-pressed="true"] {
  border-color: var(--c, var(--ancona));
  background: color-mix(in srgb, var(--c, var(--ancona)) 22%, transparent);
  color: var(--inchiostro);
}

.conta-stand { margin: .8rem 0 0; font-size: .85rem; color: var(--inchiostro-3); }

/* ── l'elenco ────────────────────────────────────────────────────────────────── */

.luogo { margin-bottom: 1.8rem; }
.luogo h2 {
  border-left: 4px solid var(--c, var(--bordo));
  padding-left: .6rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0 0 .7rem;
  font-size: 1.2rem;
}
.luogo-conta { font-family: var(--dato); font-size: .78rem; color: var(--inchiostro-3); font-weight: 400; }

.stand { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.stand li {
  --c: var(--area-ateneo);
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--c);
  border-radius: calc(var(--r) - 3px);
  background: var(--superficie);
}

.stand summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .15rem .8rem;
  padding: .7rem .9rem;
  cursor: pointer;
  list-style: none;
}
.stand summary::-webkit-details-marker { display: none; }
.stand-titolo { grid-column: 1; line-height: 1.3; }
.stand-riga { grid-column: 1; font-size: .85rem; color: var(--inchiostro-3); }
.stand-numero {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--dato);
  font-size: .8rem;
  color: var(--ancona);
  white-space: nowrap;
}

.stand dl {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: .35rem .9rem;
  margin: 0;
  padding: .2rem .9rem .9rem;
  font-size: .9rem;
}
.stand dt {
  font-family: var(--dato);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inchiostro-3);
  padding-top: .15rem;
}
.stand dd { margin: 0; color: var(--inchiostro-2); overflow-wrap: anywhere; white-space: pre-line; }

@media (max-width: 560px) {
  .stand dl { grid-template-columns: 1fr; gap: .1rem; }
  .stand dd { margin-bottom: .45rem; }
}