/*
  =====================================================================================
  site.css - Stili principali di La Maison des Artistes (v60)
  Usato dalla Home e, come base grafica, dalle pagine di prenotazione e amministrazione.

  v60:
  - riformattato a 2 spazi e commentato; regole e ordine invariati (aspetto identico);
  - rimosso "@import" dei Google Fonts: ora le pagine li collegano nel <head>
    (l'@import bloccava la visualizzazione finché non terminava una seconda richiesta);
  - aggiunti in fondo gli stili delle anteprime leggere dei video YouTube.
  Quando si modifica questo file aumentare il numero ?v= nei collegamenti delle pagine.
  =====================================================================================
*/

/* ===================================================================================
   VARIABILI DEI COLORI
   =================================================================================== */
:root {
  --bg: #0c0b0b;        /* sfondo pagina */
  --card: #171414;      /* sfondo schede */
  --cream: #f5ead7;     /* titoli chiari */
  --text: #d8d0c5;      /* testo normale */
  --muted: #9d958a;     /* testo secondario */
  --gold: #c8a45b;      /* oro (accenti) */
  --curtain: #291011;   /* rosso sipario */
  --border: #312b27;    /* bordi */
}

/* ===================================================================================
   BASE
   =================================================================================== */

/* Larghezze calcolate includendo bordo e padding. */
* {
  box-sizing: border-box;
}

/* Scorrimento morbido verso le ancore del menu (#spettacoli, #contatti...). */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Montserrat, Arial, sans-serif;
}

/* I link ereditano il colore del testo, senza sottolineatura. */
a {
  color: inherit;
  text-decoration: none;
}

/* ===================================================================================
   BARRA SUPERIORE FISSA
   =================================================================================== */
.topbar {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  height: 78px;
  padding: 0 max(24px, 5vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(12, 11, 11, .88);
  backdrop-filter: blur(12px);   /* effetto vetro smerigliato sul contenuto sottostante */
  border-bottom: 1px solid rgba(200, 164, 91, .12);
}

/* Logo + nome della compagnia. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--cream);
}

.brand img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.brand em {
  color: var(--gold);
}

/* Menu di navigazione (desktop). */
nav {
  display: flex;
  gap: 30px;
}

nav a {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .18em;
  color: #d4cec4;
  transition: .25s;
}

nav a:hover {
  color: var(--gold);
}

/* Pulsante ☰ del menu: visibile solo su schermi piccoli (vedi media query). */
.menu-button {
  display: none;
  background: none;
  border: 0;
  color: var(--gold);
  font-size: 28px;
}

/* ===================================================================================
   COPERTINA (HERO)
   =================================================================================== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Foto del teatro sullo sfondo, attenuata. Precaricata nel <head> della Home. */
.hero-bg {
  position: absolute;
  inset: 0;
  background: url('../media/sito/hero-theater-LtOHiECG_20260919a.jpg') center/cover no-repeat;
  transform: scale(1.02);
  opacity: .30;
}

/* Sfumatura verso il colore di sfondo nella parte bassa. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg) 0%, rgba(12, 11, 11, .3) 48%, rgba(12, 11, 11, .3) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 110px 20px 70px;
}

/* Sopratitoli dorati in maiuscolo spaziato. */
.eyebrow,
.section-title > p {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .45em;
  font-size: 12px;
}

/* Titoli con il carattere elegante. */
.hero h1,
.section-title h2,
.card h3,
.person h3,
.contact-box h3 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--cream);
}

.hero h1 {
  font-size: clamp(58px, 8vw, 112px);   /* dimensione fluida tra 58 e 112 px */
  line-height: .82;
  margin: 20px 0;
}

.hero h1 em {
  color: var(--gold);
}

/* Linea dorata decorativa sotto i titoli. */
.gold-line {
  width: 100px;
  height: 1px;
  margin: 28px auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.5vw, 32px);
}

.place {
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 42px;
}

