/* ═══════════════════════════════════════════
   SPEMME — SHOW / EVENT DETAIL PAGE
═══════════════════════════════════════════ */

/* ─── INTRO GRID (scheda + description) ─── */
.show-intro {
  display:               grid;
  grid-template-columns: 270px 1fr;
  gap:                   5rem;
  padding:               5rem 0;
  border-bottom:         1px solid rgba(201,168,76,.09);
}

/* Scheda tecnica */
.show-scheda {
  border:     1px solid rgba(201,168,76,.15);
  padding:    2rem;
  background: rgba(13,59,62,.2);
  height:     fit-content;
}
.show-scheda .badge-auto { margin-bottom: 1.2rem; }
.show-scheda-title {
  font-family:    var(--font-label);
  font-size:      var(--fs-label);
  letter-spacing: .3em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  1.5rem;
  padding-bottom: .8rem;
  border-bottom:  1px solid rgba(201,168,76,.15);
}
.show-scheda-row { margin-bottom: 1.1rem; }
.show-scheda-label {
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .2em;
  color:          var(--text-dim);
  text-transform: uppercase;
  margin-bottom:  .22rem;
}
.show-scheda-value {
  font-family: var(--font-display);
  font-size:   var(--fs-base);
  line-height: 1.4;
}

/* Date badge inside scheda */
.show-date-badge {
  margin-top:  1.6rem;
  padding:     1rem;
  background:  rgba(201,168,76,.07);
  border:      1px solid rgba(201,168,76,.22);
  text-align:  center;
}
.show-date-main {
  font-family:   var(--font-display);
  font-size:     1.05rem;
  margin-bottom: .3rem;
}
.show-date-where {
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .18em;
  color:          var(--text-dim);
  text-transform: uppercase;
  margin-bottom:  .4rem;
}
/* Variante a più tappe: ogni data porta il proprio teatro, separate da
   un filo. Senza, con due date e un luogo solo sembrerebbero entrambe
   nello stesso posto. */
.show-date-badge--multi { text-align: left; }
.show-date-tappa + .show-date-tappa {
  margin-top:  .8rem;
  padding-top: .8rem;
  border-top:  1px solid rgba(201,168,76,.18);
}
.show-date-badge--multi .show-date-main  { margin-bottom: .2rem; }
.show-date-badge--multi .show-date-where { margin-bottom: 0; }

.show-date-free {
  display:        block;
  font-family:    var(--font-label);
  font-size:      var(--fs-label);
  letter-spacing: .22em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-top:     .6rem;
}

/* Description area */
.show-desc p {
  font-size:     var(--fs-base);
  line-height:   1.8;
  color:         var(--text-light);
  margin-bottom: 1.2rem;
  max-width:     var(--measure);
}
.show-desc p:first-child { font-size: 1rem; }
.show-desc .gold-line { margin: 2rem 0; }
.show-desc-actions {
  display:   flex;
  gap:       1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ─── SHARED SECTION STYLES ─── */
.show-section {
  padding:       4rem 0;
  border-bottom: 1px solid rgba(201,168,76,.09);
}
.show-section-label {
  font-family:    var(--font-label);
  font-size:      var(--fs-label);
  letter-spacing: .3em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  .8rem;
}
.show-section-h2 {
  font-family:   var(--font-display);
  font-size:     clamp(1.8rem, 3vw, 2.4rem);
  font-weight:   300;
  margin-bottom: 2.5rem;
}
.show-section-h2 em { font-style: italic; color: var(--gold-light); }

/* Una riga di precisazione sotto il titolo: dice A COSA si riferisce quello
   che segue. Serve quando il contenuto vale per una edizione sola e non per lo
   spettacolo in generale — il cast della Sirenetta in pagina è quello del
   2025, quello delle date di Torino e Montecatini non ci è ancora stato
   comunicato. È lo stesso mestiere che fa `.event-map-note` sulla mappa.
   ⚠️ Senza, il visitatore dà per scontato che siano gli interpreti che vedrà
   in scena: è un'informazione che sbaglia in silenzio. */
.show-section-nota {
  font-size:     var(--fs-sm);
  line-height:   1.7;
  color:         var(--text-dim);
  max-width:     var(--measure);
  margin-bottom: 2.5rem;
}
.show-section-nota strong { color: var(--gold-light); font-weight: 400; }
/* Il titolo lascia 2,5rem sotto di sé: con la nota in mezzo diventerebbero
   40px fra il titolo e la sua stessa didascalia, che si leggerebbe staccata.
   Dove `:has()` non c'è la regola cade e restano i 2,5rem: più aria, non un
   difetto. */
.show-section-h2:has(+ .show-section-nota) { margin-bottom: .8rem; }

/* ─── FORMAT LIST ─── */
.format-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap:                   1rem;
}
.format-item {
  display:    flex;
  align-items: flex-start;
  gap:         .8rem;
  border:      1px solid rgba(201,168,76,.1);
  padding:     1.2rem 1.4rem;
  background:  rgba(13,59,62,.12);
}
.format-item-dot {
  width:            8px;
  height:           8px;
  min-width:        8px;
  background:       var(--gold);
  margin-top:       .35rem;
}
.format-item-text {
  font-family:   var(--font-display);
  font-size:     var(--fs-base);
  line-height:   1.5;
}

