/* ============================================================
   MIC TYSON — STILE CONDIVISO (restyling 2.0)
   Linguaggio: poster da concerto × brochure industriale svizzera.
   Nero quasi puro + bianco + grigio caldo + UN accento giallo #FCC131
   usato a blocchi pieni (bottoni, footer, card CTA, banda scorrevole).
   Font: Anton (titoli condensed, maiuscolo) + Inter Tight (testi, UI).
   Tutto il CSS usa SOLO i token definiti in :root.
   ============================================================ */

@font-face {
  font-family: 'NickelGothicV3-SemiWide';
  src: url('../assets/fonts/NickelGothicV3-SemiWide.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   1. DESIGN TOKEN
   ============================================================ */
:root {
  /* Ganci storici usati dalla dashboard (sezione "Aspetto").
     --nero = colore di sfondo; gli altri restano per compatibilità. */
  --nero: #131313;
  --giallo: #FCC131;
  --rosso: #DE3E3E;
  --fiamma: #FCC131;
  --oro: #FCC131;
  --bianco: #FEFEFE;

  /* Neutri */
  --color-black: var(--nero);
  --color-white: #FEFEFE;
  --color-gray: #D8D3D3;
  --color-placeholder: #424242;
  --color-feedback-error: #DE3E3E;

  /* Accento brand */
  --color-accent: #FCC131;
  --color-accent-hover: #CD9E2B;
  --color-on-accent: #131313;           /* testo SU giallo: sempre nero */

  /* Linee sottili, testo attenuato, overlay foto */
  --color-line: color-mix(in srgb, currentColor, transparent 80%);
  --color-muted: color-mix(in srgb, currentColor, transparent 45%);
  --overlay-top: rgba(19, 19, 19, .35);
  --overlay-mid: rgba(19, 19, 19, .55);
  --overlay-bottom: rgba(19, 19, 19, .92);
  --overlay-full: rgba(19, 19, 19, .82);

  /* Temi */
  --color-background: var(--color-black);
  --color-text: var(--color-white);

  /* Font */
  --font-condensed: "National 2 Condensed", "Anton", "Barlow Condensed", sans-serif;
  --font-condensed-weight: 400;         /* Anton è già "black" a 400; con National 2 usare 900 */
  --font-sans: "Helvetica Now Display", "Inter Tight", "Inter", Helvetica, Arial, sans-serif;
  /* alias per main.js (applicaAspetto può sovrascriverli dalla dashboard) */
  --font-display: var(--font-condensed);
  --font-testo: var(--font-sans);

  /* Scala tipografica */
  /* Scala +20% rispetto al reference (375px · 768px · 1440px · max) */
  --text-heading-huge: clamp(6.5rem, -2.3028rem + 37.5587vw, 35rem);      /* 104 · 252 · 504 · 560 */
  --text-heading-xl:   clamp(6.5rem, 2.6708rem + 16.338vw, 21.25rem);     /* 104 · 168 · 278 · 340 */
  --text-heading-lg:   clamp(5rem, 1.4789rem + 15.0235vw, 18.75rem);      /*  80 · 139 · 240 · 300 */
  --text-heading-md:   clamp(2.5rem, -0.625rem + 13.3333vw, 14.375rem);   /*  40 ·  92 · 182 · 230 */
  --text-heading-sm:   clamp(2.5rem, 1.4877rem + 4.3192vw, 6.5rem);       /*  40 ·  57 ·  86 · 104 */
  --text-heading-xs:   clamp(2.125rem, 1.5308rem + 2.5352vw, 4.375rem);   /*  34 ·  44 ·  61 ·  70 */
  --text-heading-2xs:  clamp(1.625rem, 1.3609rem + 1.1268vw, 2.625rem);   /*  26 ·  30 ·  38 ·  42 */
  --text-body-lg: clamp(1.125rem, 1.059rem + 0.2817vw, 1.375rem);         /* 18 → 22px */
  --text-body-md: clamp(0.9375rem, 0.8935rem + 0.1878vw, 1.125rem);       /* 15 → 18px */
  --text-body-sm: .8125rem;                                                /* 13px */
  --text-marquee: clamp(5.4rem, 1.7556rem + 15.5493vw, 19.125rem);       /* 86 · 148 · 252 · 306 (−10%) */

  /* Interlinee: le righe si avvicinano ma non si toccano mai */
  /* Anton ha maiuscole alte (~.88em): .92 lascia un filo d'aria tra le righe */
  --leading-display: .92;                /* condensed xl / lg */
  --leading-display-md: .93;             /* condensed md */
  --leading-heading: .96;                /* heading sans */
  --leading-body: 1.25;
  --leading-label: 1.2;

  /* Parole lunghe su mobile: ogni titolo condensed usa
     font-size ≤ (larghezza utile) / (N lettere × .48em), dove --n è la
     lunghezza della parola più lunga (impostata da main.js sul titolo). */

  /* Spaziature e griglia */
  --spacing: .25rem;
  --spacing-gutter: 10px;
  --grid-columns: 12;
  --grid-gutter: .75rem;
  --header-height: 4.375rem;
  --header-height-solid: 3.75rem;
  --submenu-height: 3.25rem;
  --control-size: 2.75rem;
  --card-width: clamp(14rem, 9rem + 16vw, 22rem);

  --spacing-fluid-xs:  clamp(.5rem, .4565rem + .2174vw, .625rem);
  --spacing-fluid-sm:  clamp(1rem, .8261rem + .8696vw, 1.5rem);
  --spacing-fluid-md:  clamp(1.5rem, 1.3261rem + .8696vw, 2rem);
  --spacing-fluid-lg:  clamp(2rem, 1.8261rem + .8696vw, 2.5rem);
  --spacing-fluid-xl:  clamp(2.5rem, 2.1522rem + 1.7391vw, 3.5rem);
  --spacing-fluid-2xl: clamp(3.5rem, 2.7609rem + 3.6957vw, 5.625rem);
  --spacing-fluid-3xl: clamp(5.625rem, 4.3207rem + 6.5217vw, 9.375rem);
  --spacing-fluid-4xl: clamp(9.375rem, 8.288rem + 5.4348vw, 12.5rem);

  --radius-xs: .25rem;
  --radius-sm: .5rem;
  --radius-md: .875rem;
  --radius-lg: 2.5rem;

  /* Motion */
  --transition-duration-fast: .25s;
  --transition-duration: .4s;
  --transition-duration-slow: .6s;
  --transition-duration-slower: .8s;
  --transition-duration-cinematic: 2.4s;
  --ease: cubic-bezier(.3, .4, 0, 1);
  --ease-power3-out: cubic-bezier(.165, .84, .44, 1);
  --ease-power3-inOut: cubic-bezier(.77, 0, .175, 1);
  --ease-power4-out: cubic-bezier(.23, 1, .32, 1);
  --stagger: 60ms;
  --stagger-riga: 160ms;                 /* le righe dei titoli entrano una dopo l'altra */
  --rail-duration: 28s;
}

.theme-light { --color-background: var(--color-white); --color-text: var(--color-black); }
.theme-dark  { --color-background: var(--color-black); --color-text: var(--color-white); }
.theme-light, .theme-dark { background: var(--color-background); color: var(--color-text); }

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--color-black);
  color: var(--color-white);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-testo);
  font-weight: 500;
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  background: var(--color-background);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  counter-reset: sezione;
}
body.menu-open { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 700; }