/* Pulsante dorato principale. */
.gold-button {
  display: inline-block;
  background: linear-gradient(135deg, #d3b267, #a77c35);
  color: #17110a;
  padding: 16px 28px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 600;
  font-size: 12px;
}

/* Freccia animata "scorri in basso". */
.scroll-down {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  font-size: 36px;
  color: var(--gold);
  animation: bounce 2s infinite;
}

/* ===================================================================================
   SEZIONI E GRIGLIE
   =================================================================================== */
.section {
  padding: 105px 6vw;
}

/* Sezione con sfondo rosso sipario leggero. */
.section.alt {
  background: rgba(41, 16, 17, .26);
}

.section-title {
  text-align: center;
  margin-bottom: 55px;
}

.section-title h2 {
  font-size: clamp(42px, 5vw, 64px);
  margin: 12px 0;
}

/* Griglia centrata con larghezza massima. */
.grid {
  display: grid;
  max-width: 1180px;
  margin: auto;
}

/* ===================================================================================
   CARD DEGLI SPETTACOLI
   =================================================================================== */
.shows {
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 165px 1fr;   /* locandina a sinistra, testo a destra */
  min-height: 240px;
  transition: .35s;
}

/* Effetto sollevamento al passaggio del mouse. */
.card:hover {
  border-color: rgba(200, 164, 91, .55);
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card > div {
  padding: 26px;
}

/* Genere dello spettacolo. */
.card span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gold);
}

.card h3 {
  font-size: 28px;
  margin: 12px 0 4px;
}

.card p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  color: var(--muted);
  margin: 5px 0 24px;
}

.card small {
  color: var(--muted);
}

/* ===================================================================================
   COMPAGNIA
   =================================================================================== */
