/* ==========================================================================
   FightersLife — frontend pubblico
   Impianto scuro ad alto contrasto, rail orizzontali, accento elettrico.
   ========================================================================== */

/* ---------- Token ---------- */
:root {
  --bg:          #0A0A0F;
  --bg-2:        #0E0E15;
  --surface:     #16161F;
  --surface-2:   #1E1E2A;
  --line:        rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);

  --text:        #FFFFFF;
  --text-2:      #C7C7D4;
  --muted:       #8E8EA0;

  --accent:      #E8FF3D;
  --accent-ink:  #0A0A0F;
  --live:        #FF2E4D;

  --radius:      14px;
  --radius-sm:   10px;
  --radius-lg:   22px;

  --gutter:      clamp(16px, 4.2vw, 64px);
  --rail-gap:    clamp(10px, 1.1vw, 18px);
  --card-w:      clamp(208px, 23vw, 316px);

  --shadow:      0 18px 46px rgba(0, 0, 0, 0.62);
  --shadow-soft: 0 8px 26px rgba(0, 0, 0, 0.42);

  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h:    68px;

  --font: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Le regole d'autore vincono sullo stile utente-agente: senza questo, un
   `display` dichiarato in una classe annulla l'attributo hidden. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; }
p          { margin: 0; }
img        { display: block; max-width: 100%; }
button     { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a          { color: inherit; text-decoration: none; }

svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Focus visibile e coerente ovunque */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 18px; border-radius: 0 0 10px 10px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.96), rgba(10, 10, 15, 0.72) 62%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(10, 10, 15, 0.94);
  border-bottom-color: var(--line);
}

.header-inner {
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 44px);
}

.logo { display: flex; align-items: center; gap: 9px; flex: none; }

.logo-img {
  width: auto; height: 46px; flex: none;
  object-fit: contain;
}
@media (max-width: 900px) { .logo-img { height: 38px; } }
.logo-img--piccolo { height: 30px; opacity: 0.85; }

.logo-text {
  font-weight: 900; font-size: 19px; letter-spacing: 0.14em;
  white-space: nowrap;
}
.logo-text em { font-style: normal; color: var(--accent); }
.logo-text.small { font-size: 14px; letter-spacing: 0.16em; }

.nav { display: flex; gap: clamp(14px, 2vw, 30px); margin-right: auto; }

.nav-link {
  position: relative;
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-2);
  padding: 6px 0;
  transition: color 0.2s var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--accent);
  transition: right 0.28s var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-link:hover::after { right: 0; }

.header-actions { display: flex; gap: 8px; flex: none; }

.icon-btn {
  width: 40px; height: 40px; padding: 10px;
  border-radius: 50%;
  color: var(--text-2);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); transform: scale(1.06); }

/* ---------- Ricerca ---------- */
.searchbar {
  padding: 0 var(--gutter) 16px;
  animation: slideDown 0.24s var(--ease);
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.searchbar-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.searchbar-inner:focus-within { border-color: var(--accent); }
.searchbar-icon { width: 20px; height: 20px; flex: none; color: var(--muted); }

#input-ricerca {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--text); font-size: 15px;
}
#input-ricerca::placeholder { color: var(--muted); }
#input-ricerca::-webkit-search-cancel-button { filter: invert(0.7); }

.searchbar-close {
  flex: none; padding: 4px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px;
}
.searchbar-close:hover { color: var(--text); border-color: var(--line-strong); }

.searchbar-count { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  /* Il banner prende tutto lo schermo.
     Non è solo una scelta di scena: a 74vh il riquadro era largo più del
     doppio della sua altezza, mentre le fotografie sono quasi quadrate — un
     terzo dell'immagine veniva buttato via e i volti finivano tagliati. A
     schermo pieno il formato del riquadro si avvicina a quello degli scatti e
     il ritaglio quasi sparisce. */
  width: 100%;
  height: 100vh;
  /* svh esclude le barre del browser sui telefoni, dove 100vh sborda. */
  height: 100svh;
  margin-top: calc(var(--header-h) * -1);
  background: var(--bg-2);
  isolation: isolate;
}

