/* ============================================================
   ArtI — correzioni applicative al foglio di stile del design.
   Caricato DOPO arti.css: qui stanno solo gli aggiustamenti nati
   dall'uso reale, così un eventuale aggiornamento del design non
   li travolge.
   ============================================================ */

/* ---------- Barra di navigazione ----------
   Il design prevedeva, da 720px, una seconda riga di collegamenti
   sotto la barra. Nell'uso reale produce due righe sbilanciate e il
   collegamento "Accedi" ripetuto due volte. Qui la barra torna a
   essere una riga sola: marchio a sinistra, sezioni al centro,
   azione a destra. */
@media (min-width: 720px) {
  .navbar__inner { padding: var(--s3) var(--s6); gap: var(--s5); }

  .segmenti { display: flex; margin-right: auto; margin-left: var(--s5); }

  /* La seconda riga sparisce: su schermo largo basta una barra sola */
  .nav-links { display: none !important; }

  /* Collegamenti secondari accanto all'azione principale */
  .navbar__extra { display: flex; align-items: center; gap: var(--s4); }
  .navbar__extra a { color: var(--crema-75); font-size: var(--fs-s); font-weight: 500; }
  .navbar__extra a:hover { color: var(--crema); }
}
@media (max-width: 719px) {
  .navbar__extra { display: none; }
}

/* ---------- Elenco delle attività a griglia ----------
   Una card per riga sprecava tutto lo spazio orizzontale e rendeva
   l'elenco interminabile da scorrere. */