/* ─── FORMAZIONI ───────────────────────────────────────────
   Alcuni format sono realizzabili con organici diversi (oggi solo
   Candlelight Magic Moment, dalla scheda del cliente). Tre card
   affiancate, dalla più ricca alla più snella: `--scelta` marca
   quella effettivamente usata in una data, così la pagina collega
   il format all'evento senza ripetere i nomi degli artisti.
────────────────────────────────────────────────────────────── */
.formazioni-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:                   1rem;
}
.formazione {
  border:     1px solid rgba(201,168,76,.1);
  background: rgba(13,59,62,.12);
  padding:    1.6rem 1.5rem;
  display:    flex;
  flex-direction: column;
}
.formazione-n {
  font-family:    var(--font-label);
  font-size:      var(--fs-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  .5rem;
}
.formazione-size {
  font-family:   var(--font-display);
  font-size:     1.15rem;
  font-weight:   300;
  margin-bottom: 1.1rem;
}
.formazione-list {
  list-style: none;
  margin:     0;
  padding:    0;
}
.formazione-list li {
  position:      relative;
  padding-left:  1.1rem;
  font-size:     var(--fs-base);
  line-height:   1.5;
  color:         var(--text-light);
  margin-bottom: .55rem;
}
.formazione-list li::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        .5rem;
  width:      6px;
  height:     6px;
  background: var(--gold);
}
/* quella usata in una data precisa */
.formazione--scelta { border-color: rgba(201,168,76,.34); }
.formazione-note {
  margin-top:  auto;
  padding-top: 1rem;
  font-size:   var(--fs-label);
  line-height: 1.6;
  color:       var(--gold-light);
  font-style:  italic;
}

/* ─── PROGRAMMI ────────────────────────────────────────────
   Un format, più repertori: il Candlelight esiste come
   "Magic Moments" e come "Disney Concert". Cambiano cast,
   repertorio e organico, non l'allestimento — quindi una
   pagina sola, ma con i due programmi in blocchi separati.
   Senza un contenitore visibile il cast dell'uno sembrerebbe
   valere anche per l'altro.
─────────────────────────────────────────────────────────── */
.programma {
  /* la nav è fissa e alta 97px: senza questo l'ancora dei
     link "vai al programma" finisce sotto la barra */
  scroll-margin-top: 120px;
}
/* Niente riga qui: nel sito i blocchi chiudono con un
   border-bottom, e l'ultima .show-section del programma
   precedente ne ha già uno. Aggiungerne un altro in cima
   disegnava due fili paralleli a 60px di distanza. */
.programma + .programma { padding-top: 4rem; }
.programma-head { padding-top: 3.5rem; }
.programma + .programma .programma-head { padding-top: 0; }
.programma-head .show-section-h2 { margin-bottom: 0; }

.programma-n {
  display:        inline-block;
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .26em;
  text-transform: uppercase;
  color:          var(--gold);
  border:         1px solid rgba(201,168,76,.3);
  padding:        .5rem .85rem;
  margin-bottom:  1.2rem;
}

/* Qui la locandina non apre la pagina ma il programma:
   niente stacco in alto, niente riga di chiusura in basso. */
.programma .ev-poster {
  padding:       2.5rem 0 1rem;
  border-bottom: none;
}

/* Scorciatoie ai due programmi, in fondo all'introduzione.
   La pagina è lunga il doppio di una normale: chi arriva dal
   filtro "Disney" del cartellone deve poterci saltare. */