h1, h2, h3, .display { font-weight: 400; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.theme-light :focus-visible { outline-color: var(--color-black); }

.container { padding-inline: var(--spacing-gutter); }
.centro { text-align: center; }
.spazio-sopra { margin-top: var(--spacing-fluid-xl); }
.nascosto { display: none !important; }

/* Sfondo immagine generale (dashboard → aspetto.sfondoImg) */
.site-bg {
  position: fixed;
  left: 0; right: 0; top: -22vh; height: 144vh;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  pointer-events: none;
}
body:has(> .site-bg) { background: transparent; }

/* Le griglie a colonna singola non si allargano mai oltre il contenitore
   (una parola gigante non deve spingere fuori la pagina). */
.hof-info, .hp-intro-testo, .evento-dati, .evento-testo, .card, .card-corpo,
.fs-card, .footer-col, .cs-blocco, .stat-blocco, .ticket-top > div,
.hp-hero-content > *, .intestazione-pagina > *, .cs-contenuto > * { min-width: 0; }
.hof-info, .hp-intro-testo, .evento-dati, .evento-testo, .card, .card-corpo,
.footer-col, .cs-blocco, .ticket-top > div { grid-template-columns: minmax(0, 1fr); }

/* ============================================================
   3. TIPOGRAFIA DI SERVIZIO
   ============================================================ */
/* Micro-label "da etichetta tecnica" */
.label {
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.label--accent { color: var(--color-accent); }
.label--par::before { content: "[ "; }
.label--par::after  { content: " ]"; }
.theme-light .label--accent { color: var(--color-text); }

/* Sottolineatura che compare al passaggio */
.hover-underline,
.nav-desktop a,
.menu-social a,
.footer-col a:not(.btn),
.card-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left bottom;
  background-size: 0 1px;
  background-repeat: no-repeat;
  transition:
    background-size var(--transition-duration) var(--ease),
    color var(--transition-duration) var(--ease);
}
.hover-underline:hover,
.nav-desktop a:hover,
.menu-social a:hover,
.footer-col a:not(.btn):hover,
.card-link:hover,
a:hover > .card-link { background-size: 100% 1px; }

/* Titoli condensed spezzati in righe con maschera (main.js) */
.riga {
  display: block;
  overflow: hidden;
  padding-block: .12em .16em;            /* spazio per ascendenti, accenti (È, À) e virgole */
  margin-block: -.12em -.16em;           /* compensa: l'interlinea visiva resta quella del titolo */
}
.riga > span { display: inline-block; white-space: nowrap; }
/* In colonna flex i margini negativi delle maschere non si "fondono":
   la distanza tra le righe resta esattamente l'interlinea del titolo. */
.is-split { display: flex; flex-direction: column; align-items: flex-start; }

/* ============================================================
   4. BOTTONI
   ============================================================ */
.btn,
.ticket-btn,
.c-button {
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3.5);   /* 8px 14px: compatti */
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);   /* identico ai link della navigazione */
  text-transform: uppercase;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--transition-duration) var(--ease),
    border-color var(--transition-duration) var(--ease);
}
/* Hover: solo il cambio di colore di fondo, niente altro */
.btn:hover,
.ticket-btn:hover,
.c-button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

.btn-block,
.c-button.-fluid { display: flex; width: 100%; }

/* Variante secondaria: trasparente con bordo sottile */
.btn-secondario,
.hp-cta-row .btn {
  background: transparent;
  border-color: var(--color-line);
  color: inherit;
}
.btn-secondario:hover,
.hp-cta-row .btn:hover { background: transparent; border-color: currentColor; }
/* Merch in home: sezione a blocco giallo (come il footer).
   Testo, etichetta del titolo e bottone diventano neri per contrastare. */
.hp-freestylers.hp-merch {
  --color-background: var(--color-accent);
  --color-text: var(--color-on-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.hp-merch .hp-titolo::before { color: var(--color-on-accent); }
.hp-merch .hp-cta-row .btn {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}
.hp-merch .hp-cta-row .btn:hover { background: var(--color-placeholder); border-color: var(--color-placeholder); }
.hp-merch :focus-visible { outline-color: var(--color-black); }

/* Variante scura (sopra il giallo) */
.btn-scuro {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}
.btn-scuro:hover { background: var(--color-placeholder); border-color: var(--color-placeholder); }

/* ============================================================
   5. HEADER + MENU (costruiti da main.js)
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  height: var(--header-height);
  padding: 0 var(--spacing-gutter);
  display: flex;                          /* brand a sinistra · menu + biglietti a destra */
  align-items: center;
  gap: var(--spacing-fluid-md);
  background: transparent;
  color: var(--color-white);
  transition:
    background var(--transition-duration) var(--ease),
    height var(--transition-duration) var(--ease);
}
.site-header.solid {
  height: var(--header-height-solid);
  background: var(--color-black);
}
/* Logo sempre in alto a sinistra, sempre bianco */
.header-logo { display: flex; align-items: center; height: 100%; margin-right: auto; }
.header-logo img,
.menu-logo img {
  height: calc(var(--header-height) - var(--spacing-fluid-sm));
  width: auto;
  filter: brightness(0) invert(1);
  transition: height var(--transition-duration) var(--ease);
}
.site-header.solid .header-logo img { height: calc(var(--header-height-solid) - var(--spacing-fluid-sm)); }

.nav-desktop { display: flex; align-items: center; gap: var(--spacing-fluid-md); }
.nav-desktop a {
  padding: calc(var(--spacing) * 1) 0;
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);   /* come le etichette del sottomenu */
  text-transform: uppercase;
  letter-spacing: .02em;
}
.nav-desktop a.attiva { color: var(--color-accent); }
.nav-desktop a.attiva::before { content: "[ "; }
.nav-desktop a.attiva::after  { content: " ]"; }

.hamburger,
.menu-chiudi {
  width: var(--control-size);
  height: var(--control-size);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--transition-duration) var(--ease);
}
.hamburger:hover,
.menu-chiudi:hover { border-color: currentColor; }
.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-fluid-md);
  padding: var(--header-height) var(--spacing-gutter) var(--spacing-fluid-sm);
  background: var(--color-black);
  color: var(--color-white);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition-duration) var(--ease),
    visibility 0s linear var(--transition-duration);
}
.menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--transition-duration) var(--ease);
}
.menu-chiudi {
  position: absolute;
  top: calc((var(--header-height) - var(--control-size)) / 2);
  right: var(--spacing-gutter);
}
.menu-chiudi span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.menu-chiudi span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.menu-chiudi span:last-child  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Le voci riempiono tutto lo schermo: main.js calcola la dimensione più grande
   che sta nello spazio libero (altezza e larghezza), parola per parola. */
