/* Fiche evento e pagina biglietti — extraites de main.css le 05/11/2026 (tache n4a: budget poids home mobile).
   Chargee uniquement par les pages ticket/ et biglietti/ (extra_css=[CSS_FICHE] dans build_site.py).
   Deux regles partagees (.evento__torna, .card__prezzo-base) sont restees dans main.css pour index.html et autres pages.
   Marqueur: fiche-css-n4a */

/* 8. Fiche evento e pagina biglietti --------------------------------------- */

.evento__sottotitolo {
  margin-bottom: 4px;
  color: var(--secondario);
}

.evento h1 {
  margin-bottom: var(--spazio-md);
  font-family: var(--font-titoli);
  font-size: var(--t-28);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.evento__luogo {
  font-weight: 500;
}

.evento__quando {
  color: var(--secondario);
}

.evento__vendita {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spazio-xs);
  max-width: 720px;
  margin: 20px 0 0;
  padding: 12px;
  border: 1px solid var(--grigio-200);
  border-radius: var(--raggio-lg);
  background: var(--grigio-50);
}

.evento__vendita .badge {
  align-self: flex-start;
}

.evento .btn--acquista {
  margin-top: 12px;
}

.evento__esito {
  margin-top: 8px;
  font-weight: 500;
}

.evento__esito:empty {
  margin: 0;
}

.evento__testo p + p {
  margin-top: 12px;
}

.evento__figura {
  margin: 20px 0 0;
  max-width: 440px;
}

.evento__figura img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--raggio-lg);
  background: var(--nero-2);
  box-shadow: var(--ombra-md);
}

.evento__figura--larga img {
  aspect-ratio: 2 / 1;
}

.evento__altri {
  margin-top: var(--spazio-2xl);
}

@media (min-width: 640px) {
  .evento__vendita {
    flex-direction: row;
    align-items: stretch;
  }

  .evento__vendita .info-vendita {
    flex: 1 1 auto;
  }
}

@media (min-width: 800px) {
  .evento__pannello--descrizione {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
    gap: 32px;
    align-items: start;
  }

  .evento__pannello--descrizione .evento__figura {
    margin: 0;
    max-width: none;
  }
}

@media (min-width: 960px) {
  .evento h1 {
    font-size: var(--t-36);
  }
}

/* 8b. Fiche evento v2: hero poster, stati, prezzo, CTA ----------------------- */

.fiche .briciole ol {
  margin-bottom: var(--spazio-lg);
}

.hero-evento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spazio-lg);
  padding: var(--spazio-lg);
  border: 1px solid var(--grigio-200);
  border-radius: var(--raggio-lg);
  background: linear-gradient(180deg, var(--grigio-50) 0%, var(--bianco) 100%);
}

.hero-evento__media {
  margin: 0;
  min-width: 0;
}

.hero-evento__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--raggio-lg);
  background: var(--nero-2);
  box-shadow: var(--ombra-md);
}

.hero-evento__img--larga {
  aspect-ratio: 2 / 1;
}

/* Opus C4 — hero-evento__media--sicura (< 720 px): riquadro 3:2, locandina INTERA (contain) su sfondo ambiente
   sfocato della stessa immagine (site.js); prima 87/105 locandine quadrate erano tagliate a metà (2:1 cover) */
.hero-evento__ambiente {
  display: none;
}

@media (max-width: 719px) {
  .hero-evento__media--sicura {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--raggio-lg);
    background: var(--nero-2);
    box-shadow: var(--ombra-md);
  }

  .hero-evento__media--sicura .hero-evento__ambiente {
    display: block;
    position: absolute;
    inset: -16px;
    z-index: -1;
    background: center / cover no-repeat;
    filter: blur(14px) brightness(0.6) saturate(1.2);
  }

  .hero-evento__media--sicura .hero-evento__img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
}

.hero-evento__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-sm);
  min-width: 0;
}