p.programmi-jump-label {
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .24em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-top:     2.4rem;
  margin-bottom:  .9rem;
}
.programmi-jump {
  display:   flex;
  flex-wrap: wrap;
  gap:       .7rem;
}
.programmi-jump a {
  display:         inline-flex;
  align-items:     center;
  min-height:      44px;          /* bersaglio comodo anche col dito */
  padding:         .6rem 1.3rem;
  border:          1px solid rgba(201,168,76,.28);
  font-family:     var(--font-label);
  font-size:       var(--fs-micro);
  letter-spacing:  .18em;
  text-transform:  uppercase;
  color:           var(--cream);
  text-decoration: none;
  cursor:          pointer;
  transition:      color .2s ease, border-color .2s ease, background .2s ease;
}
.programmi-jump a:hover {
  color:        var(--gold-light);
  border-color: rgba(201,168,76,.55);
  background:   rgba(201,168,76,.08);
}

/* ─── CAST GRID ─── */
.cast-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   1rem;
}
.cast-card {
  border:      1px solid rgba(201,168,76,.1);
  padding:     1.4rem;
  background:  rgba(13,59,62,.1);
  transition:  background .3s;
}
.cast-card:hover { background: rgba(13,59,62,.28); }
.cast-role {
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .2em;
  color:          var(--gold);
  text-transform: uppercase;
  margin-bottom:  .45rem;
}
.cast-name {
  font-family:   var(--font-display);
  font-size:     1rem;
  margin-bottom: .2rem;
}
/* Qualificatore accanto al nome, per lo stesso personaggio a due età
   (Ugo Tognazzi anziano / giovane). Serve un distinguo che NON rubi il
   posto al nome: un trattino li metterebbe alla pari. */
.cast-name .cast-eta {
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-left:    .45rem;
  white-space:    nowrap;
}
.cast-actor {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   var(--fs-sm);
  color:       var(--text-dim);
}

/* ─── ENSEMBLE ───────────────────────────────────────────────
   Il corpo di ballo e i coristi non hanno un ruolo nominato, quindi non
   possono stare nella .cast-grid: una card per otto persone senza ruolo
   sarebbe otto card vuote. Vanno sotto, in riga, separati da un filo.
   Componente riusabile da qualunque spettacolo con un ensemble.
──────────────────────────────────────────────────────────── */
.cast-ensemble {
  margin-top:  2.5rem;
  padding-top: 1.8rem;
  border-top:  1px solid rgba(201,168,76,.14);
}
.cast-ensemble-label {
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .3em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  .8rem;
}
.cast-ensemble-names {
  font-family: var(--font-display);
  font-size:   1.05rem;
  line-height: 1.9;
  color:       var(--text-light);
  max-width:   var(--measure);
}

/* ─── ELENCO BRANI ───────────────────────────────────────────
   Per un musical la lista dei brani è contenuto di programma di sala, non
   decorazione. È un <ol> vero: l'ordine è quello dello spettacolo, e con
   ventiquattro voci la numerazione serve a orientarsi.
   Il numero lo disegna un counter CSS, così il markup resta un elenco
   ordinato pulito e gli screen reader lo annunciano come tale.
──────────────────────────────────────────────────────────── */
.tracklist {
  counter-reset:         traccia;
  list-style:            none;
  padding:               0;
  margin:                0;
  display:               grid;
  /* `min(330px, 100%)` e non `330px` secco: dentro una griglia il minimo di
     minmax() non si restringe mai, quindi a 320px — dove lo spazio utile è
     288px — la traccia sfondava la pagina di 26px. Con min() la colonna cede
     quando il contenitore è più stretto del minimo. */
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap:                   0 3rem;
}
.tracklist li {
  counter-increment: traccia;
  position:          relative;
  padding:           .85rem 0 .85rem 2.6rem;
  border-bottom:     1px solid rgba(201,168,76,.09);
}
.tracklist li::before {
  content:        counter(traccia, decimal-leading-zero);
  position:       absolute;
  left:           0;
  top:            1rem;
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .1em;
  color:          var(--gold);
}
.track-title {
  display:     block;
  font-family: var(--font-display);
  font-size:   1.1rem;
  line-height: 1.35;
}
.track-who {
  display:        block;
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-top:     .3rem;
}

/* ─── EDIZIONI ───────────────────────────────────────────────
   Un titolo ripreso in allestimenti diversi: qui si vede la storia del
   titolo senza spacciare le date passate per date in cartellone.
   ⚠️ Sono date TRASCORSE: non aggiungere qui un link di prevendita né un
   JSON-LD Event, che Google leggerebbe come evento futuro.
──────────────────────────────────────────────────────────── */
.edizioni {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap:                   1rem;
}
.edizione {
  border:     1px solid rgba(201,168,76,.1);
  background: rgba(13,59,62,.12);
  padding:    1.5rem 1.4rem;
}
.edizione-anno {
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  .6rem;
}
.edizione-dove {
  font-family:   var(--font-display);
  font-size:     1.15rem;
  line-height:   1.35;
  margin-bottom: .5rem;
}
.edizione-nota {
  font-size:   var(--fs-sm);
  line-height: 1.6;
  color:       var(--text-dim);
}