.menu-links {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* ogni voce occupa una fascia uguale, separata da un filetto sottile */
.menu-links a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;               /* testo centrato in verticale, può andare a capo */
}
.menu-links a + a { border-top-color: color-mix(in srgb, var(--color-white), transparent 80%); }
.menu-links a + a { border-top: 1px solid var(--color-line); }
.menu-links.misura a { flex: none; }
.menu-links a {
  font-family: var(--font-display);
  font-weight: var(--font-condensed-weight);
  font-size: var(--menu-size, min(var(--text-heading-md), 16vw));
  line-height: var(--leading-display);
  padding-block: .1em;                   /* aria tra testo e filetto */
  max-width: 100%;
  letter-spacing: -.01em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(40%);
  transition:
    color var(--transition-duration) var(--ease),
    transform var(--transition-duration-slower) var(--ease-power4-out),
    opacity var(--transition-duration-slow) var(--ease);
}
.menu-links a:nth-child(2) { transition-delay: 0s, calc(var(--stagger) * 1), calc(var(--stagger) * 1); }
.menu-links a:nth-child(3) { transition-delay: 0s, calc(var(--stagger) * 2), calc(var(--stagger) * 2); }
.menu-links a:nth-child(4) { transition-delay: 0s, calc(var(--stagger) * 3), calc(var(--stagger) * 3); }
.menu-links a:nth-child(5) { transition-delay: 0s, calc(var(--stagger) * 4), calc(var(--stagger) * 4); }
.menu-links a:nth-child(6) { transition-delay: 0s, calc(var(--stagger) * 5), calc(var(--stagger) * 5); }
.menu-open .menu-links a { opacity: 1; transform: none; }
.menu-links a:hover,
.menu-links a.attiva { color: var(--color-accent); }

.menu-pie {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacing-fluid-md);
  padding-top: var(--spacing-fluid-sm);
  border-top: 1px solid var(--color-line);
}
.menu-logo img { height: 3rem; width: auto; }
.menu-social { display: flex; flex-wrap: wrap; gap: var(--spacing-fluid-sm); }

/* ============================================================
   6. INTESTAZIONE DELLE PAGINE INTERNE
   ============================================================ */
.intestazione-pagina {
  /* identica alla hero della home: tutto schermo, foto scura, titolo-poster in basso a sinistra */
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  column-gap: var(--grid-gutter);
  row-gap: var(--spacing-fluid-sm);
  align-items: end;
  padding: calc(var(--header-height) + var(--spacing-fluid-sm)) var(--spacing-gutter) var(--spacing-fluid-xl);
  background:
    linear-gradient(180deg, var(--overlay-top) 0%, var(--overlay-mid) 45%, var(--overlay-bottom) 100%),
    url('../assets/img/hp-hero.avif') center / cover no-repeat,
    var(--color-black);
  color: var(--color-white);
}
.intestazione-pagina::before {
  content: "[ Mic Tyson — Freestyle Battle ]";
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-accent);
}
/* stesso titolo della hero: main.js lo fa riempire la colonna (max 24% dello schermo per riga) */
.intestazione-pagina h1 {
  grid-column: 1 / span 8;
  grid-row: 2 / span 2;
  align-self: end;
  font-family: var(--font-display);
  font-weight: var(--font-condensed-weight);
  font-size: min(calc((100vw - 2 * var(--spacing-gutter)) / (var(--n, 8) * .48)), 24svh);
  line-height: var(--leading-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.intestazione-pagina p {
  grid-column: 9 / -1;
  grid-row: 3;
  padding-top: var(--spacing-fluid-xs);
  border-top: 1px solid var(--color-line);
  font: 500 var(--text-body-md)/var(--leading-body) var(--font-testo);
}

/* ============================================================
   7. SEZIONI GENERICHE
   ============================================================ */
.sezione {
  padding: var(--spacing-fluid-3xl) var(--spacing-gutter);
  background: var(--color-background);
  color: var(--color-text);
}
.sezione:not(.theme-light) + .sezione:not(.theme-light),
.sezione.nascosto + .sezione { padding-top: 0; }
.sezione-piena { padding-inline: 0; }

/* Titoli di sezione (I Freestylers, Biglietti…) nel font condensed dei titoli grandi */
.titolo-sezione,
.hp-titolo {
  margin-bottom: var(--spacing-fluid-xl);
  font-family: var(--font-display);
  font-weight: var(--font-condensed-weight);
  font-size: min(var(--text-heading-md), calc((100vw - 2 * var(--spacing-gutter)) / (var(--n, 8) * .48)));
  line-height: var(--leading-display-md);
  letter-spacing: -.01em;
  text-transform: uppercase;
  counter-increment: sezione;
}
.titolo-sezione::before,
.hp-titolo::before {
  content: "[ N°" counter(sezione) " ]";
  display: block;
  margin-bottom: var(--spacing-fluid-sm);
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.theme-light :is(.titolo-sezione, .hp-titolo)::before { color: var(--color-text); }
body[data-page="lineup"] .titolo-sezione::before { content: none; }

.sottotitolo-sezione {
  max-width: 52ch;
  margin: calc(var(--spacing-fluid-md) * -1) 0 var(--spacing-fluid-xl);
  font: 500 var(--text-body-lg)/1.3 var(--font-testo);
}

/* Layout asimmetrico: titolo a sinistra, contenuto spinto a destra */
.sezione--split {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: calc(var(--spacing) * 10);
  align-items: start;
}
.sezione--split > .titolo-sezione { grid-column: 1 / span 6; margin: 0; }
.sezione--split > :not(.titolo-sezione) { grid-column: 7 / -1; }

.testo-corpo {
  max-width: 68ch;
  font: 500 var(--text-body-lg)/1.3 var(--font-testo);
}

/* ============================================================
   8. SUBMENU STICKY (Line-up, Hall of Fame)
   ============================================================ */
.hof-submenu {
  position: sticky;
  top: var(--header-height-solid);
  z-index: 800;
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  min-height: var(--submenu-height);
  padding: 0 var(--spacing-gutter);
  overflow-x: auto;
  background: var(--color-black);
  color: var(--color-white);
  border-bottom: 1px solid var(--color-line);
  scrollbar-width: none;
}
.hof-submenu::-webkit-scrollbar { display: none; }
.hof-submenu a {
  flex: none;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-radius: var(--radius-xs);
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
  transition:
    background var(--transition-duration) var(--ease),
    color var(--transition-duration) var(--ease);
}
.hof-submenu a:hover { color: var(--color-accent); }
.hof-submenu a.attiva { background: var(--color-accent); color: var(--color-on-accent); }

/* ============================================================
   9. CARD PERSONE / PRODOTTI (line-up, merch)
   ============================================================ */
.griglia {
  display: grid;
  gap: var(--spacing-fluid-xl) var(--grid-gutter);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
/* Line-up: 4 colonne fisse su schermi grandi, 3 su tablet, 2 su telefono (sotto, nei media query) */
body[data-page="lineup"] .griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  body[data-page="lineup"] .griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  display: grid;
  align-content: start;
  gap: var(--spacing-fluid-xs);
  color: inherit;
}
.card-foto,
.card > .card-foto-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;                     /* foto con angoli squadrati */
  background: var(--color-placeholder);
}
/* stesso formato per tutte le foto delle griglie (MC, giuria, host & DJ, merch) */
.griglia .card > :first-child {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.card-foto { filter: none; }              /* foto sempre a colori, nessun effetto al passaggio */
a.card { overflow: hidden; }

.card-foto-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: var(--font-condensed-weight);
  font-size: clamp(2.5rem, 7vw, 7rem);
  line-height: 1;
  color: var(--color-gray);
  background: var(--color-placeholder);
}
.theme-light .card-foto-placeholder { background: var(--color-gray); color: var(--color-placeholder); }

.card-corpo { display: grid; gap: calc(var(--spacing) * 2); padding-top: calc(var(--spacing) * 1); }
.card-extra {
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-accent);
}
.card-extra:empty { display: none; }
.theme-light .card-extra { color: var(--color-muted); }
.card-nome {
  font: 700 var(--text-heading-2xs)/1.05 var(--font-testo);
  letter-spacing: -.01em;
}
.card-prezzo {
  font: 500 var(--text-body-md)/var(--leading-body) var(--font-testo);
  color: var(--color-muted);
}
.card-link {
  justify-self: start;
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* ============================================================
   10. HOME
   ============================================================ */
/* ---- HERO ---- */
.hp-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--color-black);
  color: var(--color-white);
}
.hp-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  transform: scale(1.08);
  transition: transform var(--transition-duration-cinematic) var(--ease-power3-out);
}
.is-loaded .hp-hero-media { transform: scale(1); }
.hp-hero-media :is(img, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hp-hero-media iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.78svh);
  height: max(100%, 56.25vw);
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.hp-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--overlay-top) 0%, var(--overlay-mid) 45%, var(--overlay-bottom) 100%);
}