.people {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.person {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  transition: .3s;
}

.person:hover {
  border-color: rgba(200, 164, 91, .5);
  transform: translateY(-3px);
}

/* Foto rotonda. */
.person img {
  width: 82px;
  height: 82px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(200, 164, 91, .25);
}

.person h3 {
  font-size: 24px;
  margin: 14px 0 5px;
}

.person p {
  color: var(--gold);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* ===================================================================================
   VIDEO
   =================================================================================== */
.videos {
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Lettore YouTube (creato al clic sull'anteprima, vedi in fondo). */
.video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.video p {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  color: var(--cream);
}

/* ===================================================================================
   GALLERIA
   =================================================================================== */
.gallery {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.gallery a {
  overflow: hidden;
  border-radius: 7px;
  aspect-ratio: 4 / 3;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}

/* Leggero zoom al passaggio del mouse. */
.gallery a:hover img {
  transform: scale(1.06);
}

/* ===================================================================================
   CONTATTI E PIÈ DI PAGINA
   =================================================================================== */
.contacts {
  text-align: center;
}

.contact-box {
  max-width: 650px;
  margin: auto;
  padding: 45px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 8px;
}

.contact-box h3 {
  font-size: 34px;
  margin: 0 0 15px;
}

footer {
  text-align: center;
  padding: 50px 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}

footer img {
  width: 70px;
}

/* ===================================================================================
   COMPARSA ANIMATA (gestita da site.js)
   =================================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ===================================================================================
   LIGHTBOX DELLA GALLERIA
   =================================================================================== */
.lightbox {
  position: fixed;
  z-index: 200;
  inset: 0;
  background: rgba(0, 0, 0, .92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
}

.lightbox-close {
  position: absolute;
  right: 25px;
  top: 18px;
  background: none;
  border: 0;
  color: white;
  font-size: 40px;
}

/* Animazione della freccia "scorri in basso". */
@keyframes bounce {
  50% {
    transform: translateY(10px);
  }
}

/* ===================================================================================
   RESPONSIVE: TABLET (fino a 850px)
   =================================================================================== */
@media (max-width: 850px) {
  .menu-button {
    display: block;
  }

  /* Il menu diventa una tendina sotto la barra, aperta dal pulsante ☰. */
  nav {
    display: none;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: #100e0e;
    padding: 25px;
    flex-direction: column;
    gap: 18px;
  }

  nav.open {
    display: flex;
  }

  .shows {
    grid-template-columns: 1fr;
  }

  .people {
    grid-template-columns: repeat(2, 1fr);
  }

  .videos {
    grid-template-columns: 1fr 1fr;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===================================================================================
   RESPONSIVE: SMARTPHONE (fino a 560px)
   =================================================================================== */
@media (max-width: 560px) {
  /* Solo il logo nella barra, senza il nome. */
  .brand span {
    display: none;
  }

  .section {
    padding: 80px 18px;
  }

  /* v40 - su smartphone la locandina resta intera sopra alle informazioni */
  .card {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .card img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    background: #0d0b0b;
  }

  .card > div {
    padding: 18px;
  }

  .card h3 {
    font-size: 23px;
  }

  .people,
  .videos {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 60px;
  }

  .eyebrow {
    letter-spacing: .3em;
  }
}

/* ===================================================================================
   v2 - SCHEDE DETTAGLI, CONTATTI E NAVIGAZIONE GALLERIA
   =================================================================================== */

/* Elementi che aprono una scheda al clic. */
.clickable {
  cursor: pointer;
}

/* Riassunto nella card: massimo 3 righe con puntini di sospensione. */
.card-summary {
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--text) !important;
  margin: 12px 0 18px !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Presentazione breve dei componenti: massimo 3 righe. */
.person-summary {
  font-family: 'Cormorant Garamond', serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
  font-size: 16px !important;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 10px 0 0 !important;
}

.person-role {
  margin-bottom: 8px !important;
}

/* Modelli nascosti delle schede (copiati nella finestra modale da site.js). */
.modal-template,
.modal-templates {
  display: none;
}

/* Finestra modale a tutto schermo con sfondo sfocato. */
.detail-modal {
  position: fixed;
  z-index: 300;
  inset: 0;
  background: rgba(5, 4, 4, .84);
  backdrop-filter: blur(7px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.detail-modal.open {
  display: flex;
}

/* Pannello centrale della scheda. */
.modal-panel {
  position: relative;
  width: min(760px, 94vw);
  max-height: 90vh;
  overflow: auto;
  background: #171717;
  border: 1px solid rgba(200, 164, 91, .32);
  border-radius: 5px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
  padding: 32px;
}

/* Pulsante × di chiusura. */
.modal-close {
  position: absolute;
  z-index: 5;
  right: 16px;
  top: 12px;
  border: 0;
  background: none;
  color: #aaa;
  font-size: 32px;
  cursor: pointer;
}

.modal-close:hover {
  color: var(--gold);
}

.modal-content h2 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--cream);
  font-size: 38px;
  margin: 12px 0 0;
}

.modal-author {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  color: var(--muted);
  margin: 2px 0 24px;
}

.modal-description {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text);
}

/* Etichette arrotondate (genere, specialità). */
.modal-tag,
.specialty {
  display: inline-block;
  color: var(--gold);
  border: 1px solid rgba(200, 164, 91, .35);
  border-radius: 18px;
  padding: 6px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .13em;
}

/* Locandina in testa alla scheda dello spettacolo. */
.show-hero {
  height: 160px;
  margin: -32px -32px 24px;
  background-size: cover;
  background-position: center 30%;
  border-radius: 5px 5px 0 0;
}

/* Durata, luogo, cast, regia. */
.show-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 26px 0;
}

.show-meta > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Voci a tutta larghezza (cast e regia). */
.show-meta .wide {
  grid-column: 1 / -1;
}

.show-meta b,
.modal-content h4 {
  color: var(--gold);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 500;
}

/* Date e orari delle repliche su due colonne. */
.date-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 24px;
}

.date-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  background: rgba(91, 31, 34, .24);
  padding: 11px 14px;
  font-size: 13px;
}

.date-icon,
.time-icon {
  color: var(--gold);
}

/* Prezzo del biglietto. */
.ticket {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--gold);
  font-size: 10px;
}

.ticket strong {
  font-family: 'Cormorant Garamond', serif;
  color: var(--cream);
  font-size: 26px;
  letter-spacing: 0;
  text-transform: none;
}

/* Foto rotonda nella scheda del componente. */
.modal-person-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(200, 164, 91, .28);
  margin-bottom: 8px;
}

.modal-role {
  color: var(--gold);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin: 2px 0 26px;
}

.specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

/* Contatti su tre colonne. */
.contacts-grid {
  max-width: 1050px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 55px;
  text-align: left;
  padding: 12px 0 5px;
}

.contacts-grid h3,
.contacts-grid h4 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--cream);
  margin-top: 0;
}

.contacts-grid h3 {
  font-size: 30px;
  color: var(--gold);
  margin-bottom: 5px;
}

.contacts-grid h4 {
  font-size: 22px;
  margin-bottom: 20px;
}

.contacts-grid p {
  line-height: 1.75;
  color: var(--muted);
}

.contact-kicker {
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 10px;
  color: var(--muted);
}

.gold-note,
.developer {
  color: var(--gold) !important;
}