/* ─── TRAMA / BODY TEXT ───
   È il testo più lungo del sito, quindi è dove la misura della riga conta di
   più. Era `max-width: 780px` a 14,4px: circa 108 caratteri per riga, contro i
   65-75 entro cui l'occhio ritrova da solo l'inizio della riga successiva.
   --measure è in `ch`, non in pixel: così la misura resta giusta anche se un
   giorno il corpo del testo cambia. Vedi base.css. */
.show-body-text p {
  font-size:     var(--fs-base);
  line-height:   1.8;
  color:         var(--text-light);
  margin-bottom: 1.2rem;
  max-width:     var(--measure);
}
.show-body-text p strong { color: var(--gold-light); }

/* Il testo che CHIUDE una griglia le stava attaccato: misurati **0px** fra il
   bordo dell'ultima card e la scatola del paragrafo, su 4 blocchi in 3 pagine,
   a 1440 come a 390. A video non si legge come un errore ma come un paragrafo
   che appartiene all'ultima card invece che alla sezione — quello che si vede
   è solo l'interlinea, non uno stacco voluto.
   ⚠️ Solo il testo che viene DOPO: quello che introduce una griglia ha già il
   suo margine e non va toccato. */
.format-grid     + .show-body-text,
.formazioni-grid + .show-body-text,
.cast-grid       + .show-body-text { margin-top: 2rem; }

/* ─── CURIOSITÀ BOX ─── */
.curiosita-box {
  border:     1px solid rgba(201,168,76,.12);
  padding:    2rem 2.5rem;
  background: rgba(13,59,62,.18);
  /* il riquadro tiene la misura del testo più il suo riempimento */
  max-width:  calc(var(--measure) + 5rem);
}
.curiosita-box p {
  font-size:     var(--fs-base);
  line-height:   1.88;
  color:         var(--text-light);
  margin-bottom: 1rem;
}
.curiosita-box p:last-child { margin-bottom: 0; }

/* ─── VIDEO SECTION ─── */
.show-video-section {
  padding:     5rem 0;
  text-align:  center;
  border-bottom: 1px solid rgba(201,168,76,.09);
}
.show-video-section .show-section-label,
.show-video-section .show-section-h2 { text-align: center; }
.show-video-desc {
  font-size:     var(--fs-base);
  color:         var(--text-dim);
  max-width:     520px;
  margin:        0 auto 2rem;
  line-height:   1.8;
}

/* ─── CONTACTS ─── */
/* Spostato in css/base.css come `.contatti-band`: lo stesso blocco esisteva
   qui, dentro `.sp-cta` in sponsor.css e — senza NESSUNO stile — in
   concerti.html, che non carica questo foglio. Vedi la nota in base.css. */

/* ─── WHATSAPP BUTTON ─── */
/* Spostato in css/base.css: usato anche dalle pagine sponsor */

/* ─── BACK LINK ─── */
/* 44px è il bersaglio minimo per il dito: era 19px. Il riempimento
   verticale compensa, così il comando non cresce a video. */
.show-back {
  display:        inline-flex;
  align-items:    center;
  min-height:     44px;
  /* bersaglio minimo per il dito: la grafica non cambia, cresce
     solo l'area che risponde al tocco */
  min-height:     44px;
  gap:            .5rem;
  font-family:    var(--font-label);
  font-size:      var(--fs-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--text-dim);
  text-decoration: none;
  margin-bottom:  3rem;
  transition:     color .2s;
}
.show-back:hover { color: var(--gold); }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .show-intro {
    grid-template-columns: 1fr;
    gap:                   3rem;
  }
  .show-scheda { order: -1; }
}
/* Il gradino per telefono: le due variabili stanno in base.css, vedi
   *Ritmo verticale su telefono*. A 390px i valori del desktop lasciavano
   fino a un terzo di schermo di vuoto fra una sezione e l'altra. */
@media (max-width: 600px) {
  .cast-grid      { grid-template-columns: 1fr 1fr; }
  .format-grid    { grid-template-columns: 1fr; }
  .show-intro,
  .show-section,
  .show-video-section { padding: var(--sez-y) 0; }
}
/* Sotto i 480px due colonne di cast non ci stanno: le card hanno 22px di
   riempimento per lato, quindi la coppia chiedeva 353px contro i 288
   disponibili a 320px. Una colonna sola, e i nomi restano leggibili. */
@media (max-width: 480px) {
  .cast-grid      { grid-template-columns: 1fr; }
}