.hp-hero-content {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  grid-template-rows: auto 1fr auto auto;
  column-gap: var(--grid-gutter);
  row-gap: var(--spacing-fluid-sm);
  align-items: end;
  padding: calc(var(--header-height) + var(--spacing-fluid-sm)) var(--spacing-gutter) var(--spacing-fluid-xl);
}
.hp-pill {
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-accent);
}
.hp-pill::before { content: "[ "; }
.hp-pill::after  { content: " ]"; }
.theme-light .hp-pill { color: var(--color-text); }
.hp-hero .hp-pill { grid-column: 1 / span 6; grid-row: 1; align-self: start; justify-self: start; }

/* Blocco info "ESTD. / LUOGO / ©" */
.hp-estd {
  grid-column: 9 / -1;
  grid-row: 1;
  align-self: start;
  display: grid;
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Il titolo hero è un poster: ~60–70% dell'altezza dello schermo,
   ma la parola più lunga non esce mai dalla larghezza (--fit). */
.hp-hero-titolo {
  grid-column: 1 / span 8;
  grid-row: 2 / span 3;
  align-self: end;
  font-family: var(--font-display);
  font-weight: var(--font-condensed-weight);
  font-size: min(calc((100vw - 2 * var(--spacing-gutter)) / (var(--n, 8) * .48)), 24svh);
  line-height: var(--leading-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
}

/* Blocco info stile etichetta: data grande, luogo in label */
.hp-hero-info {
  grid-column: 9 / -1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding-top: var(--spacing-fluid-xs);
  border-top: 1px solid var(--color-line);
}
.hp-hero-info:empty { display: none; }
.hp-hero-info > span {
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.hp-hero-info > span:first-child {
  font: 700 var(--text-heading-2xs)/1.05 var(--font-testo);
  letter-spacing: -.01em;
  text-transform: none;
}
.hp-hero-info .sep { display: none; }
.hp-hero .btn-biglietti { grid-column: 9 / -1; grid-row: 4; width: 100%; }

/* ---- INTRO (sezione chiara) ---- */
.hp-intro-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: calc(var(--spacing) * 10);
  align-items: start;
}
.hp-intro-testo {
  grid-column: 1 / span 6;
  display: grid;
  gap: var(--spacing-fluid-lg);
  justify-items: start;
}
.hp-intro-tit {
  font: 700 var(--text-heading-sm)/var(--leading-heading) var(--font-testo);
  letter-spacing: -.03em;
  max-width: 18ch;
}
.hp-intro-p {
  max-width: 52ch;
  font: 500 var(--text-body-lg)/1.3 var(--font-testo);
}
.hp-intro-p:empty { display: none; }

/* Badge "Sold out" = card accento piena */
.hp-intro-badge {
  display: grid;
  gap: var(--spacing-fluid-xs);
  padding: var(--spacing-fluid-sm) var(--spacing-fluid-md) var(--spacing-fluid-md);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.hp-intro-badge-big {
  font-family: var(--font-display);
  font-weight: var(--font-condensed-weight);
  font-size: min(var(--text-heading-md), calc((100vw - 2 * var(--spacing-gutter)) / (var(--n, 8) * .48)));
  line-height: var(--leading-display-md);
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.hp-intro-badge-sub {
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.hp-intro-badge-sub:empty { display: none; }

.hp-intro-media {
  /* quadrata, metà pagina come il testo, sempre interamente nello schermo */
  grid-column: 7 / -1;
  justify-self: end;
  align-self: center;
  width: min(100%, 80svh);
  overflow: hidden;
  border-radius: 0;                     /* foto con angoli squadrati */
  background: var(--color-gray);
  aspect-ratio: 1 / 1;
}
.hp-intro-media img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  will-change: transform;
}

/* ---- FREESTYLERS / MERCH (strisce orizzontali) ---- */
.hp-freestylers {
  padding: var(--spacing-fluid-3xl) 0;
  background: var(--color-background);
  color: var(--color-text);
}
.hp-freestylers > .hp-titolo,
.hp-freestylers > .hp-cta-row { padding-inline: var(--spacing-gutter); }

.hp-scroll {
  display: flex;
  gap: var(--grid-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--spacing-gutter);
  padding: 0 var(--spacing-gutter);
  scrollbar-width: none;
}
.hp-scroll::-webkit-scrollbar { display: none; }
/* Striscia a loop perpetuo di main.js (avviaMarquee): due set identici, 0 → -50% */
.hp-scroll.hp-marquee-on {
  overflow-x: clip;
  overflow-y: visible;
  scroll-snap-type: none;
  padding-inline: 0;
}
.hp-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-loop var(--durata, 40s) linear infinite;
  will-change: transform;
}
.hp-marquee-set {
  display: flex;
  flex-shrink: 0;
  gap: var(--grid-gutter);
  padding-right: var(--grid-gutter);      /* stesso spazio anche tra la fine di un set e l'inizio del successivo */
}
@keyframes marquee-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.fs-card {
  flex: 0 0 var(--card-width);
  width: var(--card-width);
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: calc(var(--spacing) * 2);
  color: inherit;
}
.fs-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: calc(var(--spacing) * 1);
  object-fit: cover;
  border-radius: 0;                     /* foto con angoli squadrati */
  background: var(--color-placeholder);
}
.fs-ruolo {
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-accent);
}
.fs-ruolo:empty { display: none; }
.fs-nome {
  font: 700 var(--text-heading-2xs)/1.05 var(--font-testo);
  letter-spacing: -.01em;
}

/* Merch: solo foto, a colori, quadrate */
.merch-card { overflow: hidden; border-radius: 0; }
.merch-card .fs-img {
  aspect-ratio: 4 / 5;                    /* stesso formato delle foto dei freestylers */
  margin: 0;
  filter: none;
  background: var(--color-gray);
}
.merch-card .card-foto-placeholder { background: var(--color-placeholder); color: var(--color-gray); }

.hp-cta-row { display: flex; margin-top: var(--spacing-fluid-xl); }

/* ---- BIGLIETTI ---- */
.hp-tickets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--grid-gutter);
}
.ticket {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-fluid-2xl);
  min-height: clamp(16rem, 12rem + 10vw, 22rem);
  padding: var(--spacing-fluid-sm);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: inherit;
}
.ticket-vip {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.ticket-soldout {
  color: var(--color-muted);
  border-style: dashed;
}
.ticket-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-fluid-sm);
}
.ticket-top > div { display: grid; gap: var(--spacing-fluid-sm); }
.ticket-tag {
  justify-self: start;
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.ticket-tag::before { content: "[ "; }
.ticket-tag::after  { content: " ]"; }
.ticket-nome {
  font-family: var(--font-display);
  font-weight: var(--font-condensed-weight);
  font-size: calc(var(--text-heading-sm) * 1.25);
  line-height: var(--leading-display);
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.ticket-soldlabel {
  flex-shrink: 0;
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2.5);
  border: 1px solid currentColor;
  border-radius: var(--radius-xs);
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}
.ticket .ticket-btn { width: 100%; }
.ticket-vip .ticket-btn {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}
.ticket-vip .ticket-btn:hover { background: var(--color-placeholder); border-color: var(--color-placeholder); }
.ticket .ticket-btn-off,
.ticket .ticket-btn-off:hover {
  background: transparent;
  border-color: var(--color-line);
  color: inherit;
  cursor: not-allowed;
}

/* ---- CTA FINALE / PRE-FOOTER: titolo grigio che si "accende" ---- */
.hp-finale,
.fascia-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: start;
  gap: var(--spacing-fluid-lg);
  padding: var(--spacing-fluid-4xl) var(--spacing-gutter) var(--spacing-fluid-3xl);
  background: var(--color-black);
  color: var(--color-white);
}
.hp-finale-bg {
  position: absolute;
  inset: -120px 0;                      /* margine per la parallasse di main.js (±110px) */
  z-index: -2;
  background: url('../assets/img/hp-cta.avif') center/cover no-repeat;
  will-change: transform;
}
.hp-finale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--overlay-full);
}
.hp-finale-tit,
.fascia-cta h2 {
  font-family: var(--font-display);
  font-weight: var(--font-condensed-weight);
  font-size: min(var(--text-heading-xl), calc((100vw - 2 * var(--spacing-gutter)) / (var(--n, 8) * .48)));
  line-height: var(--leading-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--color-placeholder);
}
.hp-finale, .fascia-cta { grid-template-columns: minmax(0, 1fr); }
.hp-finale-tit, .fascia-cta h2 { justify-self: stretch; }   /* larghi quanto la pagina: così main.js vede se una riga esce */
.fascia-cta h2 { font-size: min(var(--text-heading-lg), calc((100vw - 2 * var(--spacing-gutter)) / (var(--n, 8) * .48))); }
:is(.hp-finale-tit, .fascia-cta h2) .riga > span { color: var(--color-placeholder); }
/* Ogni riga sale e, appena arrivata, passa dal grigio al bianco */
:is(.hp-finale-tit, .fascia-cta h2).is-inview .riga > span {
  color: var(--color-white);
  transition:
    transform var(--transition-duration-slower) var(--ease-power4-out) calc(var(--i, 0) * var(--stagger-riga) + 100ms),
    color var(--transition-duration-slow) var(--ease-power3-out) calc(var(--i, 0) * var(--stagger-riga) + 250ms);
}

