/* === BASE (reset, tipografia, variabili) — auto-partition draft === */

/* ===== SOURCE: style.css ===== */
/* ==================================================
   EUTOPIA — STYLE.CSS (versione corretta, solo modifiche necessarie)
   - Mantiene struttura e sezioni originali
   - Sfondo fisso stabile su mobile (dvh)
   - INSET: solo video (desktop 16:9 / mobile 9:16), senza fallback img
   - Rimosse duplicazioni e regole in conflitto minime
   ================================================== */

/* =========================
   Palette, font e variabili
   ========================= */
:root{
  --bg: #000000;
  --fg: #f5f5f5;
  --muted: #c6c6c6;
  --accent-a: #00ffff;
  --accent-b: #ff00ff;

  --space-1: clamp(8px, 1.2vw, 14px);
  --space-2: clamp(14px, 1.8vw, 22px);
  --space-3: clamp(22px, 3vw, 36px);
  --space-4: clamp(32px, 5vw, 64px);
  --radius: 14px;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --sponsor-h: clamp(90px, 12vw, 150px);
}

html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  text-align: center;
  display: flex;               /* sticky footer */
  flex-direction: column;      /* sticky footer */
}

/* Layering dei contenuti sopra allo sfondo */
header, main, footer{ position: relative; z-index: 1; }

/* Sticky footer: main prende lo spazio, footer va in fondo */
main{ flex: 1 0 auto; }

/* =========================
   Tipografia di base
   ========================= */
h1, h2, h3{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 var(--space-2);
}

h2{ font-size: clamp(18px, 3.2vw, 28px); }

h3{ font-size: clamp(16px, 2.4vw, 22px); }

/* valori safe-area per iOS */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
}

body{
  padding-top: calc(var(--safe-top) + var(--topbar-h-mob));
}
@media (min-width: 768px){
  body{
    padding-top: calc(var(--safe-top) + var(--topbar-h-dsk));
  }
}

/* il resto della pagina deve essere nero, così non si vede nulla “sotto” */
html, body{ background:#000; }

main{ margin-top: 0; padding-top: 0; }

/* ===== SOURCE: index.css ===== */
/* ======================================================
   INDEX.CSS — Home page only
   Focus: stabilità iOS, nessuna “riga”, hero anti-shrink,
   scroll-cue “rune ring”, carosello stabile, gradient nel hero.
   ====================================================== */

:root{
  --topbar-h: 72px;
  --vh: 1vh;
  --bg: #000;
  --text: #fff;
  --maxw: 1280px;
}
/* Global: niente scroll orizzontale né overscroll in X */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: clip;              /* fallback moderno (meglio di hidden) */
  overscroll-behavior-x: none;   /* evita “trascinamenti” a catena */
}

/* Le sezioni dell’hero non devono poter estendersi in X */
.fold,
.inset-hero,
.ticket-strap,
.events-carousel{
  overflow-x: clip;
}

/* Il viewport del carosello non deve “sbordare” e gestisce solo pan verticale lato UA */
.ec-viewport{
  overflow: hidden;
  touch-action: pan-y;           /* lascia lo scroll verticale alla pagina */
}
/* Hero media responsive */
.home-poster{ display:block; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; }
.home-poster img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Mobile / portrait → 9:16 */
@media (max-width:820px), (orientation: portrait){
  .home-poster{ aspect-ratio:9/16; }
}
/* --- Nascondi eventuale widget Weglot default (fallback) --- */
.weglot-container, #weglot_here, .wg-default { display:none !important; }


.pc-viewport { touch-action: pan-y; }
.ec-track, .ec-card { touch-action: pan-y; }
/* ====== FIX CAROSELLO EVENTI (no glow, spazi corretti) ====== */

/* 1) Niente gradiente/bordo sul viewport del carosello */
.events-carousel .ec-viewport{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: clamp(10px,1.6vw,14px); /* lasciamo solo il padding */
}

/* 2) Ombra delle card solo verso il basso (niente alone laterale) */
.events-carousel .ec-card{
  box-shadow:
    0 18px 36px rgba(0,0,0,.45),      /* ombra sotto */
    inset 0 0 0 1px rgba(255,255,255,.08); /* filo chiaro sottile */
}

/* 3) Distanza tra le card: un filo più stretta e uniforme */
.events-carousel .ec-track{
  gap: clamp(12px, 1.6vw, 16px);
}

/* 4) Se stai usando il “riquadro info” sotto alla foto, non farlo
      spingere in basso: margine compatto e nessuna ombra aggiuntiva */
.ec-info,
.ec-meta,
.ec-footer{
  margin-top: 8px !important;
  box-shadow: none !important;
  background: none !important;   /* niente rettangolo scuro aggiuntivo */
  border: 0 !important;
  padding: 0 !important;
}

/* Titoli e testo leggermente più compatti per non “crescere” in altezza */
.ec-info h3,
.ec-meta h3{ font-size: clamp(16px,1.4vw,18px) !important; margin: 0 0 6px !important; }
.ec-info p,
.ec-meta p{ font-size: 13px !important; margin: 0 !important; }