/* Frecce precedente/successiva della lightbox. */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(0, 0, 0, .28);
  color: white;
  font-size: 48px;
  line-height: 1;
  padding: 15px 18px;
  cursor: pointer;
  border-radius: 5px;
  z-index: 3;
}

.lightbox-prev {
  left: 25px;
}

.lightbox-next {
  right: 25px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  color: var(--gold);
  background: rgba(0, 0, 0, .5);
}

/* Con una finestra aperta la pagina sottostante non scorre. */
body.modal-open {
  overflow: hidden;
}

/* v2 - adattamenti tablet. */
@media (max-width: 850px) {
  .contacts-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .date-grid {
    grid-template-columns: 1fr;
  }

  .modal-panel {
    padding: 24px;
  }

  .show-hero {
    margin: -24px -24px 20px;
  }

  .lightbox-prev {
    left: 8px;
  }

  .lightbox-next {
    right: 8px;
  }
}

/* v2 - adattamenti smartphone. */
@media (max-width: 560px) {
  .modal-content h2 {
    font-size: 31px;
  }

  .show-meta {
    grid-template-columns: 1fr;
  }

  .show-meta .wide {
    grid-column: auto;
  }

  .detail-modal {
    padding: 12px;
  }

  .lightbox-prev,
  .lightbox-next {
    font-size: 34px;
    padding: 12px;
  }

  .card-summary {
    -webkit-line-clamp: 2;
  }

  .person-summary {
    -webkit-line-clamp: 2;
  }
}

/* Nasconde temporaneamente il blocco testuale della Home.
   Per ripristinarlo, eliminare o commentare questa regola. */
.hero-text-temporarily-hidden {
  display: none !important;
}

/* ===================================================================================
   HOME 2026-09-20: LOCANDINE CENTRALI TEMPORANEE
   =================================================================================== */
.hero-posters {
  position: absolute;
  z-index: 1;
  inset: 78px 0 0;   /* sotto la barra superiore */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 38px 20px 48px;
  pointer-events: none;
}

.hero-posters img {
  display: block;
  max-height: calc(100vh - 145px);
  max-width: min(31vw, 520px);
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .95;
}