.hp-finale-sub {
  font: 700 var(--text-heading-2xs)/1.05 var(--font-testo);
  letter-spacing: -.01em;
  max-width: 20ch;
}

/* ============================================================
   11. EVENTO
   ============================================================ */
.evento-griglia {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: calc(var(--spacing) * 10);
  align-items: start;
}
.evento-dati {
  grid-column: 1 / span 6;
  display: grid;
  gap: var(--spacing-fluid-sm);
}
.evento-dati .label { color: var(--color-accent); padding-top: var(--spacing-fluid-xs); border-top: 1px solid var(--color-line); }
.evento-data {
  font: 700 var(--text-heading-sm)/var(--leading-heading) var(--font-testo);
  letter-spacing: -.03em;
  max-width: 14ch;
}
.evento-luogo {
  font: 700 var(--text-heading-2xs)/1.05 var(--font-testo);
  letter-spacing: -.01em;
}
.evento-orari {
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
}
/* Mappa cliccabile → Google Maps */
.evento-mappa {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  margin-top: var(--spacing-fluid-xs);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-placeholder);
}
.evento-mappa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(.92) contrast(.9);   /* mappa scura, in linea con il sito */
  pointer-events: none;
}
.evento-mappa-link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-fluid-sm);
}
.evento-mappa-link:hover .btn { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.evento-mappa.in-attesa {
  display: grid;
  align-content: end;
  gap: calc(var(--spacing) * 2);
  padding: var(--spacing-fluid-sm);
  color: var(--color-gray);
}
.evento-mappa.in-attesa p { font: 500 var(--text-body-md)/var(--leading-body) var(--font-testo); max-width: 30ch; }

.evento-testo {
  grid-column: 8 / -1;
  display: grid;
  gap: var(--spacing-fluid-lg);
  justify-items: start;
}
.evento-testo p { font: 500 var(--text-body-lg)/1.3 var(--font-testo); max-width: 52ch; }

/* Programma: righe numerate "[ 01 ]" separate da linee sottili */
.programma { counter-reset: riga; border-top: 1px solid var(--color-line); }
.programma-riga {
  counter-increment: riga;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: baseline;
  padding: var(--spacing-fluid-sm) 0;
  border-bottom: 1px solid var(--color-line);
}
.programma-riga::before {
  content: "[ " counter(riga, decimal-leading-zero) " ]";
  grid-column: 1 / span 2;
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  letter-spacing: .02em;
}
.programma-ora {
  grid-column: 3 / span 2;
  font-family: var(--font-display);
  font-weight: var(--font-condensed-weight);
  font-size: var(--text-heading-2xs);
  line-height: 1;
  text-transform: uppercase;
}
.programma-riga > div:last-child {
  grid-column: 5 / -1;
  font: 700 var(--text-heading-xs)/var(--leading-heading) var(--font-testo);
  letter-spacing: -.03em;
}

/* ============================================================
   12. LINE-UP
   ============================================================ */
/* Sezioni raggiungibili dal sottomenu: padding più corto e, saltando con
   l'ancora, la pagina si ferma sul titolo della sezione (foto subito visibili). */
body[data-page="lineup"] .sezione[id] {
  padding-top: var(--spacing-fluid-2xl);
  scroll-margin-top: calc(var(--header-height-solid) + var(--submenu-height) - var(--spacing-fluid-2xl) + var(--spacing-fluid-sm));
}

/* ============================================================
   13. HALL OF FAME
   ============================================================ */
.hof-edizione,
.hof-stat-sezione {
  padding: var(--spacing-fluid-3xl) var(--spacing-gutter);
  scroll-margin-top: calc(var(--header-height-solid) + var(--submenu-height) - var(--spacing-fluid-3xl) + var(--spacing-fluid-sm));
}
.hof-edizione + .hof-edizione { border-top: 1px solid var(--color-line); }

.hof-num {
  margin-bottom: var(--spacing-fluid-xl);
  font-family: var(--font-display);
  font-weight: var(--font-condensed-weight);
  font-size: min(var(--text-heading-md), calc((100vw - 2 * var(--spacing-gutter)) / (var(--n, 8) * .48)));
  line-height: var(--leading-display-md);
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.hof-card {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--spacing-fluid-lg);
  align-items: end;
}
.hof-foto {
  grid-column: 1 / span 4;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  border-radius: 0;                     /* foto con angoli squadrati */
}
.hof-info {
  grid-column: 6 / -1;
  display: grid;
  gap: var(--spacing-fluid-xs);
}
.hof-vincitore-label {
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-accent);
}
.hof-vincitore-label::before { content: "[ "; }
.hof-vincitore-label::after  { content: " ]"; }
.hof-vincitore {
  margin-bottom: var(--spacing-fluid-md);
  font-family: var(--font-display);
  font-weight: var(--font-condensed-weight);
  font-size: min(var(--text-heading-lg), calc((100vw - 2 * var(--spacing-gutter)) / (var(--n, 8) * .48)));
  line-height: var(--leading-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.hof-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2) var(--spacing-fluid-sm);
  padding: var(--spacing-fluid-xs) 0;
  border-top: 1px solid var(--color-line);
  font: 700 var(--text-heading-2xs)/1.05 var(--font-testo);
  letter-spacing: -.01em;
}
.hof-esito {
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2.5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xs);
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.hof-crediti {
  padding-top: var(--spacing-fluid-xs);
  border-top: 1px solid var(--color-line);
  font: 500 var(--text-body-md)/var(--leading-body) var(--font-testo);
}
.hof-crediti strong {
  display: inline-block;
  min-width: 5.5rem;
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.hof-tabellone-tit {
  margin: var(--spacing-fluid-2xl) 0 var(--spacing-fluid-sm);
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.hof-tabellone-tit::before { content: "[ "; }
.hof-tabellone-tit::after  { content: " ]"; }

/* Tabellone: colonne dei round, vincitore evidenziato */
.tb-scroll { overflow-x: auto; padding-bottom: var(--spacing-fluid-sm); -webkit-overflow-scrolling: touch; }
/* più altezza: ogni sfida degli ottavi ha aria sopra e sotto */
.tb { display: flex; min-width: 820px; min-height: 900px; }
.tb-round { flex: 1 0 205px; display: flex; flex-direction: column; }
.tb-head {
  height: 2rem;
  padding-inline: 15px;
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-accent);
}
.tb-body { flex: 1; display: flex; flex-direction: column; }
.tb-item { flex: 1 1 0; display: flex; align-items: center; position: relative; padding: calc(var(--spacing) * 2.5) 15px; }
.match {
  position: relative;
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-black);
}
/* il fondo del vincitore segue gli angoli (senza tagliare i connettori) */
.m-row:first-child { border-radius: calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0; }
.m-row:last-child  { border-radius: 0 0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px); }
.m-row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);
  font: 500 var(--text-body-md)/var(--leading-body) var(--font-testo);
}
.m-row + .m-row { border-top: 1px solid var(--color-line); }
/* chi perde: grigio chiaro · chi passa: bianco · il campione: giallo */
.m-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--color-white), transparent 50%); }
.m-row.win { background: color-mix(in srgb, var(--color-white), transparent 90%); }
.m-row.win .m-name { color: var(--color-white); font-weight: 700; }
.m-row.campione .m-name { color: var(--color-accent); }
/* freccia "passa il turno" (non c'è nella finale) */
.m-adv {
  flex: none;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--color-accent);
}
.tb-round:not(:last-child) .match::after {
  content: ""; position: absolute; top: 50%; right: -15px; width: 15px; height: 1px; background: var(--color-line);
}
.tb-round:not(:first-child) .match::before {
  content: ""; position: absolute; top: 50%; left: -15px; width: 15px; height: 1px; background: var(--color-line);
}
.tb-round:not(:first-child) .tb-item::before {
  content: ""; position: absolute; left: 0; top: 25%; height: 50%; width: 1px; background: var(--color-line);
}