.hero-viewport { position: absolute; inset: 0; overflow: hidden; }

.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.85s var(--ease), visibility 0.85s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

/* Sfondo: immagine reale se esiste, altrimenti la grafica generata sotto. */
.hero-art { position: absolute; inset: 0; }

.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* L'immagine è spostata di 60px verso il basso rispetto al centro: si vede
     cioè 60px in più della parte alta, dove nelle foto di boxe sta il volto.
     Il max() evita che, quando c'è poco da ritagliare, lo spostamento scopra
     una striscia vuota in cima. */
  object-position: center max(0%, calc(50% - 60px));
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.hero-img.is-loaded { opacity: 1; }

/* Ken burns lento, disattivato con prefers-reduced-motion */
.hero-slide.is-active .velo,
.hero-slide.is-active .hero-img { animation: kenburns 18s var(--ease) forwards; }
@keyframes kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.11); }
}

/* Scrim: leggibilità del testo senza spegnere l'immagine */
.hero-scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to top, var(--bg) 1%, rgba(10, 10, 15, 0.92) 18%, rgba(10, 10, 15, 0.28) 54%, rgba(10, 10, 15, 0.52)),
    linear-gradient(to right, rgba(10, 10, 15, 0.9), rgba(10, 10, 15, 0.34) 50%, transparent 76%),
    radial-gradient(120% 90% at 12% 88%, rgba(232, 255, 61, 0.10), transparent 58%);
}

.hero-caption {
  position: absolute; z-index: 3;
  left: var(--gutter); right: var(--gutter);
  bottom: clamp(76px, 12vh, 128px);
  max-width: min(720px, 62vw);
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 5px 12px;
  border-radius: 999px;
  background: rgba(232, 255, 61, 0.14);
  border: 1px solid rgba(232, 255, 61, 0.34);
  color: var(--accent);
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}

.hero-title {
  font-size: clamp(34px, 6.2vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.042em;
  text-wrap: balance;
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.6);
}

/* "scritte sotto": sottotitolo opzionale, compare solo se valorizzato */
.hero-sub {
  margin-top: 16px;
  font-size: clamp(14px, 1.35vw, 19px);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 56ch;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.hero-cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 26px; padding: 13px 26px;
  border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 800; font-size: 15px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hero-cta svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(232, 255, 61, 0.3); }

/* Slide senza testo: si entra comunque con una gerarchia visiva */
.hero-slide[data-vuoto="1"] .hero-caption { max-width: min(560px, 60vw); }

/* Frecce */
.hero-arrow {
  position: absolute; top: 50%; z-index: 4;
  transform: translateY(-50%);
  width: 52px; height: 52px; padding: 14px;
  border-radius: 50%;
  background: rgba(10, 10, 15, 0.5);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.hero:hover .hero-arrow,
.hero:focus-within .hero-arrow { opacity: 1; }
.hero-arrow:hover { background: rgba(232, 255, 61, 0.92); color: var(--accent-ink); border-color: transparent; }
.hero-arrow--prev { left: clamp(10px, 1.6vw, 26px); }
.hero-arrow--next { right: clamp(10px, 1.6vw, 26px); }

/* Dots + pausa */
.hero-bottom {
  position: absolute; z-index: 4;
  left: var(--gutter); right: var(--gutter);
  bottom: clamp(24px, 4vh, 44px);
  display: flex; align-items: center; gap: 18px;
}

.hero-dots { display: flex; gap: 9px; }

.hero-dot {
  width: 30px; height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.25s var(--ease), width 0.35s var(--ease);
  position: relative; overflow: hidden;
}
.hero-dot:hover { background: rgba(255, 255, 255, 0.5); }
.hero-dot.is-active { width: 54px; background: rgba(255, 255, 255, 0.24); }

/* barra di avanzamento dentro il dot attivo */
.hero-dot.is-active::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent);
  transform-origin: left;
  animation: dotFill var(--durata, 6s) linear forwards;
}
@keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero.is-paused .hero-dot.is-active::after { animation-play-state: paused; }