.hero-evento__categoria {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  color: var(--grigio-700);
  font-size: var(--t-13);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-evento__categoria a {
  display: inline-block;
  padding: 13px 6px; /* P1-17: area di tocco ≥ 44 px, aspetto invariato */
  margin: -13px -6px;
  color: inherit;
  text-decoration: none;
}

.hero-evento__categoria a:hover {
  color: var(--nero);
  text-decoration: underline;
}

.hero-evento__categoria span {
  color: var(--grigio-300);
}

.fiche .hero-evento__titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: var(--t-28);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.hero-evento__sottotitolo {
  margin: -4px 0 0;
  color: var(--grigio-700);
  font-size: var(--t-16);
}

.hero-evento__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.hero-evento__riga {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.hero-evento__riga > svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--grigio-700);
}

.hero-evento__valore {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.hero-evento__valore strong {
  font-size: var(--t-16);
  overflow-wrap: anywhere;
}

.hero-evento__citta {
  color: var(--grigio-700);
  font-size: var(--t-13);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-evento__dettaglio {
  color: var(--grigio-700);
  font-size: var(--t-14);
}

.hero-evento__riga--data .data-chip + .hero-evento__valore {
  justify-content: center;
  min-height: 56px;
}

.data-chip {
  display: inline-grid;
  grid-template-rows: auto auto;
  flex: 0 0 auto;
  min-width: 56px;
  padding: 4px 6px 5px;
  border: 1px solid var(--nero);
  border-radius: var(--raggio);
  background: var(--bianco);
  text-align: center;
  line-height: 1.05;
}

.data-chip__giorno {
  font-family: var(--font-titoli);
  font-size: var(--t-24);
  font-weight: 700;
}

.data-chip__mese {
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.12em;
}

.data-chip__anno {
  margin-top: 2px;
  color: var(--grigio-500);
  font-size: var(--t-11);
}

/* Stati (badge) */
.stati {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 719px) {
  /* P2-21 — badge su una riga scorrevole (invece di due righe da 68 px) */
  .stati--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .stati--scroll::-webkit-scrollbar {
    display: none;
  }

  .stati--scroll .stato {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.stato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--grigio-300);
  border-radius: var(--raggio-btn);
  background: var(--bianco);
  color: var(--grigio-700);
  font-size: var(--t-13);
  font-weight: 500;
  white-space: nowrap;
}

.stato--ok {
  border-color: #cdebd4;
  background: #e9f8ec;
  color: #1b6b32;
  font-weight: 700;
}

.stato--attesa {
  border-color: #f3dc8a;
  background: #fff7d6;
  color: #7a5a00;
  font-weight: 700;
}

.stato--esaurito {
  border-color: var(--nero);
  background: var(--nero);
  color: var(--bianco);
  font-weight: 700;
}

.stato--neutro {
  background: var(--grigio-100);
}

/* I7 — prova sociale calcolata (ultimi posti, % sala): urgenza fondata sui dati */
.stato--urgenza {
  border-color: #f1c0c0;
  background: #fdeded;
  color: #9b1c1c;
  font-weight: 700;
}

/* Prezzo e acquisto */
.hero-evento__acquisto {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--spazio-xs);
  padding-top: var(--spazio-md);
  border-top: 1px solid var(--grigio-200);
}

.prezzo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
}

.prezzo__etichetta {
  color: var(--grigio-700);
  font-size: var(--t-14);
}

.prezzo__valore {
  font-family: var(--font-titoli);
  font-size: var(--t-28);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.prezzo__fino {
  color: var(--grigio-700);
  font-size: var(--t-14);
}

.prezzo__nota {
  flex-basis: 100%;
  color: var(--grigio-500);
  font-size: var(--t-13);
}

/* P1-11 — « tutto incluso »: la sola base di prezzo del sito */
.prezzo__base {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--raggio-btn);
  background: var(--grigio-100);
  color: var(--grigio-700);
  font-size: var(--t-12);
  font-weight: 500;
  white-space: nowrap;
  cursor: help;
}

.fiche .btn--acquista {
  margin-top: 0;
  min-height: 52px;
  font-size: var(--t-16);
}

.hero-evento__nota {
  margin: 0;
  color: var(--grigio-700);
  font-size: var(--t-14);
}

.fiche .evento__esito {
  margin: 0;
}

/* Descrizione in arrivo (stato di ripiego) */
.in-arrivo {
  padding: var(--spazio-md) var(--spazio-lg);
  border-left: 4px solid var(--giallo);
  border-radius: var(--raggio-sm);
  background: var(--grigio-50);
  color: var(--grigio-700);
}