/* Statistiche: sezione chiara, numeri grandi */
.hof-stat-sezione {
  --color-background: var(--color-white);
  --color-text: var(--color-black);
  background: var(--color-background);
  color: var(--color-text);
}
.hof-stat-sezione .titolo-sezione::before { color: var(--color-text); }
.stat-griglia {
  display: grid;
  gap: var(--spacing-fluid-2xl) var(--spacing-fluid-2xl);   /* colonne ben separate */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat-tit {
  padding-bottom: var(--spacing-fluid-xs);
  border-bottom: 1px solid var(--color-line);
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.stat-tit::before { content: "[ "; }
.stat-tit::after  { content: " ]"; }
.stat-riga {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-fluid-sm);
  padding: calc(var(--spacing) * 3) 0;
  border-bottom: 1px solid var(--color-line);
}
.stat-nome { font: 500 var(--text-body-md)/var(--leading-body) var(--font-testo); }
.stat-val {
  display: flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 2);
  font-family: var(--font-display);
  font-weight: var(--font-condensed-weight);
  font-size: var(--text-heading-xs);     /* numeri grandi */
  line-height: 1;
}
.stat-extra {
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-muted);
}

/* ============================================================
   15. NEWS
   ============================================================ */
.lista-news { display: grid; max-width: none; border-top: 1px solid var(--color-line); }
.news-card {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--spacing-fluid-sm);
  padding: var(--spacing-fluid-lg) 0;
  border-bottom: 1px solid var(--color-line);
}
.news-card > * { grid-column: 4 / -1; }
.news-data {
  grid-column: 1 / span 3;
  grid-row: 1 / span 4;
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--color-accent);
}
.news-titolo { font: 700 var(--text-heading-xs)/var(--leading-heading) var(--font-testo); letter-spacing: -.03em; }
.news-card p { max-width: 68ch; font: 500 var(--text-body-md)/var(--leading-body) var(--font-testo); }
.news-card img { width: 100%; max-height: 32rem; object-fit: cover; border-radius: 0; }
.news-card .card-link { justify-self: start; }
.news-widget { margin-bottom: var(--spacing-fluid-xl); }
.news-instagram { display: flex; justify-content: center; }
.news-instagram blockquote { margin: 0 auto !important; }