.hero-play {
  width: 30px; height: 30px; padding: 7px;
  border-radius: 50%;
  color: var(--text-2);
  border: 1px solid var(--line);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hero-play:hover { color: var(--text); border-color: var(--line-strong); }
.hero-play .ico-play  { display: none; }
.hero-play[aria-pressed="true"] .ico-pause { display: none; }
.hero-play[aria-pressed="true"] .ico-play  { display: block; }

.hero-skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.5s linear infinite;
}

/* ==========================================================================
   Sezioni
   ========================================================================== */
.section-head {
  display: flex; align-items: baseline; gap: 14px;
  padding: 0 var(--gutter);
  margin-bottom: 16px;
}

.section-title {
  display: flex; align-items: center; gap: 11px;
  font-size: clamp(19px, 1.9vw, 27px);
  letter-spacing: -0.022em;
}
.rail .section-title::before {
  content: ""; width: 4px; height: 1.05em;
  border-radius: 99px;
  background: linear-gradient(var(--accent), rgba(232, 255, 61, 0.25));
}

.section-note { font-size: 13px; color: var(--muted); font-weight: 500; }

/* ---------- Live ---------- */
.live-section {
  position: relative; z-index: 5;
  margin-top: clamp(-70px, -6vh, -40px);
  padding: 30px 0 12px;
}

.live-dot {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(255, 46, 77, 0.65);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 11px rgba(255, 46, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 46, 77, 0); }
}

.live-body { padding: 0 var(--gutter); }

.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.live-card {
  position: relative;
  display: grid; grid-template-columns: 152px 1fr;
  gap: 15px;
  padding: 12px;
  background: linear-gradient(140deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  width: 100%;
  transition: border-color 0.24s var(--ease), transform 0.24s var(--ease), box-shadow 0.24s var(--ease);
}
.live-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--live);
}
.live-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 46, 77, 0.42);
  box-shadow: var(--shadow-soft);
}

.live-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.live-meta { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-width: 0; }