@media (max-width: 800px) {
  .hero-posters {
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .hero-posters img {
    max-width: 46vw;
    max-height: calc(100vh - 150px);
  }
}

/* ===================================================================================
   SCHEDA SPETTACOLO: LOCANDINA FISSA + DETTAGLI SCORREVOLI
   =================================================================================== */
.detail-modal.show-detail .modal-panel {
  width: min(1240px, 94vw);
  height: min(820px, 88vh);
  max-height: 88vh;
  padding: 34px;
  overflow: hidden;
}

/* Due colonne: locandina a sinistra, testo a destra. */
.detail-modal.show-detail .modal-content {
  display: grid;
  grid-template-columns: minmax(420px, 520px) minmax(0, 1fr);
  column-gap: 38px;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

.detail-modal.show-detail .modal-content > .show-hero {
  grid-column: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border-radius: 4px;
  background-size: contain;
  background-repeat: no-repeat;
  /* La locandina parte sempre dall'alto e non scorre con il testo. */
  background-position: top center;
  background-color: #101010;
}

/* Colonna del testo con scorrimento indipendente (creata da site.js). */
.detail-modal.show-detail .show-details-scroll {
  grid-column: 2;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px;
  scrollbar-gutter: stable;
}

.detail-modal.show-detail .show-details-scroll h2 {
  margin-top: 10px;
}

/* Su schermi stretti la scheda torna a una sola colonna. */
@media (max-width: 800px) {
  .detail-modal.show-detail .modal-panel {
    width: min(94vw, 680px);
    height: auto;
    max-height: 90vh;
    padding: 24px;
    overflow-y: auto;
  }

  .detail-modal.show-detail .modal-content {
    display: block;
    height: auto;
  }

  .detail-modal.show-detail .modal-content > .show-hero {
    width: min(330px, 82vw);
    height: auto;
    min-height: 0;
    margin: 0 auto 26px;
    aspect-ratio: 2 / 3;
    background-size: contain;
    background-position: top center;
  }

  .detail-modal.show-detail .show-details-scroll {
    height: auto;
    overflow: visible;
    padding-right: 0;
  }
}

/* ===================================================================================
   DATE NELLE SCHEDE SPETTACOLI
   =================================================================================== */
.show-dates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 14px;
  margin-top: 10px;
}

.show-dates small {
  display: block;
}

@media (max-width: 560px) {
  .show-dates {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================================
   v31 HOME: TRE IMMAGINI STATICHE, UNIFORMI E HOVER SOLLEVATO
   =================================================================================== */
.hero-posters {
  pointer-events: auto;
}

.hero-posters .home-poster {
  cursor: default;
  position: relative;
  z-index: 1;
  width: min(29vw, 500px);
  height: min(calc(100vh - 170px), 750px);
  object-fit: cover;
  transform: translateY(0) scale(1);
  transform-origin: center center;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  will-change: transform;
}

/* Effetto hover solo con il mouse (non sui touch screen). */
@media (hover: hover) and (pointer: fine) {
  .hero-posters .home-poster:hover {
    z-index: 10;
    transform: translateY(-5px) scale(1.06);
    box-shadow: 0 0 22px rgba(211, 171, 83, .38), 0 20px 44px rgba(0, 0, 0, .72);
    filter: brightness(1.035);
  }
}

@media (max-width: 800px) {
  .hero-posters {
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
    flex-wrap: nowrap;
  }

  .hero-posters .home-poster {
    width: 30vw;
    height: 45vw;
    max-width: 30vw;
    max-height: calc(100vh - 170px);
  }
}

/* ===================================================================================
   v35 - REPLICHE: DUE COLONNE GOVERNATE DA ORDINAMENTO, CON BUCHI INTENZIONALI
   =================================================================================== */
.replica-slots .date-row {
  grid-template-columns: auto max-content auto max-content;
  justify-content: start;
  column-gap: 7px;
  min-height: 42px;
}

/* Le posizioni vuote occupano spazio ma non si vedono. */
.replica-slots .date-row-empty {
  visibility: hidden;
}

/* Gli a capo inseriti nel testo vengono mantenuti. */
.show-meta .wide span,
.modal-description {
  white-space: pre-line;
}

@media (max-width: 850px) {
  .replica-slots .date-row-empty {
    display: none;
  }
}

/* v36 - anche le date nelle card rispettano i buchi di Ordinamento su desktop */
.show-dates .show-date-empty {
  visibility: hidden;
}

@media (max-width: 560px) {
  .show-dates .show-date-empty {
    display: none;
  }
}

/* ===================================================================================
   v37 - LINK "RECUPERA PRENOTAZIONE" SEPARATO DALLA NAVIGAZIONE PRINCIPALE
   =================================================================================== */
.booking-service-link {
  position: absolute;
  right: max(24px, 5vw);
  bottom: 5px;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: none;
  opacity: .92;
}

.booking-service-link:hover {
  color: var(--cream);
}

@media (max-width: 800px) {
  .booking-service-link {
    position: static;
    margin-left: auto;
    font-size: 10px;
  }
}

/* ===================================================================================
   v50 - PRESENTAZIONE METAXÙ: VIDEO VERTICALE, CORNICE TEATRALE E ZOOM
   =================================================================================== */

/* Pulsante fisso "Guarda il video di presentazione" (in basso a destra). */
.metaxu-reopen {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 120;
  padding: 13px 19px;
  border: 1px solid #f4d58c;
  border-radius: 24px;
  color: #17100b;
  background: linear-gradient(135deg, #f4d58c, #b9893a);
  font: 600 13px/1.3 Arial, sans-serif;
  letter-spacing: .045em;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
  cursor: pointer;
}

.metaxu-reopen[hidden] {
  display: none !important;
}

.metaxu-reopen:hover {
  filter: brightness(1.1);
}

.metaxu-reopen span {
  margin-right: 7px;
}

/* Sfondo scuro della finestra video (nascosto finché non ha la classe .open). */
.metaxu-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(4, 2, 3, .86);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .38s ease, visibility .38s;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.metaxu-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Cornice dorata in formato 9:16, adattata all'altezza e alla larghezza dello schermo. */
.metaxu-frame {
  position: relative;
  box-sizing: border-box;
  width: min(460px, calc((100dvh - 65px) * .5625), calc(100vw - 36px));
  max-height: calc(100dvh - 42px);
  aspect-ratio: 9 / 16;
  padding: 11px;
  border: 2px solid #e4b65b;
  border-radius: 17px;
  background: linear-gradient(140deg, #090605, #35170f 45%, #070505 65%, #3a1a0e);
  box-shadow: 0 0 0 5px rgba(180, 117, 39, .22), 0 0 45px rgba(226, 151, 59, .35), 0 24px 80px #000;
  transform: scale(.18);   /* parte piccola: effetto zoom all'apertura */
  opacity: 0;
  transition: transform .8s cubic-bezier(.18, .85, .22, 1.06), opacity .45s ease;
}

.metaxu-overlay.open .metaxu-frame {
  transform: scale(1);
  opacity: 1;
}

.metaxu-inner-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 2px solid #c89642;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255, 228, 156, .28);
}

.metaxu-inner-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #080606;
}

/* Pulsante × rotondo sull'angolo della cornice. */
.metaxu-close {
  position: absolute;
  z-index: 2;
  top: -19px;
  right: -19px;
  width: 43px;
  height: 43px;
  border: 2px solid #e5b85e;
  border-radius: 50%;
  background: #130e0c;
  color: white;
  font: 32px/1 Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 3px 12px #000;
}

.metaxu-close:hover {
  background: #603020;
}

body.metaxu-modal-open {
  overflow: hidden;
}

/* Video verticale fisso nella sezione Video. */
.metaxu-feature-video {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  max-width: 780px;
  margin: 0 auto 35px;
  padding: 20px;
  border: 1px solid rgba(217, 174, 92, .5);
  border-radius: 15px;
  background: linear-gradient(125deg, rgba(72, 33, 26, .5), rgba(5, 4, 4, .85));
}

.metaxu-feature-video video {
  display: block;
  width: min(230px, 44%);
  aspect-ratio: 9 / 16;
  object-fit: contain;
  border: 2px solid #d3a351;
  border-radius: 9px;
  background: #000;
}

.metaxu-feature-caption {
  flex: 1;
  color: #f5e5c9;
}

.metaxu-feature-caption h3 {
  font: 500 28px/1.2 Georgia, serif;
  color: #e6c178;
}

.metaxu-feature-caption p {
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 580px) {
  .metaxu-reopen {
    right: 10px;
    bottom: 10px;
    font-size: 11px;
    padding: 11px 13px;
  }

  .metaxu-feature-video {
    flex-direction: column;
    gap: 14px;
    padding: 14px;
  }

  .metaxu-feature-video video {
    width: min(100%, 260px);
  }

  .metaxu-feature-caption {
    text-align: center;
  }

  .metaxu-feature-caption h3 {
    font-size: 22px;
  }
}

/* Chi ha chiesto al sistema meno animazioni non vede lo zoom. */
@media (prefers-reduced-motion: reduce) {
  .metaxu-overlay,
  .metaxu-frame {
    transition: none !important;
  }
}

/* Pulsante audio sempre visibile nella finestra video METAXÙ. */
.metaxu-audio {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  padding: 11px 18px;
  border: 2px solid #f3d48b;
  border-radius: 24px;
  background: rgba(12, 8, 8, .94);
  color: #ffe3a2;
  font: 700 15px Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 3px 15px rgba(0, 0, 0, .8);
}

.metaxu-audio:hover,
.metaxu-audio:focus-visible {
  background: #60401d;
  color: white;
}

/* ===================================================================================
   v60 - ANTEPRIME LEGGERE DEI VIDEO YOUTUBE
   Stesse dimensioni e bordo del lettore: al clic l'anteprima viene sostituita
   dall'iframe senza spostamenti della pagina.
   =================================================================================== */
.yt-lite {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #000;
  cursor: pointer;
}

/* Immagine di anteprima ritagliata al formato 16:9. */
.yt-lite img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
  transition: opacity .25s ease;
}

/* Pulsante "play" disegnato con il CSS (nessuna immagine da scaricare). */
.yt-lite-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background: rgba(23, 17, 10, .82);
  border: 1px solid rgba(200, 164, 91, .7);
  transition: background .25s ease;
}

/* Triangolo del "play". */
.yt-lite-play::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent var(--gold);
}

.yt-lite:hover img,
.yt-lite:focus-visible img {
  opacity: 1;
}

.yt-lite:hover .yt-lite-play,
.yt-lite:focus-visible .yt-lite-play {
  background: rgba(150, 30, 25, .92);
}