/* ============================================================
   16. DOPPIA BANDA SCORREVOLE GIGANTE (iniettata da main.js)
   Due bande gialle ruotate che si incrociano sul passaggio tra
   l'ultima sezione nera e il footer, e si fondono nel footer.
   ============================================================ */
.c-rails {
  position: relative;
  z-index: 3;
  font-size: var(--text-marquee);
  margin-top: -.35em;                     /* la banda A sborda sopra la sezione nera */
  margin-bottom: -.45em;                  /* la banda B si appoggia sul footer giallo */
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
}
.prima-delle-bande { padding-bottom: calc(var(--spacing-fluid-3xl) + var(--text-marquee) * .5) !important; }

.c-rail {
  width: 110vw;
  margin-left: -5vw;
  padding-block: .12em;
  overflow: visible;
  background: var(--color-accent);
  color: var(--color-black);
  border-block: 1px solid color-mix(in srgb, var(--color-black), transparent 70%);
}
.c-rail--a { transform: rotate(-2deg); }
.c-rail--b {
  position: relative;
  transform: rotate(1.5deg);
  margin-top: -.2em;                      /* le bande si incrociano sui bordi senza coprire le lettere */
}
.c-rail__traccia {
  display: flex;
  width: max-content;
  will-change: transform;
}
.c-rail--a .c-rail__traccia { animation: rail-sx 35s linear infinite; }
.c-rail--b .c-rail__traccia { animation: rail-dx 45s linear infinite; }
.c-rail__gruppo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: .3em;
  padding-inline-end: .3em;
}
.c-rail_text {
  font: var(--font-condensed-weight) 1em/var(--leading-display) var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.02em;
  white-space: nowrap;
  padding-block: .04em;                   /* anti-clipping: nessuna lettera tagliata */
}
.c-rail__logo {
  height: .82em;                          /* stesso peso visivo del testo della banda */
  width: auto;
  filter: brightness(0);
}
.c-rail__blocco {
  display: grid;
  font: 700 .11em/1 var(--font-testo);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .02em;
  white-space: nowrap;
}
@keyframes rail-sx { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rail-dx { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* compatibilità con eventuali vecchie bande */
@keyframes rail { to { transform: translateX(-50%); } }

/* ============================================================
   17. FOOTER (costruito da main.js) — blocco giallo pieno
   ============================================================ */
.site-footer {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--spacing-fluid-2xl);
  padding: calc(var(--spacing-fluid-2xl) + var(--text-marquee) * .55) var(--spacing-gutter) var(--spacing-fluid-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.footer-col {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--spacing-fluid-xs);
}
.footer-biglietti { grid-column: 1 / span 4; }
.footer-menu { grid-column: 5 / span 4; }
.footer-social { grid-column: 9 / -1; }
/* Titoletto di una parola + punto: "Biglietti." "Menu." "Social." */
.footer-tit {
  margin-bottom: var(--spacing-fluid-xs);
  font: 700 var(--text-heading-sm)/var(--leading-heading) var(--font-testo);
  letter-spacing: -.03em;
}
.footer-frase {
  max-width: 24ch;
  margin-bottom: var(--spacing-fluid-xs);
  font: 500 var(--text-body-md)/var(--leading-body) var(--font-testo);
}
.footer-col a:not(.btn) {
  font: 500 var(--text-body-md)/var(--leading-body) var(--font-testo);
}

.footer-col .btn { width: 100%; max-width: 22rem; }

/* Logo piccolo, appena sopra il blocco "Estd. 2016 / Italia / ©Mic Tyson" */
.footer-logo {
  width: 6rem;
  height: auto;
  margin-bottom: var(--spacing-fluid-xs);
  filter: brightness(0);                  /* logo in nero pieno sul giallo */
}
.footer-info {
  grid-column: 9 / -1;
  align-self: end;
  display: grid;
  justify-items: start;
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.footer-note {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-fluid-sm);
  padding-top: var(--spacing-fluid-sm);
  border-top: 1px solid var(--color-line);
  font: 500 var(--text-body-sm)/var(--leading-label) var(--font-testo);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* ============================================================
   18. TOAST
   ============================================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--spacing-fluid-xl);
  z-index: 1100;
  padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 6);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: 500 var(--text-body-md)/var(--leading-body) var(--font-testo);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 1rem);
  transition:
    opacity var(--transition-duration) var(--ease),
    transform var(--transition-duration) var(--ease-power3-out),
    visibility 0s linear var(--transition-duration);
}
.toast.visibile {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    opacity var(--transition-duration) var(--ease),
    transform var(--transition-duration) var(--ease-power3-out);
}

/* ============================================================
   19. REVEAL ALLO SCROLL (classi aggiunte da main.js)
   ============================================================ */
/* I titoli giganti restano nascosti finché non vengono spezzati in righe,
   così non "lampeggiano" prima dell'animazione (sicurezza: .fx-pronto). */
.js:not(.fx-pronto) :is(.hp-hero-titolo, .intestazione-pagina h1, .cs-titolo):not(.is-split) { visibility: hidden; }

.riga > span {
  transition: transform var(--transition-duration-slower) var(--ease-power4-out);
  transition-delay: calc(var(--i, 0) * var(--stagger-riga) + 100ms);
}
/* le righe partono completamente sotto la maschera: con 110% la cima delle
   lettere spuntava dal margine di sicurezza e si vedeva una "linea" sotto il titolo */
.is-split:not(.is-inview) .riga > span { transform: translateY(150%); }