.live-titolo {
  font-size: 15px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.live-sub { font-size: 12.5px; color: var(--muted); }

/* Stato vuoto: informativo, non un buco nella pagina */
.live-empty {
  display: flex; align-items: center; gap: 16px;
  padding: 26px 24px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 46, 77, 0.10), transparent 58%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.live-empty-ico {
  width: 42px; height: 42px; flex: none; padding: 11px;
  border-radius: 50%;
  background: rgba(255, 46, 77, 0.13); color: var(--live);
}
.live-empty h3 { font-size: 15px; margin-bottom: 3px; }
.live-empty p  { font-size: 13.5px; color: var(--muted); }

/* ==========================================================================
   Rail
   ========================================================================== */
.rails { padding: clamp(18px, 3vh, 34px) 0 60px; }

.rail { position: relative; margin-bottom: clamp(26px, 3.6vh, 46px); }

.rail-viewport { position: relative; }

.rail-track {
  display: flex;
  gap: var(--rail-gap);
  padding: 4px var(--gutter) 30px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* senza questo lo snap ignora il padding e la prima card finisce sotto il
     bordo, disallineata dal titolo della sezione */
  scroll-padding-inline: var(--gutter);
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail-track::-webkit-scrollbar { display: none; }

/* Frecce rail */
.rail-arrow {
  position: absolute; top: 0; bottom: 30px; z-index: 6;
  width: clamp(44px, 4vw, 68px);
  display: grid; place-items: center;
  background: linear-gradient(to right, rgba(10, 10, 15, 0.93), rgba(10, 10, 15, 0));
  opacity: 0; pointer-events: none;
  transition: opacity 0.24s var(--ease);
}
.rail-arrow svg {
  width: 26px; height: 26px;
  transition: transform 0.2s var(--ease);
}
.rail-arrow--next { right: 0; background: linear-gradient(to left, rgba(10, 10, 15, 0.93), rgba(10, 10, 15, 0)); }
.rail-arrow--prev { left: 0; }
.rail:hover .rail-arrow:not([disabled]),
.rail:focus-within .rail-arrow:not([disabled]) { opacity: 1; pointer-events: auto; }
.rail-arrow:hover svg { transform: scale(1.28); }
.rail-arrow[disabled] { opacity: 0 !important; pointer-events: none; }

/* ---------- Card ---------- */
/* Il contenitore role="listitem" è il figlio del flex: senza flex:none si
   comprime, e le card diventano larghe pochi pixel. */
.rail-track > * { flex: none; }

.card {
  position: relative;
  display: block;          /* le card sono <a>: inline ignorerebbe la larghezza */
  flex: none;
  width: var(--card-w);
  scroll-snap-align: start;
  text-align: left;
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease);
}
.card:hover, .card:focus-visible { transform: scale(1.062); z-index: 7; }

.card-poster {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.3s var(--ease), outline-color 0.3s var(--ease);
  outline: 1px solid transparent; outline-offset: 0;
}
.card:hover .card-poster {
  box-shadow: var(--shadow), 0 0 0 1px rgba(232, 255, 61, 0.34), 0 14px 40px rgba(232, 255, 61, 0.08);
}

.card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* L'immagine è spostata di 60px verso il basso rispetto al centro: si vede
     cioè 60px in più della parte alta, dove nelle foto di boxe sta il volto.
     Il max() evita che, quando c'è poco da ritagliare, lo spostamento scopra
     una striscia vuota in cima. */
  object-position: center max(0%, calc(50% - 60px));
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.card-img.is-loaded { opacity: 1; }

/* Velo che compare all'hover con il pulsante play */
.card-veil {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: linear-gradient(to top, rgba(10, 10, 15, 0.9), rgba(10, 10, 15, 0.12));
  opacity: 0;
  transition: opacity 0.26s var(--ease);
}
.card:hover .card-veil, .card:focus-visible .card-veil { opacity: 1; }

.card-play {
  width: 46px; height: 46px; padding: 13px 12px 13px 15px;
  border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  transform: scale(0.8);
  transition: transform 0.26s var(--ease);
}
.card-play svg { fill: currentColor; stroke: none; }
.card:hover .card-play { transform: scale(1); }

.card-badge {
  position: absolute; top: 9px; left: 9px; z-index: 3;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  background: rgba(10, 10, 15, 0.76);
  backdrop-filter: blur(6px);
  color: var(--text-2);
}
.card-badge--live { background: var(--live); color: #fff; }
.card-badge--evento { background: rgba(232, 255, 61, 0.92); color: var(--accent-ink); }

.card-body { padding: 11px 3px 0; }

.card-title {
  font-size: 13.5px; font-weight: 650; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s var(--ease);
}
.card:hover .card-title { color: var(--accent); }

.card-meta {
  margin-top: 5px;
  font-size: 11.5px; color: var(--muted);
  display: flex; align-items: center; gap: 7px;
}
.card-meta span:not(:first-child)::before { content: "·"; margin-right: 7px; }

/* ---------- Velo di caricamento sotto la copertina ---------- */
.velo {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, var(--v1), var(--v2));
}
.velo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.16), transparent 52%);
}

/* ==========================================================================
   Griglia risultati ricerca
   ========================================================================== */
.risultati { padding: 24px 0 70px; }

.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
  gap: clamp(16px, 1.8vw, 26px) var(--rail-gap);
  padding: 0 var(--gutter);
}
.griglia .card { width: auto; }