.elenco-attivita {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .elenco-attivita { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .elenco-attivita { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Card affiancate: il corpo si allunga per pareggiare le altezze e
   il piede resta sempre in fondo */
.elenco-attivita .card { height: 100%; }
.elenco-attivita .card__corpo { display: flex; flex-direction: column; flex: 1; }
.elenco-attivita .card__piede { margin-top: auto; }

/* ---------- La card deve sembrare cliccabile ----------
   Senza un segno esplicito nessuno capisce che l'intera scheda è un
   collegamento: si aspetta un pulsante. */
.card { position: relative; transition: transform .12s ease, box-shadow .12s ease; }
.card:hover { transform: translateY(-2px); }
.card__vai {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s2);
  color: var(--arancio-scuro); font-weight: 600; font-size: var(--fs-s);
}
.card__vai::after { content: "→"; transition: transform .12s ease; }
.card:hover .card__vai::after { transform: translateX(3px); }
.card:hover .card__vai { text-decoration: underline; }

/* Il cuore è solo un'indicazione di stato dentro una card cliccabile:
   non deve sembrare un pulsante a sé */
.elenco-attivita .btn--icona { pointer-events: none; }

/* ---------- Filtri: ricerca città a testo libero ---------- */
.filtri .campo__aiuto { color: var(--crema-75); }

/* ---------- Griglia delle categorie in home ---------- */
.griglia-categorie {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px)  { .griglia-categorie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .griglia-categorie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Elenco eventi ---------- */
/* Sotto i 900px i biglietti sono impilati: servono margini normali,
   altrimenti l'etichetta del mese finisce sotto la prima card */
.elenco-eventi { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.elenco-eventi .riga-mese { margin: var(--s4) 0 0; }
.elenco-eventi .riga-mese:first-child { margin-top: 0; }

@media (min-width: 900px) {
  .elenco-eventi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* L'intestazione del mese occupa tutta la riga della griglia.
     Non si usa .mese-separatore del design, che disegna una barra verde
     piena: qui serve solo un'etichetta discreta sopra il gruppo. */
  .elenco-eventi .riga-mese { grid-column: 1 / -1; margin-top: var(--s5); }
}

/* ---------- Campi dentro il blocco filtri (fondo verde) ----------
   Il testo segnaposto ereditava un colore pensato per il fondo chiaro
   e sul verde risultava illeggibile. */
.filtri .form-control::placeholder { color: rgba(20,18,14,.45); opacity: 1; }

/* ---------- Azioni dell'hero ----------
   A piena larghezza hanno senso sul telefono; su schermo largo due
   pulsanti lunghi mezzo metro sembrano un errore. */
@media (min-width: 720px) {
  .hero-azioni { flex-direction: row; align-items: center; gap: var(--s3); }
  .hero-azioni .btn { width: auto; min-width: 240px; }
}

/* ---------- Riquadri categoria in home ----------
   Nella griglia le card si pareggiano in altezza, ma la targa colorata
   manteneva la sua e lasciava scoperto il fondo bianco della card:
   sembrava un errore di impaginazione. */
.griglia-categorie .card { display: flex; overflow: hidden; }
.griglia-categorie .card__targa {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  border-radius: var(--r-l);
}

/* ---------- Barra su telefono ----------
   Nel foglio del design .navbar__azione{display:none} è dichiarato prima
   di .btn{display:inline-flex}: avendo la stessa specificità vince il
   secondo, e il pulsante restava visibile anche su schermo stretto,
   affollando la barra insieme a marchio, sezioni e hamburger.
   Qui si alza la specificità per farlo sparire davvero sotto i 720px. */
@media (max-width: 719px) {
  .navbar .btn.navbar__azione { display: none; }
  .navbar__inner { gap: var(--s2); }
  .segmenti { margin-left: auto; }
}


/* ---------- Sezioni della barra ----------
   Erano due pulsanti incollati dentro un blocco arrotondato: un comando
   a segmenti, che serve a scegliere una vista alternativa, non a
   navigare fra sezioni diverse di un sito. Qui diventano collegamenti
   normali, distanziati, con la sezione corrente sottolineata. */
.segmenti {
  background: none;
  border-radius: 0;
  padding: 0;
  gap: var(--s5);
}
.segmenti a {
  min-height: auto;
  padding: 4px 0;
  border-radius: 0;
  font-size: var(--fs-m);
  font-weight: 500;
  color: var(--crema-75);
  border-bottom: 2px solid transparent;
}
.segmenti a:hover { color: var(--crema); }
.segmenti a[aria-current="page"] {
  background: none;
  color: var(--crema);
  font-weight: 600;
  border-bottom-color: var(--giallo);
}

/* ---------- Pulsante di larghezza naturale ----------
   Nel biglietto dell'evento occupava tutta la card: un pulsante lungo
   quanto il contenitore sembra una barra, non un'azione. */
.btn--auto { width: auto; align-self: flex-start; }

/* ---------- Biglietto evento nella griglia ----------
   Affiancati devono pareggiarsi in altezza, con l'azione in fondo. */
.elenco-eventi .evento { display: flex; flex-direction: column; height: 100%; }
.elenco-eventi .evento__strappo { margin-top: auto; }

/* La durata sulla bandiera della data era quasi illeggibile:
   testo chiaro su fondo chiaro nelle categorie gialle */
.evento__durata { opacity: .85; font-weight: 600; }
.cat-gioielli .evento__durata,
.cat-alimentari .evento__durata { color: var(--ink); opacity: .7; }

/* ---------- Scheda attività: respiro ----------
   La targa comprimeva badge, categoria e nome uno sull'altro. */
.scheda-testa { padding-top: var(--s6); padding-bottom: var(--s6); }
.scheda-testa .badge--plus { margin-bottom: var(--s3); }
.scheda-testa .eyebrow { margin-top: 0; }
.scheda-testa .display { margin-top: var(--s2); margin-bottom: var(--s2); }

/* Le azioni della scheda non devono toccare il bordo del contenuto */
.scheda-azioni { margin-top: var(--s2); margin-bottom: var(--s4); }

/* ---------- Scheda attività ----------
   Titoli di sezione con spazio sopra: senza, si attaccavano al blocco
   precedente e la pagina sembrava un elenco continuo senza gerarchia. */
.scheda-sezione { margin-top: var(--s6); }

/* Le categorie sono etichette informative, non azioni: con il fondo
   pieno sembravano pulsanti da premere */
.scheda-categorie .chip--vuoto {
  background: none;
  color: var(--ink-70);
  box-shadow: inset 0 0 0 1.5px var(--linea-forte);
}

/* ============================================================
   Come funziona — i tre passi

   Usano lo stesso linguaggio delle schede attività: targa di colore
   pieno con la tipografia display, corpo chiaro sotto. Tre riquadri
   bianchi con un numeretto sarebbero stati il modello generico che si
   vede ovunque, estraneo al resto del sito.

   La cifra grande in filigrana sulla targa rende evidente che è una
   sequenza, senza doverlo scrivere.
   ============================================================ */
.passi {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .passi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.passo {
  background: var(--bianco);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--ombra);
  display: flex;
  flex-direction: column;
}

.passo__targa {
  position: relative;
  background: var(--cat, var(--verde));
  color: var(--cat-ink, var(--crema));
  padding: var(--s5) var(--s4) var(--s4);
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* Cifra in filigrana: elemento grafico, non testo da leggere */
.passo__cifra {
  position: absolute;
  top: -12px; right: 8px;
  font: 800 108px/1 var(--font-display);
  letter-spacing: -.06em;
  opacity: .17;
  pointer-events: none;
}

.passo__titolo {
  /* Interlinea 1.04 come nelle targhe delle attività tagliava la coda
     della Q di "QR": lì i nomi stanno su una riga, qui su due. */
  font: 800 26px/1.14 var(--font-display);
  letter-spacing: -.035em;
  position: relative;
  padding-bottom: 2px;
}

.passo__corpo {
  padding: var(--s4);
  color: var(--ink-70);
  font-size: var(--fs-m);
  line-height: 1.5;
  flex: 1;
}

/* Nella fascia gialla la card bianca sparirebbe nel fondo: le targhe
   restano, il corpo diventa trasparente */
.section--giallo .passo { background: rgba(255,255,255,.55); box-shadow: none; }
.section--giallo .passo__corpo { color: rgba(20,18,14,.78); }

/* Azioni di chiusura di una sezione */
.azioni-fine { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
@media (max-width: 619px) { .azioni-fine .btn { width: 100%; } }

/* Testo di servizio sulla fascia gialla: il grigio chiaro su giallo
   non raggiungeva un contrasto sufficiente */
.section--giallo .small { color: rgba(20,18,14,.78); }
.section--giallo .btn--outline {
  box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.35);
  color: var(--ink);
}
.section--giallo .btn--outline:hover { background: rgba(20,18,14,.07); }

/* ---------- Riquadri "nessun risultato" ----------
   Il riquadro pieno ha il fondo verde scuro, ma il testo secondario e i
   pulsanti restavano nei colori scuri: su quel fondo erano illeggibili.
   Succedeva nelle ricerche senza risultati, sia sugli eventi sia sulle
   attività. La variante --leggero ha il fondo chiaro e resta com'è. */
.vuoto:not(.vuoto--leggero) .muted { color: var(--crema-75); }
.vuoto:not(.vuoto--leggero) .btn--outline {
  color: var(--crema);
  box-shadow: inset 0 0 0 1.5px var(--linea-chiara);
}
.vuoto:not(.vuoto--leggero) .btn--outline:hover { background: rgba(245,239,227,.1); }

/* ---------- Mappe ----------
   Il design disegnava un finto riquadro con un pallino sopra. Qui c'è la
   mappa vera: finché lo script non è partito resta lo stesso fondo del
   disegno, così non si apre un buco bianco nella pagina. */
.mappa__tela { height: 280px; background: #E8E0D0; z-index: 0; }
.mappa__tela--alta { height: 420px; }
.mappa-pin span {
  display: block; width: 20px; height: 20px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 3px solid var(--crema); box-shadow: 0 3px 8px rgba(0,0,0,.3);
}
.leaflet-container { font: 400 var(--fs-s)/1.4 var(--font-testo); }
.leaflet-popup-content { margin: 10px 12px; }
.leaflet-popup-content a { color: var(--arancio); }

/* ---------- Ricerca per vicinanza ----------
   Sta dentro la fascia scura dei filtri: testi e bordi vanno nella
   variante chiara, come il resto di quella fascia. */
.vicinanza { display: flex; flex-direction: column; gap: var(--s2); }
.pillola {
  display: inline-flex; align-items: center; min-height: var(--tocco);
  padding: 0 var(--s3); border-radius: 999px; color: var(--crema);
  text-decoration: none; font: 600 var(--fs-s)/1 var(--font-testo);
  box-shadow: inset 0 0 0 1.5px var(--linea-chiara);
}
.pillola:hover { background: rgba(245,239,227,.1); }
.pillola--attiva { background: var(--giallo); color: var(--ink); box-shadow: none; }
.distanza { margin-top: 4px; font: 700 var(--fs-s)/1.2 var(--font-testo); color: var(--arancio); }

/* ---------- Fascia del consenso ai cookie ----------
   Sta in basso, sopra tutto il resto. "Rifiuta" e "Accetta" hanno lo
   stesso peso: un rifiuto nascosto o sbiadito rende il consenso non
   valido, oltre che scorretto verso chi legge. */
.consenso {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--verde); color: var(--crema);
  border-top: 1px solid var(--linea-chiara);
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3);
  box-shadow: 0 -8px 28px rgba(14,42,34,.24);
}
.consenso[hidden] { display: none; }
.consenso__testo p { margin: 0; }
.consenso__testo p + p { margin-top: var(--s2); }
.consenso__testo a { color: var(--giallo); text-decoration: underline; }
.consenso__azioni { display: flex; gap: var(--s2); }
.consenso__azioni .btn { flex: 1; }
@media (min-width: 720px) {
  .consenso {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: var(--s5); padding: var(--s4) var(--s6);
  }
  .consenso__testo { max-width: 760px; }
  .consenso__azioni { flex: none; }
  .consenso__azioni .btn { flex: none; min-width: 128px; }
}

/* ---------- Pagine di testo lungo (informativa privacy) ---------- */
.prosa { gap: var(--s3); }
.prosa h2 { margin-top: var(--s5); }
.prosa h3 { margin-top: var(--s3); }
.prosa p { max-width: 68ch; }
.elenco-puntato { display: flex; flex-direction: column; gap: var(--s2); padding-left: var(--s5); }
.elenco-puntato li { list-style: disc; max-width: 66ch; }
.tabella-scorrevole { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabella { width: 100%; border-collapse: collapse; min-width: 460px; }
.tabella th, .tabella td {
  text-align: left; padding: var(--s3); border-bottom: 1px solid var(--linea);
  vertical-align: top; font-size: var(--fs-s);
}
.tabella th { font-weight: 700; background: rgba(20,18,14,.04); }

/* ---------- "Dove è stata": storia delle presenze passate ----------
   Elenco sobrio, non biglietti: il passato è un riferimento, non un
   invito. Se pesasse come le date in programma le farebbe concorrenza. */
.storia { display: flex; flex-direction: column; gap: 0; }
.storia li + li { border-top: 1px solid var(--linea); }
.storia a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3);
  padding: var(--s3) 0; color: var(--ink); text-decoration: none;
  min-height: var(--tocco);
}
.storia a:hover { text-decoration: none; }
.storia a:hover .storia__dove { text-decoration: underline; }
.storia__data {
  flex: none; min-width: 128px;
  font: 700 var(--fs-s)/1.4 var(--font-testo); color: var(--arancio-scuro);
}
.storia__dove { font-size: var(--fs-s); color: var(--ink-70); }

/* ---------- Fascia dei filtri: niente angoli stondati ----------
   Il foglio del designer, da 1080px, stonda .filtri: era pensata come
   scheda dentro una colonna laterale (.layout-elenco), impianto che non
   è mai stato realizzato. Usata com'è oggi — fascia a tutta larghezza
   sotto la barra di navigazione — gli angoli si arrotondano contro i
   bordi della finestra e si leggono come un difetto.
   Sotto i 1080px il problema non c'era: lì la regola non si attiva. */
@media (min-width: 1080px) {
  .filtri { border-radius: 0; }
}