/* === COMPONENT — HERO (inset, overlay, countdown) — auto-partition draft === */

/* ==================================================
   INSET — SOLO VIDEO (nessun fallback img)
   - Desktop 16:9 / Mobile 9:16
   - Regole finali in coda per vincere su duplicati
   ================================================== */
.inset-hero{
  position: relative;
  --inset-w-d: clamp(720px, 56vw, 1100px);
  width: var(--inset-w-d);
  aspect-ratio: 16 / 9; /* desktop */
  margin-bottom: 0; /* vicino a Next */
  margin-inline: auto;
  border-radius: 18px;
  overflow: hidden;
  z-index: 1;
  box-shadow:
    0 16px 40px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

@media (max-width: 767.98px){
  .inset-hero{
    /* meno largo -> meno alto (manteniamo 9/16) */
    --inset-w-m: min(84vw, 480px);
    width: var(--inset-w-m);
    aspect-ratio: 9 / 15; /* puoi provare anche 9/15 se vuoi ancora meno alto */
  }
}

.inset-hero::after{
  background: none !important;
}

.inset-hero__media{ position:absolute; inset:0; }

/* Evita che qualcosa intercetti i click sopra il menu */
.inset-hero { z-index: 1; }

.inset-hero { z-index: 1; }

/* 4) Overlay del video hero un filo più chiaro (se lo vuoi più brillante) */
.inset-hero::after{
  background: none !important;
}

/* sopra alla topbar */

/* ===== Mobile overrides (≤ 979px) ===== */
@media (max-width: 979px){
  /* Logo resta centrato; hamburger ancorato a sinistra */
  .euto-topbar__row{
    justify-content: center;
    padding-inline: 12px;
    min-height: 58px;
  }
  .euto-hgroup{
    position: absolute;
    left: 8px;                      /* metti 0 se lo vuoi attaccato */
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    gap: 10px;
  }

  /* Dropdown mobile: allineato al bottone e VISIBILE quando non [hidden] */
  .euto-menu{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    margin-left: 0;
    display: grid;                  /* stato base (sovrascritto da [hidden]) */
    background: rgba(0,0,0,.96);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  .euto-menu[hidden]{ display: none !important; }
  .euto-menu a{ padding: 12px 14px; }

  /* Inset hero/video: avvicina alla topbar e usa larghezza schermo */
  .intro-hero{ padding: 8px 0 12px; } /* prima era molto più ampia */
  .inset-hero{
     border: none;
  box-shadow: none;
  border-radius: 0;         /* se vuoi zero angoli */
  background: transparent;  /* niente colore di fondo che fa “cornice” */
  overflow: hidden;         /* evita sbordi del media */
  }
  .inset-hero__cta{ bottom: 8px; }  /* CTA un filo più su su schermi piccoli */
}

.hero-countdown span{
  display:inline-flex; gap:4px; align-items:baseline;
  padding:6px 8px; border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-size:13px;
}

/* ======== ZERO-GAP PACK (mobile) ======== */
@media (max-width: 820px){
  /* 0) Header senza spessore extra */
  .euto-topbar__row{
    margin-top: 0 !important;        /* era 10px */
    min-height: 58px !important;
  }

  /* 1) Countdown separato ma minimo, foto e ticket attaccati */
  :root{
    --topbar-h: 58px;  /* altezze reali più strette */
    --count-h: 34px;
    --gap-t:    10px;  /* toolbar → countdown (un filo di respiro) */
    --gap-cf:    2px;  /* countdown → foto */
    --gap-ft:    2px;  /* foto → ticket */
  }

  .hero-countdown{
    width: min(1100px, 92vw);
    height: var(--count-h);
    margin: var(--gap-t) auto var(--gap-cf) !important;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .hero-countdown span{ padding: 4px 6px; border-radius: 8px; font-size: 12px; }
  .hero-countdown b{ font-size: 14px; }

  /* 2) L’hero riempie tutto lo spazio tra countdown e ticket (niente “- 40px”) */
  .inset-hero{
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto var(--gap-ft) !important;
    height: calc(100svh - var(--topbar-h) - var(--count-h)
                 - (var(--gap-t) + var(--gap-cf) + var(--gap-ft))) !important;
    aspect-ratio: auto !important;
    border-radius: 12px;
    position: relative; overflow: hidden;
  }
  .inset-hero__media{ display: block;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;   /* si vede TUTTA la foto */
background: transparent;          /* niente rettangolo sotto */ }
  .inset-hero__media > img,
  .inset-hero__media > video,
  .inset-video{ display: block;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;   /* si vede TUTTA la foto */
background: transparent;          /* niente rettangolo sotto */ }
}

/* === HERO CLEANUP: niente bordi, ombre, margini extra === */
.inset-hero {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  margin: 0 auto 4px !important;   /* 0 sopra, 4px sotto per ticket */
}

.inset-hero__media,
.intro-hero,
.fold,
.ticket-strap {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* media (immagine o video) sempre pieni e centrati */
.inset-hero__media > img,
.inset-hero__media > video,
.inset-video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* foto/video sempre interi */
  background: transparent !important;
}

/* === ELEGANT STACK (mobile) — countdown → foto (inset) → tickets, tutto centrato === */
@media (max-width: 820px){

  /* contenitore centrale “invisibile” per allineare */
  main{ width:min(1100px, 94vw); margin-inline:auto; }

  /* Countdown: ben staccato dalla toolbar, vicino alla foto */
  .hero-countdown{
    margin: 14px auto 6px !important;
    display:flex; justify-content:center; gap:8px;
  }
  .hero-countdown span{ padding:6px 8px; border-radius:10px; font-size:12px; }
  .hero-countdown b{ font-size:15px; }

  /* Fold: nessun padding/margine nascosto */
  .fold{ padding:0 !important; margin:0 !important; }

  /* INSET pulito:
     - niente height calcolata
     - dimensionato da aspect-ratio 16:9
     - centrato e con bordi morbidi (puoi mettere 0 per full-bleed)  */
  .inset-hero{
    width: min(98vw, 760px) !important;
    height: auto !important;              /* <-- disattiva TUTTI i calc(...) precedenti */
    aspect-ratio: 9 / 16 !important;      /* poster orizzontale */
    margin: 6px auto 6px !important;      /* poco sopra e poco sotto */
    border-radius: 12px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #000 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* wrapper media: nessun posizionamento assoluto, riempie la gabbia */
  .inset-hero__media{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* immagine/video: TUTTO visibile, niente cornici */
  .inset-hero__media > img,
  .inset-hero__media > video,
  .inset-video{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit: contain !important;   /* vedi tutto il poster */
    background: transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /* Tickets: centrati e vicini alla foto */
  .ticket-strap{
    margin: 6px auto 10px !important;
    padding: 0 !important;
    display:flex; justify-content:center; align-items:center;
    width:100%;
  }
  .ticket-strap .btn-ticket{
    padding: 12px 26px; font-weight:800; letter-spacing:.06em;
  }
}

/* Desktop: 16:9, max 1200px di larghezza */
@media (min-width: 821px){
  .inset-hero{
    aspect-ratio: 16 / 9;
    width: min(90vw, 1200px);   /* mai oltre 1200px */
    margin: 0 auto 20px;
  }
  .inset-hero img{ width:100%; height:100%; object-fit:contain; }
}

/* Mobile: 9:16, max 500px di larghezza */
@media (max-width: 820px){
  .inset-hero{
    aspect-ratio: 9 / 16;
    width: min(90vw, 500px);   /* mai oltre 500px */
    margin: 0 auto 12px;
  }
  .inset-hero img{ width:100%; height:100%; object-fit:contain; }
}

/* ===== COUNTDOWN BASE (semplice, centrato) ===== */
.hero-countdown{
  width: min(1100px, 92vw);
  margin: 16px auto 10px;           /* spazio sopra e sotto */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;                         /* spazio tra le pillole */
}

/* ogni blocco: numero + lettera (d/h/m/s) sulla stessa riga */
.hero-countdown span{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;                          /* spazio tra numero e lettera */
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);      /* rende visibile la lettera d/h/m/s */
}

/* numero grande, tabellare (niente saltellii) */
.hero-countdown span b{
  color: #fff;
  font-weight: 800;
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
  font-size: clamp(18px, 5vw, 28px);
  line-height: 1;
}

/* mobile: un filo più compatto */
@media (max-width: 820px){
  .hero-countdown{ margin: 20px auto 14px; gap: 10px; }
  .hero-countdown span{ padding: 7px 20px; gap: 5px; }
  .hero-countdown span b{ font-size: clamp(18px, 5vw, 24px); }
}

/* assicura che l'hero parta subito sotto il countdown (niente sovrapposizioni) */
.inset-hero{ margin-top: 20px !important;}

.inset-hero{ position:relative; }

.inset-hero__media{ position:relative; min-height:40vh; }

.inset-hero__media .hero-promo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;
}

/* === HERO: pannello con cornice sfumata (glass) === */
.inset-hero{ position: relative; }

.hero-meta{
  position: absolute;
  left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 5;

  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 14px;
  max-width: min(92%, 900px);
  text-align: center;

  background: rgba(0,0,0,.52);                    /* vetro scuro */
  border: 1px solid rgba(255,255,255,.16);        /* cornice */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);             /* Safari */
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* testi dentro il pannello */
.hero-meta__date{ display:flex; gap:8px; align-items:center; justify-content:center;
  font-family: var(--font-display, Bebas Neue, system-ui, sans-serif);
  letter-spacing:.06em; font-size: clamp(16px,5vw,28px);
}

.hero-meta__title{ margin:0; font-family: var(--font-display, Bebas Neue, sans-serif);
  letter-spacing:.06em; font-size: clamp(18px,3.6vw,28px);
}

.hero-meta__place{ margin:0; color:#bdbdbd; font-size: clamp(12px,2.6vw,14px); }

/* === HERO: bottoni-icona con cornice sfumata (come hamburger) === */
.hero-meta__cta{
  display:flex; gap:10px; justify-content:center; align-items:center;
}

.hero-meta__cta a{
  width: 44px; height: 44px;
  display:inline-flex; justify-content:center; align-items:center;

  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);        /* stesso bordo hamburger */
  background: rgba(0,0,0,.72);                    /* vetro scuro */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);

  padding:0; min-width:0; text-decoration:none;
  transition: transform .18s, background .18s, box-shadow .18s;
}

.hero-meta__cta a:hover{
  transform: translateY(-1px) scale(1.03);
  background: rgba(0,0,0,.82);
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}

/* neutralizza la “pillola” bianca della .btn-ticket globale dentro l’hero */
.hero-meta__cta a.btn-ticket{ color:#fff !important; font-size:0 !important; line-height:0 !important; }

/* icone interne ridimensionate e rese bianche */
.hero-meta__cta a img{
  width: 20px; height: 20px; display:block; object-fit:contain;
  filter: invert(1) brightness(1.2);
}

/* pannello hero più largo */
.hero-meta{
  /* prima avevamo max-width/min(...); ora lo allarghiamo e lasciamo 32px per lato */
  width: min(1000px, calc(100% - 64px));
  padding-inline: 20px;
}

/* contenitore CTA nell'hero: una sola icona, centrata */
.hero-meta__cta{
  display: flex;
  justify-content: center;   /* <-- centrata */
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

/* sicurezza: se per caso venisse clonato il bottone ticket, nascondilo nell'hero */
.hero-meta__cta .btn-ticket{ display: none !important; }

@media (max-width: 820px){
 .fold {
  min-height: auto; /* lascia crescere in base ai contenuti */
  height: auto;
  justify-content: flex-start; /* contenuti uno sotto l’altro */
}

  .inset-hero__media{
    position: absolute;  /* se non lo è già */
inset: 0;
width: 100%;
height: 100% !important;   /* non usare calc(100vh - …) */
padding: 0;
border: none;
background: transparent;
  }
}

/* === HERO WRAPPER: tutta area, nessun calcolo vh === */
.inset-hero__media {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* === HERO WRAPPER: nessun calc(vh), segue l'aspect-ratio dato dallo stile === */
@media (max-width: 820px){
  .inset-hero__media{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;   /* NON usare calc(100vh - var(--topbar-h)) qui */
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
}

.inset-hero{ position: relative; }

.inset-hero__media{ position: relative; min-height: 40vh; }

.inset-hero__media .hero-promo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; /* o "cover" se vuoi riempire */
  display:block;
}
/* Inset — pannello info Next Event */
.inset-next-info{
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  bottom: 12px;
  width: calc(100% - 24px);  /* bordi interni da 12px per lato */
  max-width: 420px;          /* limita la larghezza della targhetta */
}

.inset-next-info h3{
  margin:0; font: 700 16px/1.2 system-ui, sans-serif; color:#fff; letter-spacing:.02em;
}
.inset-next-info .sub{
  margin:0; font: 600 13px/1.3 system-ui, sans-serif; color:#ddd;
}
/* Inset: assicura che <picture> riempia e l'img dentro stia in contain */
.inset-hero__media picture,
.inset-hero__media picture > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
/* === Mobile fix (≤820px): card centrata + overlay allineato ai bordi del poster === */
@media (max-width: 820px){
  :root{
    --gutter: 16px;
    --hero-max: 560px;   /* puoi alzare/abbassare: 520–600px */
  }

  /* il blocco hero si centra e non “balla” ai lati */
  .fold{ padding-inline: var(--gutter); }
  .inset-hero{
    max-width: var(--hero-max);
    margin-inline: auto;
  }
  .inset-hero__media{
    border-radius: 16px;
    overflow: hidden;
  }
  .inset-hero__media picture,
  .inset-hero__media picture > img{
    display:block; width:100%; height:100%;
    object-fit: contain;
    object-position: center top;
  }

  /* overlay: niente safe-area né gutter di pagina; allinealo ai bordi del poster */
  .inset-next-info{
    left: 12px;             /* margine interno costante alla card */
    right: 12px;            /* simmetrico: così non risulta “spostato” */
    bottom: 12px;
    transform: none;
  }

  /* countdown e strap sotto allineati alla stessa larghezza della card */
  .hero-countdown,
  .ticket-strap{
    max-width: var(--hero-max);
    margin-inline: auto;
    padding-inline: 0;
  }
}
/* ===== INSET STRAP (sotto al poster) ===== */
.inset-strap{
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.inset-strap__info{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0; margin: 0; list-style: none;
}
.inset-strap__info .chip{
  padding: 6px 10px;
  font: 600 12px/1.2 Inter, system-ui;
  color: #f5f5f5;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  white-space: nowrap;
}

/* CTA TICKETS grande */
.cta-ticket--big{
  --h: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--h);
  padding: 0 16px;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, #1b1b1b, #0f0f0f);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 8px 20px rgba(0,0,0,.45);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cta-ticket--big .cta__icon svg{ width:19px; height:19px; }
.cta-ticket--big .cta__label{
  font: 800 13px/1 Inter, system-ui;
  letter-spacing: .04em;
}

.cta-ticket--big:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #232323, #121212);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.24) inset,
    0 10px 24px rgba(0,0,0,.55);
}
.cta-ticket--big.is-disabled{
  opacity: .45; pointer-events: none;
}

/* Mobile: stack verticale */
@media (max-width: 820px){
  .inset-strap{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .inset-strap__right{ display: flex; justify-content: center; }
  .cta-ticket--big{ --h: 48px; width: min(360px, 90%); justify-content: center; }
}
/* strap centrata sotto all'hero */
.inset-strap.inset-strap--center{
  margin-top: 16px;
}
.inset-strap__center{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.inset-strap__info{
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.inset-strap__info .chip{
  padding: 6px 10px;
  font: 600 12px/1.2 Inter, system-ui;
  color: #f5f5f5;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  white-space: nowrap;
}

/* bottone maps tondo */
.strap-cta--map{
  width: 40px; height: 40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px;
  color:#fff; text-decoration:none;
  background:#0f0f0f;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 2px 10px rgba(0,0,0,.35);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.strap-cta--map:hover{
  transform: translateY(-1px);
  background:#161616;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 6px 16px rgba(0,0,0,.5);
}

/* mobile: metti l'icona su una riga sotto se manca spazio */
@media (max-width: 820px){
  .inset-strap__center{ gap: 10px; }
  .strap-cta--map{ width: 44px; height: 44px; }
}
.inset-strap__center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.inset-strap__row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  width:100%;
}

.inset-strap__row--tickets .cta-ticket--big{
  width: min(320px, 90%);
  justify-content:center;
}

.inset-strap__row--maps .strap-cta--map{
  width: 46px;
  height: 46px;
}
.strap-cta--map {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: #0f0f0f;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset,
              0 2px 10px rgba(0,0,0,.35);
}
.strap-cta--map svg {
  width: 19px; height: 19px;
}
.strap-cta--map {
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:#fff;
  background:#0f0f0f;
}
.strap-cta--map svg { width:19px; height:19px; }
/* ===== INSET STRAP: MAPS BUTTON (bulletproof) ===== */
.inset-strap { position: relative; z-index: 5; } /* sopra eventuali overlay */
.inset-strap__center{
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.inset-strap__row{
  display:flex; justify-content:center; flex-wrap:wrap; gap:12px; width:100%;
}

/* riga MAPS centrata */
.inset-strap .inset-strap__row--maps{ justify-content:center; }

/* bottone tondo */
.inset-strap .strap-cta--map{
  width:44px !important;
  height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background:#0f0f0f !important;
  color:#fff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 2px 10px rgba(0,0,0,.35) !important;
  text-decoration:none !important;
}

/* l'icona dentro */
.inset-strap .strap-cta--map svg{
  width:19px !important;
  height:19px !important;
  display:block !important;
}

/* chip info (se non le avevi già) */
.inset-strap__info{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; margin:0; padding:0;
}
.inset-strap__info .chip{
  padding:6px 10px;
  font:600 12px/1.2 Inter, system-ui;
  color:#f5f5f5;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  white-space:nowrap;
}
.inset-strap__center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
@media (max-width: 820px){
  .inset-strap__row--info,
  .inset-strap__row--info .inset-strap__info {
    justify-content: center;
  }
}
/* Desktop: riempi tutto (cover) */
.inset-hero__media img,
.home-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile: adatta (contain) */
@media (max-width: 820px), (orientation: portrait) {
  .inset-hero__media img,
  .home-poster img {
    object-fit: contain;
    background: #000; /* evita bande bianche */
  }
}
/* === FINAL MOBILE ABOVE-THE-FOLD (countdown + poster + CTA visibili) === */
@media (max-width: 820px){
  /* regola qui l’altezza target del poster (56–62vh funziona bene) */
  :root{
    --front-fold-h: 58vh;
    --fold-gap-below: 8px; /* spazio tra poster e strap bottoni */
  }

  /* countdown compatto */
  .hero-countdown{
    margin: 10px auto 6px !important;
  }

  /* poster più basso: niente aspect-ratio fisso */
  .inset-hero{
    height: var(--front-fold-h) !important;
    max-height: var(--front-fold-h) !important;
    aspect-ratio: auto !important;
    width: min(98vw, 760px) !important;
    margin: 6px auto var(--fold-gap-below) !important;
    border-radius: 12px !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  /* media che riempie la gabbia del poster */
  .inset-hero__media{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  .inset-hero__media > img,
  .inset-hero__media > video,
  .inset-video{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;   /* vedi tutto il poster */
    background: #000 !important;
    display: block !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* strap bottoni subito sotto il poster */
  .ticket-strap{
    margin: 6px auto 10px !important;
    padding: 0 !important;
    display:flex; justify-content:center; align-items:center;
    width:100%;
  }
}