.vuoto, .errore {
  padding: 44px var(--gutter);
  text-align: center; color: var(--muted); font-size: 15px;
}
.errore { color: #FF8A9B; }

/* ==========================================================================
   Modale player
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; }

.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 4, 8, 0.86);
  backdrop-filter: blur(9px);
  animation: fade 0.24s var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal-dialog {
  position: relative;
  width: min(1060px, 94vw);
  max-height: 92vh; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  animation: pop 0.3s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }

.modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 40px; height: 40px; padding: 11px;
  border-radius: 50%;
  background: rgba(10, 10, 15, 0.72);
  backdrop-filter: blur(6px);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.modal-close:hover { background: var(--live); transform: rotate(90deg); }

.modal-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.modal-video video { width: 100%; height: 100%; object-fit: contain; background: #000; }

.modal-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center; gap: 12px;
  padding: 30px; text-align: center;
}
.modal-fallback p { font-size: 14px; color: var(--muted); max-width: 46ch; }
.modal-fallback a { color: var(--accent); font-weight: 700; font-size: 14px; word-break: break-all; }

.modal-info { padding: 22px 26px 28px; }
.modal-info h3 { font-size: clamp(18px, 2vw, 25px); line-height: 1.25; }
.modal-meta { margin-top: 9px; font-size: 13px; color: var(--accent); font-weight: 600; }
.modal-desc { margin-top: 12px; font-size: 14.5px; color: var(--text-2); line-height: 1.6; }

body.modale-aperta { overflow: hidden; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line); padding: 30px 0 44px; }
.footer-inner {
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap;
}
.footer-meta { font-size: 12px; color: var(--muted); }

/* ==========================================================================
   Scheletri di caricamento
   ========================================================================== */
.sk {
  border-radius: var(--radius);
  background: linear-gradient(105deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

.sk-title { height: 22px; width: 210px; margin: 0 var(--gutter) 16px; border-radius: 7px; }
.sk-row   { display: flex; gap: var(--rail-gap); padding: 0 var(--gutter) 34px; overflow: hidden; }
.sk-card  { width: var(--card-w); aspect-ratio: 16 / 9; flex: none; }
.sk-live  { height: 106px; }
.live-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  :root { --header-h: 60px; --card-w: clamp(178px, 46vw, 240px); }

  .nav { display: none; }
  .hero { height: clamp(370px, 68vh, 520px); }
  .hero-caption { bottom: clamp(84px, 15vh, 120px); max-width: 100%; }
  .hero-arrow { display: none; }
  .live-card { grid-template-columns: 116px 1fr; }
  .live-section { margin-top: -30px; }
}

@media (max-width: 560px) {
  .hero-scrim {
    background: linear-gradient(to top, var(--bg) 3%, rgba(10, 10, 15, 0.86) 30%, rgba(10, 10, 15, 0.3));
  }
  .hero-cta { width: 100%; justify-content: center; }
  .live-card { grid-template-columns: 1fr; }
  .live-thumb { aspect-ratio: 16 / 8; }
}

/* ==========================================================================
   Preferenze utente
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rail-track { scroll-behavior: auto; }
  .card:hover { transform: none; }
  .hero-slide.is-active .hero-art,
  .hero-slide.is-active .hero-img { animation: none; }
}

@media (prefers-contrast: more) {
  :root { --muted: #B8B8C8; --line: rgba(255, 255, 255, 0.22); }
}

/* ==========================================================================
   Rifiniture
   ========================================================================== */

/* Grana appena percettibile: toglie l'effetto "piatto" dalle grandi campiture
   scure e dai gradienti. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 300;
  pointer-events: none; opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ingresso in scena delle rail allo scroll */
.rail, .live-section { animation: sali 0.55s var(--ease) both; }
@keyframes sali { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Bagliore dietro la sezione live, per staccarla dal banner */
.live-section::before {
  content: ""; position: absolute; inset: -40px 0 auto; height: 220px; z-index: -1;
  background: radial-gradient(60% 100% at 18% 0%, rgba(255, 46, 77, 0.12), transparent 70%);
  pointer-events: none;
}

.live-card {
  background:
    linear-gradient(140deg, rgba(255, 46, 77, 0.07), transparent 42%),
    linear-gradient(140deg, var(--surface-2), var(--surface));
}

/* Copertine: nitidezza sui bordi arrotondati */
.card-img, .hero-img { border-radius: inherit; }

/* Il titolo della card resta leggibile su due righe anche con parole lunghe */
.card-title { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .rail, .live-section { animation: none; }
}

/* Titolo di riserva sotto la copertina: visibile solo se l'immagine SVG non
   viene disegnata dal browser. */
.velo-mark {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center; align-content: center;
  padding: 14px;
  font-size: clamp(13px, 1.5vw, 21px); font-weight: 800; line-height: 1.16;
  letter-spacing: -0.02em; text-align: center; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  overflow: hidden; overflow-wrap: anywhere;
  transition: opacity 0.3s var(--ease);
}
.ha-copertina .velo-mark { opacity: 0; }

/* ==========================================================================
   Palinsesto — riprende #events-container del sito precedente
   ========================================================================== */
.palinsesto { min-width: 0; }

.palinsesto-colonne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 0 clamp(10px, 1.4vw, 26px);
  align-items: start;
}

.palinsesto-colonna {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}

.evento {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  padding: 13px 12px 13px 4px;
  border-bottom: 1px solid var(--line);
  transition: background 0.18s var(--ease);
}
.evento:hover { background: rgba(255, 255, 255, 0.028); }

.evento-ora {
  font-size: 15px; font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.evento-fine { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }

.evento-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.evento-titolo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14.5px; font-weight: 650; line-height: 1.35;
}

.evento-desc, .evento-meta {
  font-size: 12.5px; color: var(--muted); line-height: 1.45;
  overflow-wrap: anywhere;
}
.evento-meta { font-size: 11.5px; letter-spacing: 0.03em; text-transform: uppercase; }

.evento-live {
  flex: none;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--live); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}

/* riga in onda: filo rosso a sinistra */
.evento--live::before {
  content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px; background: var(--live);
}

@media (max-width: 700px) {
  .evento { grid-template-columns: 62px 1fr; gap: 11px; }
}

/* ==========================================================================
   Loader iniziale — era #loader-wrapper
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center; align-content: center; gap: 20px;
  background: var(--bg);
  transition: opacity 0.42s var(--ease), visibility 0.42s;
}
.loader.via { opacity: 0; visibility: hidden; }

.loader-logo { position: relative; display: grid; place-items: center; }

.loader-img {
  width: auto; height: 108px;
  object-fit: contain;
  animation: respira 2.4s var(--ease) infinite;
}
@keyframes respira {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(0.965); opacity: 0.86; }
}

.loader-anello {
  position: absolute; inset: -22px;
  border: 2px solid rgba(232, 255, 61, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: giraAnello 1.1s linear infinite;
}
@keyframes giraAnello { to { transform: rotate(360deg); } }

.loader-testo {
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .loader-anello, .loader-img { animation: none; }
  .loader-anello { border-top-color: rgba(232, 255, 61, 0.18); }
}

/* ==========================================================================
   Schermo TV sponsor — era .tv-container
   ========================================================================== */
.tv { min-width: 0; }

.tv-cornice { width: 100%; }

.tv-schermo {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 7px;
  background: linear-gradient(160deg, var(--surface-2), #07070b);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.tv-schermo video {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 8px;
  background: #000;
  display: block;
}

/* riflesso sul vetro */
.tv-schermo::after {
  content: ""; position: absolute; inset: 7px; z-index: 1;
  border-radius: 8px; pointer-events: none;
  background: linear-gradient(122deg, rgba(255, 255, 255, 0.07) 0 22%, transparent 46%);
}

@media (max-width: 700px) {
  .tv-schermo { padding: 6px; border-radius: 13px; }
  .tv-schermo video, .tv-schermo::after { border-radius: 8px; }
}

/* ==========================================================================
   Palinsesto e schermo TV affiancati
   ========================================================================== */
.blocco-onda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(18px, 2.4vw, 40px);
  align-items: start;
  padding: clamp(16px, 2.6vh, 30px) var(--gutter) 6px;
}

/* dentro il blocco i margini li dà il contenitore, non le sezioni */
.blocco-onda .section-head { padding: 0; }

/* Lo schermo resta visibile mentre si scorre il palinsesto, che è più lungo. */
.blocco-onda .tv { position: sticky; top: calc(var(--header-h) + 16px); }

@media (max-width: 1080px) {
  .blocco-onda {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vh, 32px);
  }
  .blocco-onda .tv { position: static; max-width: 520px; }
}