.in-arrivo__titolo {
  margin-bottom: 4px;
  color: var(--nero);
  font-family: var(--font-titoli);
  font-weight: 700;
}

.fiche .evento__pannello {
  max-width: 72ch;
}

.fiche .evento__pannello p + p {
  margin-top: 12px;
}

.consegna {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.consegna dt {
  font-family: var(--font-titoli);
  font-weight: 700;
}

.consegna dd {
  margin: 2px 0 0;
  color: var(--grigio-700);
}

/* Condividi */
.condividi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: var(--spazio-lg);
  padding-top: var(--spazio-md);
  border-top: 1px solid var(--grigio-200);
}

.condividi__titolo {
  margin: 0;
  color: var(--grigio-700);
  font-family: var(--font-titoli);
  font-size: var(--t-13);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.condividi__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.condividi__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tocca); /* P1-17 */
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--grigio-300);
  border-radius: var(--raggio-btn);
  background: var(--bianco);
  color: var(--nero);
  font-size: var(--t-14);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.condividi__link:hover {
  border-color: var(--nero);
  background: var(--grigio-50);
}

.condividi__esito:not(.sr-only) {
  flex-basis: 100%;
  margin: 0;
  color: var(--grigio-700);
  font-size: var(--t-14);
}

/* Le date in tournée */
.tournee__intro {
  margin: -8px 0 var(--spazio-md);
  color: var(--grigio-700);
}

.tournee__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--grigio-200);
  border-radius: var(--raggio-lg);
  overflow: hidden;
}

.tournee__riga {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--grigio-200);
  background: var(--bianco);
}

.tournee__riga:first-child {
  border-top: 0;
}

.tournee__riga.is-corrente {
  background: var(--grigio-50);
  box-shadow: inset 4px 0 0 var(--giallo);
}

.data-chip--piccolo {
  min-width: 50px;
  padding: 3px 5px 4px;
}

.data-chip--piccolo .data-chip__giorno {
  font-size: var(--t-20);
}

.tournee__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.tournee__info strong {
  overflow-wrap: anywhere;
}

.tournee__dettaglio {
  color: var(--grigio-700);
  font-size: var(--t-14);
}

.tournee__prezzo {
  margin-top: 2px;
  font-size: var(--t-14);
  font-weight: 700;
}

.tournee__azione {
  grid-column: 1 / -1;
}

.tournee__btn {
  min-height: var(--tocca); /* P1-17 */
  padding: 0 18px;
  font-size: var(--t-14);
}

.tournee__corrente,
.tournee__nolink {
  color: var(--grigio-500);
  font-size: var(--t-14);
}

.tournee__corrente {
  font-weight: 700;
  color: var(--grigio-700);
}

.tournee__altre {
  margin-top: 12px;
}

.tournee__altre summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tocco);
  padding: 0 4px;
  color: var(--nero);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.tournee__altre summary::-webkit-details-marker {
  display: none;
}

.tournee__altre summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--nero);
  border-radius: 50%;
  font-size: var(--t-16);
  line-height: 1;
}

.tournee__altre[open] summary::before {
  content: "−";
}

.tournee__altre[open] summary {
  margin-bottom: 12px;
}

/* La sala */
.sala__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spazio-md);
  padding: var(--spazio-lg);
  border: 1px solid var(--grigio-200);
  border-radius: var(--raggio-lg);
  background: var(--grigio-50);
}

.sala__media {
  margin: 0;
}

.sala__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--raggio);
  background: var(--nero-2);
}

.sala__corpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sala__nome {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: var(--t-20);
  font-weight: 700;
  line-height: 1.2;
}

.sala__indirizzo {
  font-weight: 500;
}

.sala__nota,
.sala__corpo p {
  color: var(--grigio-700);
}

.sala__mappa {
  align-self: flex-start;
  gap: 8px;
  margin-top: 4px;
}