[data-reveal] {
  transition:
    opacity var(--transition-duration-slower) var(--ease-power3-out),
    transform var(--transition-duration-slower) var(--ease-power4-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal]:not(.is-inview) { opacity: 0; transform: translateY(1.25rem); }

/* ============================================================
   20. COMING SOON (pagina "in costruzione")
   ============================================================ */
.cs {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  position: relative;
  overflow: hidden;
}
.cs-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, var(--overlay-top) 0%, var(--overlay-mid) 45%, var(--overlay-bottom) 100%),
    url('../assets/img/sfondo-pubblica.avif') center/cover no-repeat;
  transform: scale(1.08);
  transition: transform var(--transition-duration-cinematic) var(--ease-power3-out);
}
.is-loaded .cs-bg { transform: scale(1); }
.cs-header {
  position: relative;
  z-index: 2;
  min-height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-block: var(--spacing-gutter);
}
.cs-info { display: grid; gap: calc(var(--spacing) * 1); padding-top: calc(var(--spacing) * 1); }
.cs-logo { height: clamp(3.5rem, 2.6rem + 4.5vw, 6.5rem); width: auto; }
.cs-contenuto {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: calc(var(--spacing) * 10);
  align-content: end;
  padding-top: var(--spacing-fluid-2xl);
  padding-bottom: var(--spacing-fluid-xl);
}
.cs-titolo {
  grid-column: 1 / span 8;
  align-self: end;
  font-family: var(--font-display);
  font-weight: var(--font-condensed-weight);
  font-size: min(calc((100vw - 2 * var(--spacing-gutter)) / (var(--n, 8) * .48)), 22svh);
  line-height: var(--leading-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.cs-sotto {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-weight: var(--font-condensed-weight);
  font-size: var(--text-heading-2xs);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-accent);
}
.cs-azioni {
  grid-column: 9 / -1;
  align-self: end;
  display: grid;
  gap: var(--spacing-fluid-lg);
}
.cs-blocco {
  display: grid;
  gap: var(--spacing-fluid-sm);
  padding-top: var(--spacing-fluid-xs);
  border-top: 1px solid var(--color-line);
}
.cs-social { display: flex; align-items: center; gap: calc(var(--spacing) * 2); }
.cs-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-size);
  height: var(--control-size);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  transition: border-color var(--transition-duration) var(--ease);
}
.cs-social a:hover { border-color: currentColor; }
.cs-social img { height: 1.5rem; width: auto; transition: transform var(--transition-duration-fast) var(--ease); }
.cs-social a:hover img { transform: scale(1.1); }
/* Sulla coming soon la doppia banda chiude lo schermo, più bassa */
.cs .c-rails {
  font-size: min(var(--text-marquee), 8svh);
  margin: .3em 0 .35em;
}
.cs .c-rail--b { margin-top: -.08em; }
.cs .cs-contenuto { padding-bottom: var(--spacing-fluid-sm); }

/* ============================================================
   21. RESPONSIVE (breakpoint 1000px e 700px)
   ============================================================ */
@media (max-width: 1000px) {
  .nav-desktop { display: none; }
  .hamburger { display: inline-flex; }

  .intestazione-pagina h1 { grid-column: 1 / -1; grid-row: 2; }
  .intestazione-pagina p { grid-column: 1 / span 7; grid-row: 3; }

  .hp-hero-titolo { grid-column: 1 / -1; grid-row: 2; }
  .hp-hero-info { grid-column: 1 / span 7; grid-row: 3; }
  .hp-hero .btn-biglietti { grid-column: 1 / span 7; grid-row: 4; }

  .hp-intro-testo { grid-column: 1 / -1; }
  .hp-intro-media { grid-column: 1 / -1; justify-self: start; }

  .sezione--split > .titolo-sezione,
  .sezione--split > :not(.titolo-sezione) { grid-column: 1 / -1; }
  .evento-dati, .evento-testo { grid-column: 1 / -1; }

  .hof-foto { grid-column: 1 / span 5; }
  .stat-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hof-info { grid-column: 6 / -1; }

  /* mobile: logo a sinistra, bottone biglietti sempre visibile + hamburger a destra */
  .site-header { gap: calc(var(--spacing) * 2); }
  .header-cta { padding-inline: calc(var(--spacing) * 3); }
  /* logo del menu più piccolo su mobile (−30%) */
  .header-logo img,
  .site-header.solid .header-logo img { height: calc((var(--header-height) - var(--spacing-fluid-sm)) * .7); }

  .hp-hero .hp-pill { grid-column: 1 / span 7; }
  .hp-estd { grid-column: 8 / -1; justify-items: end; text-align: right; }

  .footer-biglietti { grid-column: 1 / -1; }
  .footer-menu { grid-column: 1 / span 6; }
  .footer-social { grid-column: 7 / -1; }
  .footer-info { grid-column: 1 / -1; }

  .cs-titolo, .cs-azioni { grid-column: 1 / -1; }
  .cs-azioni { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (max-width: 700px) {
  .intestazione-pagina::before { display: none; }   /* come la hero: su mobile il titolo è da solo */
  .hp-hero .hp-pill, .hp-estd { display: none; }   /* su mobile il titolo è da solo */
  .intestazione-pagina p { max-width: none; }   /* il sottotitolo va a tutta larghezza */
  .intestazione-pagina p,
  .hp-hero-info,
  .hp-hero .btn-biglietti { grid-column: 1 / -1; }

  body[data-page="lineup"] .griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .programma-riga::before { grid-column: 1 / span 3; }
  .programma-ora { grid-column: 4 / span 3; }
  .programma-riga > div:last-child { grid-column: 1 / -1; margin-top: var(--spacing-fluid-xs); }

  .hof-foto, .hof-info { grid-column: 1 / -1; }
  .stat-griglia { grid-template-columns: minmax(0, 1fr); }
  /* tabelloni più compatti su mobile (larghezza delle colonne invariata) */
  .tb { min-height: 640px; }
  .tb-item { padding-block: calc(var(--spacing) * 1.5); }
  .m-row {
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2.5);
    font-size: var(--text-body-sm);
    line-height: var(--leading-label);
  }
  .m-adv { border-top-width: 4px; border-bottom-width: 4px; border-left-width: 5px; }
  .hof-foto { max-width: 20rem; }

  .news-card > *, .news-data { grid-column: 1 / -1; grid-row: auto; }

  .footer-menu,
  .footer-social { grid-column: 1 / -1; }
  .footer-note { flex-direction: column; }
  .menu-pie { flex-direction: column; align-items: flex-start; }

  .cs-azioni { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hp-hero-media, .is-loaded .hp-hero-media,
  .cs-bg, .is-loaded .cs-bg { transform: none; transition: none; }
  .c-rail__traccia { animation: none !important; }
  /* blocca la striscia automatica e la parallasse di main.js */
  .hp-marquee-track, .parallax, .parallax-fixed, .hp-intro-media img { transform: none !important; animation: none !important; }
  .hp-scroll.hp-marquee-on { overflow-x: auto; }
  .riga > span, [data-reveal], .menu-links a { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Telefono in orizzontale: meno ingombro in fondo al menu, più spazio alle voci */
@media (max-height: 500px) {
  .menu-logo { display: none; }
  .menu-pie { padding-top: var(--spacing-fluid-xs); }
}

/* Freccia "si apre in una nuova scheda" (voce Merch → shop) */
.icona-esterno {
  display: inline-block;
  width: .7em;
  height: .7em;
  margin-left: .25em;
  vertical-align: .05em;
}
.menu-links .icona-esterno { width: .4em; height: .4em; margin-left: .06em; vertical-align: .38em; }
.nascosto-visivo {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}