/* Intestazione delle pagine dedicate (Eventi, Trasmissioni) */
.pagina-testa { padding-top: clamp(14px, 2.4vh, 26px); align-items: baseline; }
.pagina-testa .section-title { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.03em; }

/* ==========================================================================
   Pagine di contenuto (Chi siamo, Produzione, HbbTV)
   ========================================================================== */
.statica {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(28px, 6vh, 72px) var(--gutter) 80px;
}

.statica-testa { margin-bottom: clamp(28px, 5vh, 52px); }

.statica-titolo {
  margin-top: 14px;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.statica-intro {
  margin-top: 18px;
  max-width: 62ch;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--text-2);
}

.statica-sezione {
  padding-top: clamp(24px, 4vh, 44px);
  border-top: 1px solid var(--line);
  margin-top: clamp(24px, 4vh, 44px);
}
.statica-sezione:first-of-type { border-top: 0; margin-top: 0; }

.statica-sezione .section-title { padding: 0; margin-bottom: 16px; }

.statica-testo {
  max-width: 62ch;
  font-size: 15.5px; line-height: 1.7; color: var(--text-2);
}

.statica-elenco {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 9px;
  max-width: 72ch;
}
.statica-elenco li {
  position: relative;
  padding-left: 24px;
  font-size: 15px; line-height: 1.6; color: var(--text-2);
}
.statica-elenco li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