@media (min-width: 640px) {
  .tournee__riga {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .tournee__azione {
    grid-column: auto;
    justify-self: end;
  }

  .consegna {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
  }

  .sala__card {
    grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
    gap: var(--spazio-lg);
  }

  .sala__card--senza-media {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Acquisto incorporato nella fiche: sezione « Acquista i biglietti » (modulo seatmap caricato a richiesta) */
.acquisto {
  scroll-margin-top: calc(var(--header-h, 150px) + 8px);
}

.acquisto__intro {
  margin: -8px 0 var(--spazio-md);
  color: var(--grigio-700);
}

/* selettore delle rappresentazioni (fiche con più date in vendita) */
.acquisto__date {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr; /* P2-22: altezza uniforme delle chip */
  gap: 10px;
  margin: 0 0 var(--spazio-md);
  padding: 0;
  list-style: none;
}

.acquisto__date > li {
  display: grid;
}

/* P2-22 — spunta sulla rappresentazione corrente */
.acquisto__data.chip--coche,
.acquisto__data[aria-pressed="true"] {
  position: relative;
  padding-right: 44px;
}

.acquisto__data.chip--coche::after,
.acquisto__data[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--nero) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd500' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / 14px no-repeat;
  transform: translateY(-50%);
}

.acquisto__data-prezzo--attesa {
  font-weight: 400;
  color: var(--grigio-500);
}

.acquisto__data {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: var(--tocco);
  padding: 10px 14px;
  border: 1px solid var(--grigio-200);
  border-radius: var(--raggio-lg);
  background: var(--bianco);
  color: var(--nero);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.acquisto__data:hover {
  border-color: var(--grigio-500);
}

.acquisto__data[aria-pressed="true"] {
  border-color: var(--nero);
  background: var(--grigio-50);
  box-shadow: inset 0 0 0 1px var(--nero), inset 5px 0 0 var(--giallo);
}

.acquisto__data:focus-visible {
  outline: 3px solid var(--nero);
  outline-offset: 2px;
}

.acquisto__data-periodo {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: var(--raggio);
  background: var(--grigio-100);
}

.acquisto__data-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.acquisto__data-info strong {
  overflow-wrap: anywhere;
}

.acquisto__data-dettaglio {
  color: var(--grigio-700);
  font-size: var(--t-14);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* P2-22: una riga per la sala, altezza stabile */
}

.acquisto__data-stato {
  margin-top: 2px;
  font-size: var(--t-14);
  font-weight: 700;
}

.acquisto__data-stato--ko {
  color: var(--grigio-500);
  font-weight: 400;
}

.acquisto__data-ora,
.acquisto__data-prezzo {
  white-space: nowrap;
}

/* contenitore del modulo: segnaposto stabile prima del caricamento (niente salto di layout) */
.acquisto__modulo {
  min-height: 240px;
}

.acquisto__modulo:not(.seatmap) {
  display: grid;
  place-items: center;
  padding: var(--spazio-lg);
  border: 1px dashed var(--grigio-300);
  border-radius: var(--raggio-lg);
  background: var(--grigio-50);
  text-align: center;
}

/* P0-1 — scheletro ad altezza riservata (piano grigio + 5 schede) finché seatmap.js non monta il modulo */
.acquisto__modulo:not(.seatmap) .acquisto__scheletro {
  display: grid;
  width: 100%;
  gap: var(--spazio-md);
  text-align: left;
}

.acquisto__scheletro-piano {
  height: 320px;
  border-radius: var(--raggio-lg);
  background: linear-gradient(90deg, var(--grigio-200) 25%, var(--grigio-100) 37%, var(--grigio-200) 63%);
  background-size: 400% 100%;
  animation: skeleton-onda 1.4s ease infinite;
}

.acquisto__scheletro-schede {
  display: grid;
  gap: 10px;
}

.acquisto__scheletro-scheda {
  height: 64px;
  border-radius: var(--raggio);
  background: linear-gradient(90deg, var(--grigio-200) 25%, var(--grigio-100) 37%, var(--grigio-200) 63%);
  background-size: 400% 100%;
  animation: skeleton-onda 1.4s ease infinite;
}

@media (min-width: 960px) {
  .acquisto__modulo--piano:not(.seatmap) {
    min-height: 520px;
  }

  .acquisto__modulo--piano:not(.seatmap) .acquisto__scheletro {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }

  .acquisto__scheletro-piano {
    height: 520px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acquisto__scheletro-piano,
  .acquisto__scheletro-scheda {
    animation: none;
  }
}

.acquisto__attesa {
  margin: 0;
  color: var(--grigio-700);
}

.acquisto .seatmap {
  margin-top: 0;
  padding-bottom: 0;
}

.acquisto__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: var(--spazio-sm) 0 0;
  font-size: var(--t-14);
}

.acquisto__piede a {
  color: var(--grigio-700);
}

.acquisto__vista-wrap[hidden] {
  display: none;
}

.acquisto__piede .acquisto__schermo-intero,
.evento__mappa-link,
.sala__mappa {
  display: inline-flex;
  align-items: center;
  min-height: var(--tocco);
  min-width: var(--tocco);
}

.acquisto__piede .acquisto__schermo-intero,
.evento__mappa-link {
  padding: 6px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 640px) {
  .acquisto__date {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* CTA fisso in basso (solo mobile) */
.cta-mobile {
  display: none;
}

/* la barra si ritira mentre la sezione « Acquista i biglietti » è sullo schermo (evento.js) */
.cta-mobile.is-nascosta {
  transform: translateY(110%);
  pointer-events: none;
}

@media (max-width: 767px) {
  .cta-mobile {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-barra-tab);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px var(--gutter) max(6px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--grigio-200);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform 0.25s ease;
  }

  .cta-mobile__testo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
  }

  .cta-mobile__titolo {
    overflow: hidden;
    font-family: var(--font-titoli);
    font-size: var(--t-13);
    font-weight: 700;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cta-mobile__dettaglio {
    overflow: hidden;
    color: var(--grigio-700);
    font-size: var(--t-13);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cta-mobile__dettaglio strong {
    color: var(--nero);
    font-size: var(--t-16);
  }

  .fiche .cta-mobile__btn,
  .cta-mobile__btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 18px;
    font-size: var(--t-14);
  }

  /* la barra non copre il contenuto né i widget flottanti */
  body.pagina-fiche {
    padding-bottom: 74px;
  }

  body.pagina-fiche .widget-access {
    bottom: 82px;
  }
}

@media (min-width: 720px) {
  .hero-evento {
    grid-template-columns: minmax(240px, 2fr) minmax(0, 3fr);
    gap: var(--spazio-xl);
    align-items: center;
    padding: var(--spazio-xl);
  }

  .hero-evento__img--larga {
    aspect-ratio: 1 / 1;
  }

  .hero-evento__acquisto {
    align-items: flex-start;
  }

  .fiche .btn--acquista {
    min-width: 300px;
  }
}

@media (min-width: 960px) {
  .hero-evento {
    grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr);
  }

  .fiche .hero-evento__titolo {
    font-size: var(--t-36);
  }

  .hero-evento__meta {
    gap: 12px;
  }
}


/* hero-evento--data-al-vivo (W2-B tranche A, mobile uniquement <=767px): 23 fiches (de +9 a +239 px) plaçaient la
   ligne de date sous le pli 360x740 (mesure des 105: mediane 705, TSTM 806). Coupes de la chaîne article->hero->meta:
   marge-haut article 36->20, padding hero 24/24->16/14, gap hero 24->16 (x3), meta margin 4->0 + gap 10->8,
   gap rangée 12->10, padding chip 4/5->3/4 = environ -70px: TSTM 806->740, médiane 715->~645. Desktop intouché par
   construction (portée media). Mesureur: cache scratch viva-w2b (105 fiches). */
@media (max-width: 767px) {
  .pagina-fiche article.sezione { margin-top: 20px; }
  .pagina-fiche .hero-evento { padding-top: 16px; padding-bottom: 14px; gap: 16px; }
  .pagina-fiche .hero-evento__meta { margin-top: 0; gap: 8px; }
  .pagina-fiche .hero-evento__riga { gap: 10px; }
  .pagina-fiche .data-chip { padding-top: 3px; padding-bottom: 4px; }
}

/* W2-B tranche B: titolo compatto per i titoli lunghi (>= 40 caratteri, classe data dal generatore
   hero-evento__titolo--compacta) sotto i 767px — da var(--t-28) a var(--t-22) con interlinea 1.15:
   ogni riga guadagna circa 7px e i titoli lunghi si avvolgono in meno righe. */
@media (max-width: 767px) {
  .pagina-fiche .hero-evento__titolo--compacta { font-size: var(--t-22); line-height: 1.15; }
}

/* W2-B tranche C — residui RENOIR (+71), CONTROTEMPO (+31), ABBAZIA (+24) a 360x740, solo sotto i 767px.
   (1) ritocco globale della hero: puce data alleggerita come data-chip--piccolo (giorno t-24 -> t-20, padding
   3/6/4 -> 2/5/3, anno senza margine, valore accanto min-height 56 -> 48), padding alto 16 -> 12, row-gap
   media/corpo 16 -> 12, gap del corpo 12 -> 8, gap meta 8 -> 6, interlinea valori 1.3 -> 1.2 e sottotitolo
   1.5 -> 1.25; (2) variante generata hero-evento__titolo--lunghissima (titoli >= 60 caratteri, build_site.py,
   4 fiche): titolo t-22 -> t-20, interlinea 1.12. Misura delle 105 fiche: 3 -> 0 sotto la piega, mediana
   661 -> 626 (RENOIR 811 -> 736, CONTROTEMPO 771 -> 697, ABBAZIA 764 -> 693). Desktop intatto (portata media). */
@media (max-width: 767px) {
  .pagina-fiche .hero-evento { padding-top: 12px; row-gap: 12px; }
  .pagina-fiche .hero-evento__corpo { gap: 8px; }
  .pagina-fiche .hero-evento__sottotitolo { line-height: 1.25; }
  .pagina-fiche .hero-evento__meta { gap: 6px; }
  .pagina-fiche .hero-evento__valore { line-height: 1.2; }
  .pagina-fiche .hero-evento__meta .data-chip { min-width: 50px; padding: 2px 5px 3px; }
  .pagina-fiche .hero-evento__meta .data-chip__giorno { font-size: var(--t-20); }
  .pagina-fiche .hero-evento__meta .data-chip__anno { margin-top: 0; }
  .pagina-fiche .hero-evento__riga--data .data-chip + .hero-evento__valore { min-height: 48px; }
  .pagina-fiche .hero-evento__titolo--lunghissima { font-size: var(--t-20); line-height: 1.12; }

  /* W2-B tranche D — briciole-monoriga: il fil d'Ariane ripeteva il titolo su 2-4 righe (46/67/88 px a 360 px su
     61 fiche) e spingeva la riga data sotto la barra .cta-mobile fissa (top 673 px a 360x740: 13 fiche coperte al
     caricamento). Ora una sola riga (21 px) che scorre in orizzontale, barra di scorrimento nascosta. Contenitore
     largo quanto la colonna (min-width 0, max-width 100%, nessun padding laterale: 0 sbordamento del body).
     padding-top 17 + margin-top -17 = layout invariato (il margine collassa con quello dell'articolo): la zona di
     tocco P1-17 delle ancore (13 px sopra il testo) e l'anello di focus (4 px) restano dentro il contenitore, che
     con overflow-x: auto altrimenti li ritaglierebbe; overflow-y: hidden = nessuno scorrimento verticale parassita. */
  .fiche .briciole {
    min-width: 0;
    max-width: 100%;
    margin-top: -17px;
    padding-top: 17px;
    /* briciole-anello-home : meme paire cote gauche — le bord du scrollport reculait sur
       l'ancrage a x=16 pendant que le trait gauche de l'anneau (:focus-visible, outline
       2 px + offset 2 px sur l'ancre P1-17 en marge -6) se peignait entre x=6 et x=10 :
       invisible au focus clavier. Glyphes inchanges (padding pousse +12, marge tire -12). */
    margin-left: -12px;
    padding-left: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .fiche .briciole::-webkit-scrollbar { display: none; }
  .fiche .briciole ol { flex-wrap: nowrap; }
  /* briciole-fondu : fondu a droite quand le fil depasse (masque fixe au bord du conteneur, pur visuel :
     le tap et le focus restent actifs sous le fondu) ; sans effet quand le fil tient deja sur une ligne. */
  .fiche .briciole {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent);
  }
}

/* W2-D stati-fondu — la rangee de badges P2-21 (une ligne qui defile < 720 px) se coupait net au bord droit sans
   indice : 50/105 fiches a 360 px, jusqu'a 591 px caches (CONTROTEMPO : 4 badges dont « Ultimi 15 posti »). Meme
   fondu 28 px que briciole-fondu, mais CONDITIONNEL : masque pilote par le defilement de la rangee elle-meme
   (animation-timeline: scroll(self inline)). Timeline inactive quand la rangee tient (55 fiches, dont 16 au dernier
   badge a moins de 28 px du bord : un masque fixe les aurait estompes) ou n'est pas un conteneur defilant
   (720-767 px) ; masque retire en fin de course (dernier badge entier). Sans prise en charge : rendu inchange. */
@keyframes stati-fondu {
  0%, 99% {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent);
  }
  100% { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 767px) {
  :is(.pagina-fiche, .stati-fondu) .stati--scroll {
    animation: stati-fondu linear both;
    animation-timeline: scroll(self inline);
  }
}

/* AG-01 ag-widget-safe-card — su mobile (<= 767 px) compatta il blocco prezzo nel hero-evento così che la cifra
   « Biglietti da X € a Y € » non venga tagliata a metà dal bordo superiore della barra fissa .cta-mobile (top 673 px
   a 360x740), senza spostare di 1 px le righe sede/data superiori. */
@media (max-width: 767px) {
  :is(.pagina-fiche, .ag-widget-safe-card) .hero-evento__acquisto {
    gap: 6px;
    margin-top: 0;
    padding-top: 8px;
  }

  :is(.pagina-fiche, .ag-widget-safe-card) .hero-evento .prezzo {
    gap: 2px 6px;
  }

  :is(.pagina-fiche, .ag-widget-safe-card) .hero-evento .prezzo__valore {
    font-size: var(--t-20);
  }
}

/* hero-data-maxh — ligne date sous la barre .cta-mobile sur les ecrans COURTS (mobile portrait uniquement).
   La ligne date (li.hero-evento__riga--data) est a hauteur fixe par fiche (mediane 608, pires 670 a 360 px) mais la
   barre fixe (67 px) monte avec la hauteur d'ecran : au chargement 18 fiches couvertes a 360x700, 69 a 360x667, et a
   320 px de large meme 740 de haut ne suffit pas (5). Rien ne change des 360 px de large ET 740 px de haut, en
   paysage, ni >= 768 px. Le selecteur :is(.pagina-fiche, .hero-data-maxh) porte le marqueur du lot : meme
   specificite et meme appariement que .pagina-fiche (aucune page ne porte la classe .hero-data-maxh).
   Bande 1 (haut <= 739 px ou large <= 359 px) : barre 67 -> 57 px (padding 10 -> 6, bouton 46 -> 44 = cible tactile
   minimale, textes intacts) ; -23 px au-dessus de la date : fil d'Ariane 24 -> 17 sous la ligne (zone de tap 13 +
   anneau de focus 4 conserves), hero 12/12 -> 8/8, corps 8 -> 6, meta 6 -> 4 ; les 3 px sous l'en-tete restent
   (sans eux le haut de l'anneau de focus de « Home » se fond dans l'en-tete noir) ; corps de page 84 -> 74. */
@media (max-width: 767px) and (max-height: 739px) and (orientation: portrait), (max-width: 359px) and (orientation: portrait) {
  :is(.pagina-fiche, .hero-data-maxh) .cta-mobile { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  :is(.pagina-fiche, .hero-data-maxh) .cta-mobile__btn { min-height: 44px; }
  body:is(.pagina-fiche, .hero-data-maxh) { padding-bottom: 74px; }
  :is(.pagina-fiche, .hero-data-maxh) .briciole ol { margin-bottom: 17px; }
  :is(.pagina-fiche, .hero-data-maxh) .hero-evento { padding-top: 8px; row-gap: 8px; }
  :is(.pagina-fiche, .hero-data-maxh) .hero-evento__corpo { gap: 6px; }
  :is(.pagina-fiche, .hero-data-maxh) .hero-evento__meta { gap: 4px; }
}

/* hero-data-maxh — affiche plafonnee par la hauteur visible (100svh, repli 100vh) : locandina toujours entiere
   (contain sur fond ambiant), seule sa hauteur cede ce qu'il faut. 526 = barre 57 + hors-affiche de la pire fiche a
   360 px (462 : BIOPARCO, Residenza d'Epoca) + 7 de reserve => 185 px des 711 de haut (inchange), 174 a 700, 141 a
   667, 96 a 622. width: 100% empeche aspect-ratio de reporter le plafond sur la largeur. */
@media (max-width: 719px) and (max-height: 739px) and (orientation: portrait) {
  :is(.pagina-fiche, .hero-data-maxh) .hero-evento__media--sicura {
    width: 100%;
    max-height: max(96px, calc(100vh - 526px));
    max-height: max(96px, calc(100svh - 526px));
  }
}

/* hero-data-maxh — bande la plus courte (<= 621 px) : la ligne categoria du hero, doublon des liens du fil d'Ariane
   juste au-dessus (verifie sur les 105 fiches : 0 lien absent du fil), est masquee (-25,5 px) et l'affiche peut
   descendre a 72 px ; 500 = 526 - 25,5 arrondi (meme reserve). */
@media (max-width: 719px) and (max-height: 621px) and (orientation: portrait) {
  :is(.pagina-fiche, .hero-data-maxh) .hero-evento__categoria { display: none; }
  :is(.pagina-fiche, .hero-data-maxh) .hero-evento__media--sicura {
    max-height: max(72px, calc(100vh - 500px));
    max-height: max(72px, calc(100svh - 500px));
  }
}

/* hero-data-maxh — ecrans etroits (< 360 px, toute hauteur) : a 320 px les titres t-28 passaient sur 4 lignes ;
   un cran plus bas (28 -> 24, compacta 22 -> 20, lunghissima 20 -> 18) et plafond cale sur la pire fiche a 320 px
   (489 hors affiche : RENOIR) : 552 = 57 + 489 + 6 ; bande courte etroite (categoria masquee, 72 px) des 647 px. */
@media (max-width: 359px) and (orientation: portrait) {
  :is(.pagina-fiche, .hero-data-maxh) .hero-evento__titolo { font-size: var(--t-24); }
  :is(.pagina-fiche, .hero-data-maxh) .hero-evento__titolo--compacta { font-size: var(--t-20); }
  :is(.pagina-fiche, .hero-data-maxh) .hero-evento__titolo--lunghissima { font-size: var(--t-18); }
  :is(.pagina-fiche, .hero-data-maxh) .hero-evento__media--sicura {
    width: 100%;
    max-height: max(96px, calc(100vh - 552px));
    max-height: max(96px, calc(100svh - 552px));
  }
}

  @media (max-width: 359px) and (max-height: 647px) and (orientation: portrait) {
  :is(.pagina-fiche, .hero-data-maxh) .hero-evento__categoria { display: none; }
  :is(.pagina-fiche, .hero-data-maxh) .hero-evento__media--sicura {
    max-height: max(72px, calc(100vh - 526px));
    max-height: max(72px, calc(100svh - 526px));
  }
}

/* AG-09 ag-acquisto-diretto — acquisto diretto con selettore quantità ≥ 44 px, conferma con « Vai al carrello »,
   rimozione della barra fissa .cta-mobile sulle schede non ancora aperte alla vendita e sfumatura sulle schede tab. */
.hero-evento__acquisto.ag-acquisto-diretto .acquisto-diretto__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.hero-evento__acquisto.ag-acquisto-diretto .acquisto-diretto__riga .qta {
  flex: 0 0 auto;
  padding: 2px;
  border: 1px solid var(--grigio-200);
  border-radius: var(--raggio);
  background: var(--grigio-50);
}

.hero-evento__acquisto.ag-acquisto-diretto .acquisto-diretto__riga .btn--acquista {
  flex: 1 1 180px;
  min-width: 0;
}

.fiche .evento__esito:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid #cdebd4;
  border-radius: var(--raggio);
  background: #e9f8ec;
  color: #1b6b32;
  font-size: var(--t-14);
  font-weight: 600;
}

.fiche .evento__esito-azioni {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fiche .evento__carrello-link {
  min-height: var(--tocco);
  padding: 0 14px;
  background: var(--bianco);
  font-size: var(--t-14);
}

@media (max-width: 767px) {
  body.pagina-fiche--senza-barra {
    padding-bottom: 0;
  }

  body.pagina-fiche--senza-barra .widget-access {
    bottom: 16px;
  }
}

@media (max-width: 719px) {
  :is(.pagina-fiche, .ag-acquisto-diretto) .schede__lista--scroll {
    animation: stati-fondu linear both;
    animation-timeline: scroll(self inline);
  }
}