.statica-schede {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: 20px;
}

.statica-scheda {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.statica-scheda:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.statica-scheda h3 { font-size: 16px; margin-bottom: 8px; }
.statica-scheda p  { font-size: 14px; line-height: 1.6; color: var(--muted); }

.statica-scheda ul {
  margin: 10px 0 0; padding: 0; list-style: none;
  display: grid; gap: 7px;
}
.statica-scheda li {
  position: relative; padding-left: 18px;
  font-size: 13.5px; line-height: 1.5; color: var(--text-2);
}
.statica-scheda li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 2px; border-radius: 2px;
  background: var(--accent); opacity: 0.8;
}

/* Immagini nelle pagine di contenuto */
.statica-copertina {
  margin: 0 0 clamp(26px, 4vh, 44px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
}
.statica-copertina img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
}
/* velo scuro: le foto sono chiare, il tema no */
.statica-copertina::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 15, 0.62), rgba(10, 10, 15, 0.08));
}

.statica-scheda--foto { padding: 0; overflow: hidden; }
.statica-scheda--foto h3 { margin: 16px 20px 8px; }
.statica-scheda--foto p  { margin: 0 20px 20px; }
.statica-scheda--foto ul { margin: 0 20px 20px; }

.statica-foto {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease);
}
.statica-scheda--foto:hover .statica-foto { transform: scale(1.04); }

/* Video di sfondo nelle pagine di contenuto (era .video-background) */
.statica-copertina--video video {
  width: 100%; height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
}

/* Titolo per i soli lettori di schermo: la pagina deve avere un h1, ma quello
   dell'hero cambia a ogni slide e ce ne sarebbero quattordici. */
.solo-lettori {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}

/* ==========================================================================
   Pagina di un singolo video
   ========================================================================== */
.scheda { max-width: 1180px; margin: 0 auto; padding: clamp(18px, 3vh, 34px) var(--gutter) 70px; }

.briciole {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 13px; color: var(--muted);
}
.briciole a { color: var(--text-2); }
.briciole a:hover { color: var(--accent); }

.scheda-player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.scheda-player img { width: 100%; height: 100%; object-fit: cover; }
.scheda-player::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 15, 0.45), transparent 55%);
}

.scheda-avvia {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  width: 82px; height: 82px; padding: 24px 22px 24px 28px;
  border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.scheda-avvia svg { fill: currentColor; stroke: none; }
.scheda-avvia:hover { transform: translate(-50%, -50%) scale(1.07); }

.scheda-testa { padding-top: 24px; }
.scheda-titolo {
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance;
}
.scheda-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px;
  font-size: 13px; color: var(--muted); text-transform: capitalize;
}
.badge-rubrica {
  padding: 3px 10px; border-radius: 99px;
  background: rgba(232, 255, 61, 0.14); color: var(--accent);
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px;
}
.scheda-desc {
  margin-top: 16px; max-width: 68ch;
  font-size: 15.5px; line-height: 1.7; color: var(--text-2);
}

#correlati { margin-top: clamp(28px, 5vh, 52px); }
#correlati .rail-track { padding-left: 0; padding-right: 0; }
#correlati .section-head { padding: 0; }

/* Spazio pubblicitario */
.pubblicita {
  margin: clamp(24px, 4vh, 44px) 0;
  min-height: 90px;
  display: block;
}

.pubblicita--riga { padding: 0 var(--gutter); }
/* Gli spazi restano invisibili finché AdSense non riempie: niente buchi bianchi */
.pubblicita ins { display: block; min-height: 0; }

/* ==========================================================================
   Consenso ai cookie
   ========================================================================== */
.consenso {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 350;
  padding: var(--gutter);
  display: flex; justify-content: center;
  pointer-events: none;
}
.consenso-corpo {
  pointer-events: auto;
  width: min(760px, 100%);
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.32s var(--ease), opacity 0.32s var(--ease);
}
.consenso.is-visibile .consenso-corpo { transform: none; opacity: 1; }

.consenso-titolo { font-size: 17px; margin-bottom: 8px; }
.consenso-testo {
  font-size: 14px; line-height: 1.6; color: var(--text-2);
  max-width: 68ch;
}
.consenso-testo a { color: var(--accent); text-decoration: underline; }

.consenso-scelte {
  display: grid; gap: 10px;
  margin: 16px 0 4px;
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.consenso-voce {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13.5px; cursor: pointer;
}
.consenso-voce input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.consenso-voce em {
  display: block; margin-top: 2px;
  font-style: normal; font-size: 12.5px; color: var(--muted);
}

.consenso-azioni {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 18px;
}
.btn-consenso {
  padding: 10px 18px;
  border-radius: 99px;
  font-size: 14px; font-weight: 700;
  transition: transform 0.16s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn-consenso--primario { background: var(--accent); color: var(--accent-ink); }
.btn-consenso--primario:hover { transform: translateY(-1px); }
.btn-consenso--fantasma {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--line-strong);
}
.btn-consenso--fantasma:hover { color: var(--text); border-color: var(--text-2); }

.footer-link { display: flex; gap: 16px; font-size: 12.5px; }
.footer-link a { color: var(--muted); }
.footer-link a:hover { color: var(--accent); }

@media (max-width: 560px) {
  .consenso-azioni { flex-direction: column-reverse; }
  .btn-consenso { width: 100%; }
}

/* Il piè di pagina porta la nota sui diritti: va lasciata leggibile ma discreta */
.footer-meta { max-width: 62ch; line-height: 1.5; }

/* Messaggio mentre hls.js scende e il flusso si aggancia */
.modal-attesa {
  padding: 2rem; text-align: center; color: var(--testo-tenue);
  font-size: .95rem; letter-spacing: .02em;
}