/* =====================================================================
   BEPLANO AIRPORT — Home
   Architettura: 1) Token  2) Base  3) Componenti riusabili  4) Sezioni
   Nessun valore "magico": tutto deriva dai token qui sotto.
   ===================================================================== */

/* Mona Sans: font variabile caricato da Google Fonts (vedi <link> in index.html).
   Asse peso 200..900 disponibile; fallback grotesk se la rete non risponde. */

/* ----------------------------- 1) TOKEN ----------------------------- */
:root {
  /* Colori (dalle variabili Figma) */
  --blue-dark:    #304C5A;
  --blue-primary: #5C89A6;
  --blue-light:   #779FB5;
  --blue-white:   #BFCED6;
  --yellow-light: #DCC681;
  --yellow-dark:  #6C571B;
  --neutro-dark:  #4F4B43;
  --neutro-primary: #908A7E;

  /* Superfici / sfondi */
  --bg:           #1a1a18;
  --surface:      rgba(255, 255, 255, .05);  /* card neutra */
  --surface-frost: rgba(255, 255, 255, .30); /* pill smerigliata */
  --footer-bg:    #2a2a28;
  --footer-bar:   #4f4e4e;
  --ticket-bg:    #ffffff;
  --ticket-media: #e9eef2;  /* pannello immagine sx del biglietto */
  --ticket-perf:  #1e1e1c;  /* linea di perforazione + frecce ▼▲ */
  --ink:          #ffffff;  /* testo su scuro  */
  --ink-dark:     #111111;  /* testo su chiaro */

  /* Tipografia (stili Figma → token Mona Sans) */
  --font: "Mona Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  /* Scala fluida tra 360px e 1280px di viewport (poi restano fissi ai due estremi) */
  --fs-titlone: clamp(46px, 24.09px + 6.09vw, 102px); /* TITOLONE    — Regular (hero pagina Spazi) */
  --fs-display: clamp(44px, 35.78px + 2.28vw, 65px); /* TITOLI      — Regular   */
  --fs-heading: clamp(28px, 24.87px + 0.87vw, 36px); /* TITOLETTO   — ExtraBold */
  --fs-subtitle: clamp(20px, 20px + 1.09vw, 30px); /* Sottotitolo — Regular   */
  --fs-body: clamp(16px, 14.43px + 0.43vw, 18px); /* Paragrafo   — Regular   */
  --fs-ui:   clamp(16px, 14.43px + 0.43vw, 20px); /* Bottoni/Nav             */
  --lh-tight: 1;
  --lh-body: 1.6;

  /* Pesi (asse variabile Mona Sans) */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-extrabold: 800;

  /* Spaziatura (scala 8) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px; --s-6: 64px; --s-7: 96px; --s-8: 128px;

  /* Raggi */
  --r-card: 32px;
  --r-pill: 500px;

  /* Layout */
  --container: 1280px;
  --gutter: 24px;
  --header-h: 106px; /* altezza header: il video gli scorre dietro */
  --ctrl-h: 46px; /* altezza unica di TUTTI i controlli pillola: .btn, .pill, .nav, hamburger */

  --blur: blur(7.5px);

  /* Trattini condivisi (separatori .section + anello di .pill__mark).
     Le border CSS "dashed" non sono regolabili: usiamo repeating-gradient
     (lineare per le righe rette, conico per il cerchio) così trattino, distanza
     e spessore vengono dalla STESSA unità in entrambi i contesti. */
  --dash-unit:  10;                     /* numero "puro": trattino = gap = 10 (px o deg secondo il contesto) */
  --dash-len:     calc(var(--dash-unit) * 1px); /* lunghezza trattino — linee rette */
  --dash-gap:     calc(var(--dash-unit) * 1px); /* distanza tra trattini — linee rette */
  --dash-len-deg: calc(var(--dash-unit) * 1deg); /* lunghezza trattino — anello (cerchio) */
  --dash-gap-deg: calc(var(--dash-unit) * 1deg); /* distanza tra trattini — anello (cerchio) */
  --dash-thick: 2px;   /* spessore: linea e anello */
  --dash-color: rgba(255, 255, 255, .30);
}

/* ----------------------------- 2) BASE ------------------------------ */
* { box-sizing: border-box; }

/* Selezione testo */
::selection { background: var(--blue-light); color: var(--ink-dark); }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
a[href^="mailto:"] { text-decoration: underline; } /* mail sempre sottolineata, ovunque compaia */
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon { width: 100%; height: 100%; display: block; color: currentColor; }

/* -------------------------- 3) COMPONENTI --------------------------- */

/* --- Bottone pillola (un'unica base + modificatori) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ctrl-h);
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-size: var(--fs-ui);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  /* Hover: l'overlay bianco/nero è sovrapposto allo sfondo base via background-image,
     così la tinta della variante resta intatta (vedi varianti "Hover" del Figma). */
  background-repeat: no-repeat;
  transition: background-color .2s ease, background-image .2s ease;
}

/* Nero / ghost: superficie chiara che si schiarisce */
.btn--ghost { background-color: rgba(255, 255, 255, .05); color: var(--ink); }
.btn--ghost:hover { background-color: rgba(255, 255, 255, .15); }

/* Blu e Giallo: la tinta resta, in hover si sovrappone un velo bianco al 15% */
.btn--blue  { background-color: var(--blue-dark);  color: var(--ink); }
.btn--yellow{ background-color: var(--yellow-dark); color: var(--ink); }
.btn--blue:hover,
.btn--yellow:hover {
  background-image: linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .15));
}

/* Bianco / light: superficie scura su fondo chiaro che si scurisce */
.btn--light { background-color: rgba(0, 0, 0, .1); color: var(--ink-dark); }
.btn--light:hover { background-color: rgba(0, 0, 0, .3); }

/* Prenota (frost blu): velo bianco in hover */
.btn--book  { background-color: rgba(116, 185, 230, .5); color: var(--ink); font-weight: var(--w-bold); backdrop-filter: var(--blur); }
.btn--book:hover { background-image: linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .15)); }

/* "Contattaci" (card + header) è un bottone con href mailto: niente
   sottolineatura come i link mail testuali. */
.btn[href^="mailto:"] { text-decoration: none; }

/* --- Pill con "mark" (selettore brand: AIRPORT / ACADEMY / BRAND) --- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--ctrl-h);
  padding: 0 22px 0 0;     /* niente margine intorno al mark: resta a filo col bottone */
  border-radius: var(--r-pill);
  font-size: var(--fs-ui);
  line-height: 1;
  white-space: nowrap;
}
.pill--frost { background: var(--surface-frost); color: var(--ink); backdrop-filter: var(--blur); }
.pill__mark {
  display: grid;
  place-items: center;
  position: relative;          /* contiene l'anello ::before */
  width: var(--ctrl-h); height: var(--ctrl-h);
  padding: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);  /* fallback per usi generici senza colore di brand */
  color: var(--ink);
  flex: none;
}
/* Anello tratteggiato: stesse caratteristiche (trattino/gap/spessore/colore) dei
   separatori .section, qui in versione conica per seguire la curva del cerchio.
   conic-gradient disegna i trattini, radial-gradient in mask li ritaglia ad anello
   sottile (spessore --dash-thick) invece di riempire l'intero cerchio. */
.pill__mark::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--dash-color) 0 var(--dash-len-deg),
    transparent var(--dash-len-deg) calc(var(--dash-len-deg) + var(--dash-gap-deg)));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--dash-thick)), #fff calc(100% - var(--dash-thick)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--dash-thick)), #fff calc(100% - var(--dash-thick)));
  pointer-events: none;
}
/* Colore del mark per brand (selettore sedi: AIRPORT / ACADEMY / BRAND) */
.pill__mark--airport { background: var(--blue-primary); }
.pill__mark--academy { background: var(--yellow-light); }
.pill__mark--house   { background: var(--neutro-dark); }

/* Hover delle pill cliccabili (selettore brand): leggero schiarimento come da Figma */
a.pill, button.pill { cursor: pointer; transition: background-color .2s ease; }
/* La pill "AIRPORT" è un <button> (apre solo il ventaglio, non naviga):
   azzera lo stile nativo del button così resta identica alle pill <a>. */
button.pill { appearance: none; -webkit-appearance: none; border: 0; font-family: inherit; }
a.pill--frost:hover, button.pill--frost:hover { background: rgba(255, 255, 255, .42); }

/* --- Bottone con freccia (terzo tipo, variante "Colore5": ↗ ABOUT → → ABOUT) --- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 6px 6px 26px;          /* etichetta a sx, cerchio a dx */
  border-radius: var(--r-pill);
  font-size: var(--fs-ui);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: rgba(255, 255, 255, .2);
  transition: background-color .2s ease;
}
.cta:hover { background: rgba(255, 255, 255, .5); }
.cta__label { line-height: 1; }
.cta__mark {
  display: grid;
  place-items: center;
  /* stessa altezza di .btn (fs-ui + 30px di padding): cerchio = fs-ui + 18px, + 6px di padding sopra/sotto su .cta */
  width: calc(var(--fs-ui) + 18px); height: calc(var(--fs-ui) + 18px);
  padding: 9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);     /* scuro, non nero pieno */
  color: var(--ink);
  flex: none;
  transition: transform .25s ease, background-color .2s ease;
}
.cta:hover .cta__mark {
  background: rgba(0, 0, 0, .7);
  transform: rotate(45deg);           /* ↗ ruota fino a → */
}

/* --- Intestazione di sezione (overline + titolo + azione opzionale) --- */
/* Separatore in alto: trattini regolabili via --dash-* (vedi :root) */
.section {
  padding-block: var(--s-7);
  background:
    repeating-linear-gradient(90deg,
      var(--dash-color) 0 var(--dash-len),
      transparent var(--dash-len) calc(var(--dash-len) + var(--dash-gap)))
    top / 100% var(--dash-thick) no-repeat;
}
.section:first-of-type { background: none; }
.section:last-of-type { padding-bottom: 0; } /* nessuno spazio sotto l'ultima sezione, prima del footer */
.section__head {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--s-6);
}
.overline { color: var(--blue-light); font-size: var(--fs-subtitle); text-transform: uppercase; }
.title    { font-size: var(--fs-display); font-weight: var(--w-regular); line-height: var(--lh-tight); text-transform: uppercase; }
/* Stile condiviso del "sottotitolo": stessa tipografia per card__title e hero__subtitle */
.card__title, .hero__subtitle {
  font-size: var(--fs-subtitle);
  font-weight: var(--w-regular);
  line-height: 1.15;
}
/* Titoli dei gruppi eventi ("Gli eventi in programma"/"passati"): etichetta
   piccola e tutta maiuscola (più piccola del sottotitolo, usa il token UI). */
.subhead {
  font-size: var(--fs-ui);
  font-weight: var(--w-medium);
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
/* Quando seguono due gruppi (in programma + conclusi), distanzia il secondo titolo */
.ticket-list + .subhead { margin-top: var(--s-5); }
.events__more { display: none; } /* visibile solo da mobile, vedi media query */
/* In fondo alla sezione, centrata: vedi markup, è l'ultimo figlio di .container */
.section__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
  font-size: var(--fs-body);
  text-align: center;
}

/* --- Card "spazio" (base unica; varianti via modificatore di colore) --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  max-width: 900px;
  margin-inline: auto;
}
.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--surface);
  min-width: 0; /* consente alla traccia 1fr di restringersi sotto la min-content */
}
.card--blue   { background: var(--blue-dark); }
.card--yellow { background: var(--yellow-dark); }
.card__body  { font-size: var(--fs-body); line-height: 1.3; opacity: .5; }
.card__actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: auto; padding-top: var(--s-2); }

/* La card gialla (ACADEMY) usa lo stesso layout delle altre: titolo, body e
   bottone in fondo. Cambia solo il colore di sfondo (.card--yellow sopra). */

/* --- Ticket evento (boarding pass) ---
   Ricostruisce "Biglietto Eventi.svg" (1277×401): card bianca bordo --blue-white,
   3 colonne 25%/54%/21% → pannello immagine | corpo | tagliando. Tutto fluido. */
.ticket-list { display: flex; flex-direction: column; gap: var(--s-2); }
.ticket {
  position: relative;
  display: grid;
  height: 300px; /* altezza fissa come nell'SVG, per allineare le bande */
  grid-template-columns: 27% 1fr 21%;
  background: var(--ticket-bg);
  color: var(--ink-dark);
  border-radius: var(--r-card);
  overflow: hidden;
}
/* Due bande --blue-white in alto e in basso, su corpo+tagliando (non sull'immagine) */
.ticket::before,
.ticket::after {
  content: "";
  position: absolute;
  left: 27%; right: 0;          /* parte dopo il pannello immagine */
  height: 50px;               /* 63 / 401 dell'SVG */
  background: var(--blue-white);
  pointer-events: none;
}
.ticket::before { top: 0; }
.ticket::after  { bottom: 0; }
/* Pannello immagine sx (#E9EEF2 di fallback, angoli stondati ereditati dalla card) */
.ticket__media { background: var(--ticket-media) center/cover no-repeat; }
.ticket__body {
  position: relative;
  z-index: 1;                  /* contenuto sopra le bande */
  display: flex;
  flex-direction: column;
  justify-content: center;     /* centra title-row; meta e barcode sono absolute */
  height: 100%; /* altezza fissa come nell'SVG, per allineare le bande */
  padding: 0 var(--s-4);
}
/* Stemma in coda alla riga meta, spinto a destra (come nell'SVG) */
.ticket__mark {
  width: 30px; height: 30px;
  margin-left: auto;          /* spinge lo stemma in fondo a destra della riga */
  color: var(--ink-dark);
}
.ticket__meta {
  position: absolute;
  top: 0; left: var(--s-4); right: var(--s-4);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 var(--s-4);
  font-size: var(--fs-body);
  text-transform: uppercase;
  padding: var(--s-2) 0;
  white-space: nowrap;
}
.ticket__title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.ticket__promotext { font-size: var(--fs-body); line-height: 1.2; }
.ticket__text  { font-size: var(--fs-body); max-width: 500px; }
/* Codice a barre: barre irregolari da #barcode, nero 15% come nell'SVG, in basso a sx. */
.ticket__barcode-fill { position: absolute; bottom: 0; left: var(--s-4); right: 0; }
.ticket__barcode {
  position: absolute;
  left: 0; bottom: 0;
  width: 292px;
  height: 50px;
  color: #000;
  opacity: .15;
}
/* Tagliando dx: perforazione tratteggiata + frecce ▼ (alto) e ▲ (basso) */
.ticket__stub {
  position: relative;
  z-index: 1;                  /* sopra le bande */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;     /* centra il blocco anche in verticale */
  gap: var(--s-1);
  padding: var(--s-5) var(--s-3);
  /* Stessa trama tratteggiata dei separatori .section (--dash-*), qui verticale e in nero
     (::before/::after sono già occupati dalle frecce, quindi niente border dashed nativo). */
  background:
    repeating-linear-gradient(180deg,
      var(--ticket-perf) 0 var(--dash-len),
      transparent var(--dash-len) calc(var(--dash-len) + var(--dash-gap)))
    left / var(--dash-thick) 100% no-repeat;
}
/* Frecce triangolari centrate sulla linea di perforazione */
.ticket__stub::before,
.ticket__stub::after {
  content: "";
  position: absolute;
  left: -13.5px;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
}
.ticket__stub::before { top: 0;    border-top: 20px solid var(--ticket-perf); }    /* ▼ */
.ticket__stub::after  { bottom: 0; border-bottom: 20px solid var(--ticket-perf); } /* ▲ */
.ticket__month { font-size: var(--fs-subtitle); font-weight: var(--w-medium); line-height: 1; }
.ticket__day   { font-size: var(--fs-subtitle); font-weight: var(--w-medium); line-height: 1; color: var(--blue-primary); margin-bottom: var(--s-2); }

/* --- Diagramma network (UNA PARTE) --- */
.diagram { position: relative; height: 480px; }
.diagram__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.diagram__lines line { stroke: var(--neutro-primary); stroke-width: 2; }
.diagram__core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 96px; height: 96px; padding: 24px;
  border-radius: 50%; background: var(--surface-frost); color: var(--ink);
  z-index: 1;
}
.diagram__node { position: absolute; z-index: 1; }
.diagram__node--house   { left: 6%;  top: 62%; }
.diagram__node--academy { right: 12%; top: 22%; background: var(--yellow-light); color: var(--yellow-dark); }
.diagram__node--academy .pill__mark { background: var(--yellow-dark); color: var(--yellow-light); }
.diagram__node--airport { right: 4%; top: 70%; background: var(--blue-light); }

/* --- Mappa (iframe Google Maps reso monocromo/dark come il Figma) --- */
.map {
  position: relative;
  height: 520px;
  margin-top: var(--s-6);
  overflow: hidden;
  background: var(--bg);
}
.map__frame {
  position: absolute; border: 0; display: block;
  /* invert+grayscale trasformano la mappa chiara di Google in dark monocromo */
  filter: grayscale(1) invert(0.92) contrast(0.9) brightness(0.9);
  /* l'embed "classico" non ha un parametro per nascondere i controlli: invece di
     scalare l'iframe (lo scale sgranava il raster della mappa) lo si rende più grande
     del contenitore, così i controlli (zoom, pegman, attribuzione) finiscono fuori e
     vengono ritagliati da .map (overflow:hidden) — mappa nitida a risoluzione nativa */
  left: -64px; top: -64px;
  width: calc(100% + 128px); height: calc(100% + 128px);
  pointer-events: none;
}
.map__pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 64px; height: 64px; padding: 16px;
  border-radius: 50%; background: var(--blue-primary); color: var(--ink);
  box-shadow: 0 0 0 12px rgba(92,137,166,.25);
  pointer-events: none;
}
.map__link { position: absolute; inset: 0; cursor: pointer; }

/* ----------------------------- HEADER ------------------------------- */
/* Header trasparente, sticky: il video dell'hero gli scorre dietro (vedi .hero) */
.site-header { position: sticky; top: 0; z-index: 50; padding-block: var(--s-3); background: transparent; }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.nav {
  display: flex; gap: var(--s-5); align-items: center;
  height: var(--ctrl-h);
  padding: 0 33px; border-radius: var(--r-pill);
  background: var(--surface-frost); backdrop-filter: var(--blur);
  font-size: var(--fs-ui);
  line-height: 1; /* come .btn: senza, erediterebbe 1.6 dal body e sarebbe più alto del PRENOTA */
}
.nav__link { transition: font-weight .15s ease, opacity .2s ease; }
.nav__link:hover { opacity: .7; }
.nav__link.is-active { font-weight: var(--w-extrabold); }

/* Sul video dell'hero il blur da solo lascia passare troppa luce: gli elementi
   sfocati dell'header (nav, pill brand, PRENOTA) scuriscono anche lo sfondo dietro */
.site-header .nav,
.site-header .pill--frost,
.site-header .btn--book,
.site-header .menu-toggle {
  backdrop-filter: var(--blur) brightness(80%);
}

/* --- Hamburger/X mobile + overlay menu (iniettati da app.js) --- */
/* Unico bottone circolare (stessa altezza della pill AIRPORT): contiene il Lottie
   che fa burger<->X. Nascosto su desktop, mostrato nella media query mobile.
   Quando il menu è aperto resta sopra l'overlay (z-index dell'header rialzato). */
.menu-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: var(--ctrl-h); height: var(--ctrl-h);
  padding: 6px;                /* riduce l'icona (Lottie) senza rimpicciolire il cerchio; stessa dimensione icona di prima (34px) sul cerchio più piccolo */
  border: 0; border-radius: 50%;
  background: var(--surface-frost);
  color: var(--ink);
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.menu-toggle svg { width: 100%; height: 100%; display: block; }     /* Lottie (riempie lo spazio dato dal padding) */
.menu-toggle > svg[viewBox] { width: 20px; height: 20px; fill: currentColor; } /* fallback statico */

/* Con il menu aperto: header sopra l'overlay (AIRPORT resta visibile e cliccabile;
   il bottone hamburger non si sposta, solo si morpha in X). */
body.menu-open .site-header { z-index: 120; }

/* Overlay a tutta pagina: voci in alto/centro, contatti e social in fondo. */
.mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  gap: var(--s-4);
  padding: var(--header-h) var(--gutter) var(--s-6);
  background: var(--bg);
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__nav {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-4);
}
.mobile-menu__nav a { font-size: var(--fs-display); font-weight: var(--w-regular); }
.mobile-menu__nav a:hover { color: var(--blue-light); }
.mobile-menu__section { text-align: center; }
.mobile-menu__divider {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  margin-bottom: var(--s-3);
  color: var(--blue-primary); text-transform: uppercase;   /* blu Airport (.dot--blue) */
  font-size: var(--fs-body); letter-spacing: .05em;
}
.mobile-menu__divider::before,
.mobile-menu__divider::after { content: ""; width: 48px; height: 1px; background: currentColor; opacity: .6; }
.mobile-menu__section p,
.mobile-menu__section a { font-size: var(--fs-body); }
.mobile-menu__social { display: flex; justify-content: center; gap: var(--s-5); margin-top: var(--s-1); }

/* --- Selettore sedi: rete che si espande in hover/focus --- */
.brand { position: relative; z-index: 2; }
.brand__current { position: relative; z-index: 2; }
.brand__menu {
  position: absolute; left: 0; top: 0;
  width: 200px; height: 220px;
  /* none da chiusa: l'hitbox hover è SOLO la pill (.brand__current), così
     passare il mouse vicino al selettore non apre il ventaglio per sbaglio.
     Diventa auto solo da aperta (sotto): a quel punto copre anche i "vuoti" tra
     un item e l'altro, così scendendo verso ACADEMY/BRAND l'hover non si perde
     a metà strada. I singoli .brand__item restano cliccabili solo da aperti
     (pointer-events:none/auto sul singolo item, vedi sotto). */
  pointer-events: none;
}
.brand__lines {
  position: absolute; left: 0; top: 0;
  width: 200px; height: 220px;
  opacity: 0; transition: opacity .3s ease;
}
.brand__lines line { stroke: var(--neutro-primary); stroke-width: 2; }
.brand__item {
  position: absolute;
  opacity: 0;
  transform: translate(-14px, -14px) scale(.92);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
/* Posizioni a ventaglio (giù-destra), come la "Variant2" del Figma */
.brand__item--academy { left: 58px;  top: 72px;  transition-delay: .03s; }
.brand__item--house   { left: 29px;  top: 144px; transition-delay: .07s; }

/* Desktop: il ventaglio si apre SOLO in hover (nessuna apertura al click/focus).
   Limitato a (hover:hover)+(pointer:fine) perché su touch (iOS Safari in primis)
   un tap "blocca" lo stato :hover finché non si tocca altrove — lo SCROLL non lo
   cancella. Senza questo guard, su mobile il tap che apre il ventaglio attivava
   anche :hover, che restava vero durante lo scroll e teneva il fan visibile pur
   avendo JS già rimosso .is-open. Così su touch conta SOLO .is-open (via JS). */
@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand__menu { pointer-events: auto; }
  .brand:hover .brand__item {
    opacity: 1; transform: none; pointer-events: auto;
  }
  .brand:hover .brand__lines { opacity: 1; }
}
/* Mobile: niente hover, quindi il click (vedi app.js) aggiunge .is-open.
   Stessa apparenza dello stato :hover, pilotata da classe invece che da hover. */
.brand.is-open .brand__menu { pointer-events: auto; }
.brand.is-open .brand__item {
  opacity: 1; transform: none; pointer-events: auto;
}
.brand.is-open .brand__lines { opacity: 1; }

/* ------------------------------ HERO -------------------------------- */
/* Tirato su sotto l'header: il video parte dal bordo superiore della pagina */
.hero { position: relative; margin-top: -110px; }
.hero__media {
  display: block;
  width: 100%;
  height: 835px;
  object-fit: cover;
}
/* Sfumatura di raccordo col fondo scuro */
/*.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 835px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26,26,24,0) 55%, var(--bg) 100%);
}*/ 
.hero__content { position: relative; z-index: 1; padding-block: var(--s-7); }
.hero__logo {
  display: block;
  height: 500px; aspect-ratio: 661 / 548;
  margin:auto;
  margin-top: -450px;
  backdrop-filter: var(--blur) brightness(80%);
  /* La maschera ritaglia il backdrop-filter sulla sagoma del logo: stessi tracciati dell'SVG
     ma come data-URI (alpha mask). Un riferimento url(#frammento) NON scala al box dell'elemento
     e farebbe sparire il logo; il data-URI invece segue mask-size. */
  --logo-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 661 548'%3E%3Cg fill='%23fff'%3E%3Cpath d='M330.446 0L285.975 104.976H4V175.318H256.112L181.993 349.992H4V420.334H152.131L101.429 539.893H178.019L228.721 420.334H432.279L482.981 539.893H559.571L508.869 420.334H657V349.992H479.007L404.888 175.318H657V104.976H375.025L330.446 0ZM258.583 349.992L330.554 180.465L402.524 349.992H258.69H258.583Z'/%3E%3Cpath d='M243.68 370.189H249.34L261.51 396.829H256.76L253.98 390.729H239.03L236.29 396.829H231.54L243.67 370.189H243.68ZM252.71 387.369L248 377.059L246.61 373.839H246.46L245.07 377.089L240.36 387.359H252.71V387.369Z'/%3E%3Cpath d='M267.77 370.189H272.16V396.829H267.77V370.189Z'/%3E%3Cpath d='M280.45 370.189H295.65C301.1 370.189 304.9 372.459 304.9 377.649C304.9 380.899 303.22 383.349 300.08 384.189V384.449C303.04 384.929 304.28 386.679 304.28 389.749V393.879C304.28 394.829 304.28 395.819 304.68 396.839H300.29C299.96 396.109 299.89 395.199 299.89 393.839V390.369C299.89 387.669 298.9 386.199 295.14 386.199H284.83V396.829H280.44V370.189H280.45ZM294.81 382.949C298.98 382.949 300.44 380.979 300.44 378.129C300.44 374.909 298.21 373.629 294.81 373.629H284.83V382.949H294.81Z'/%3E%3Cpath d='M311.77 370.189H325C331.69 370.189 334.98 373.409 334.98 378.629C334.98 384.179 331.11 387.069 324.97 387.039H316.16V396.829H311.77V370.189ZM316.16 373.699V383.819H324.53C328.59 383.819 330.52 381.849 330.52 378.739C330.52 375.379 328.33 373.699 324.53 373.699H316.16Z'/%3E%3Cpath d='M340.75 383.529C340.75 375.269 346.3 369.899 355.33 369.899C364.36 369.899 369.87 375.309 369.87 383.529C369.87 391.749 364.28 397.159 355.33 397.159C346.38 397.159 340.75 391.709 340.75 383.529ZM365.46 383.529C365.46 377.169 361.51 373.439 355.34 373.439C349.17 373.439 345.22 377.199 345.22 383.529C345.22 389.859 349.13 393.579 355.34 393.579C361.55 393.579 365.46 389.819 365.46 383.529Z'/%3E%3Cpath d='M377.08 370.189H392.28C397.73 370.189 401.53 372.459 401.53 377.649C401.53 380.899 399.85 383.349 396.71 384.189V384.449C399.67 384.929 400.91 386.679 400.91 389.749V393.879C400.91 394.829 400.91 395.819 401.31 396.839H396.92C396.59 396.109 396.52 395.199 396.52 393.839V390.369C396.52 387.669 395.53 386.199 391.77 386.199H381.46V396.829H377.07V370.189H377.08ZM391.45 382.949C395.62 382.949 397.08 380.979 397.08 378.129C397.08 374.909 394.85 373.629 391.45 373.629H381.47V382.949H391.45Z'/%3E%3Cpath d='M416.34 373.769H406.76V370.189H430.37V373.769H420.72V396.829H416.34V373.769Z'/%3E%3Cpath d='M77.2701 294.05H59.5501V271.5H76.6801C84.5101 271.5 89.4501 276.56 89.4501 282.51C89.4501 290.34 84.9801 294.05 77.2601 294.05M59.5501 238.58H73.6801C80.8001 238.58 86.3401 241.88 86.3401 248.36C86.3401 256.54 80.6901 258.6 74.8501 258.6H59.5401V238.58H59.5501ZM90.8201 263.78C96.5701 260.39 100.09 254.2 100.06 247.53C100.06 230.87 86.1101 225.1 73.4501 225.1H44.6001V308.29H77.0401C91.1701 308.29 104.18 299.64 104.18 284.15C104.18 275.85 98.4101 266.78 90.8101 263.78'/%3E%3Cpath d='M119.59 308.29H174.94V294.16H134.55V273.55H172.17V259.84H134.55V238.82H174.94V225.1H119.59V308.29Z'/%3E%3Cpath d='M218.96 259.84H207.71V239.06H218.96C229.09 239.06 233.5 242.95 233.5 249.73C233.5 256.31 229.2 259.84 218.96 259.84ZM218.96 225.1H192.88V308.29H207.72V273.79H218.97C235.93 273.79 248.35 265.25 248.35 249.71C248.35 234.17 235.93 225.1 218.97 225.1'/%3E%3Cpath d='M277.7 225.1H262.74V308.29H313.26V294.16H277.7V225.1Z'/%3E%3Cpath d='M506.21 283.27L471.24 225.1H456.4V308.29H470.76V249.83L505.61 308.29H520.57V225.1H506.21V283.27Z'/%3E%3Cpath d='M576.25 296.22C558.4 296.22 551.88 282.39 551.88 266.67C551.88 250.95 558.41 237.17 576.25 237.17C594.09 237.17 600.63 251 600.63 266.67C600.63 282.34 594.09 296.22 576.25 296.22ZM576.25 223.87C548.76 223.87 536.1 244 536.1 266.67C536.1 289.34 548.76 309.47 576.25 309.47C603.74 309.47 616.4 289.34 616.4 266.67C616.4 244 603.74 223.87 576.25 223.87Z'/%3E%3Cpath d='M380.53 240.19L394.13 272.32H366.93L380.53 240.19ZM380.53 206L372.12 225.9H318.79V239.23H366.47L352.46 272.33H318.79V285.66H346.81L337.22 308.31H351.7L361.29 285.66H399.78L409.37 308.31H423.85L414.26 285.66H442.28V272.33H408.61L394.59 239.23H442.27V225.9H388.94L380.53 206Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask: var(--logo-mask) center / 100% 100% no-repeat;
          mask: var(--logo-mask) center / 100% 100% no-repeat;
}
.hero__subtitle  { max-width: 780px; margin-top: var(--s-4); }
.hero__description{ max-width: 680px; margin-top: var(--s-2); }
.hero__actions   { display: none; gap: var(--s-2); margin-top: var(--s-5); }

/* ----------------------------- FOOTER ------------------------------- */
.footer { background: var(--footer-bg); }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); padding-block: var(--s-7); }
.footer__title { font-size: var(--fs-heading); font-weight: var(--w-extrabold); text-transform: uppercase; line-height: var(--fs-heading); }
.footer__logo  { display: inline-flex; margin: var(--s-5) 0 var(--s-3); }
.footer__wordmark { height: 34px; aspect-ratio: 201 / 38; color: var(--ink); }
.footer__brands { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--fs-body); }
/* Ogni voce è un link: l'<a> (non più il <li>) porta il layout dot+testo */
.footer__brands a { display: flex; align-items: center; gap: var(--s-2); transition: opacity .2s ease; }
.footer__brands a:hover { opacity: .75; }
.dot { display: grid; place-items: center; width: 35px; height: 35px; padding: 9px; border-radius: 50%; flex: none; color: var(--ink); }
.dot--neutral { background: var(--neutro-primary); }
.dot--blue    { background: var(--blue-primary); }
.dot--yellow  { background: var(--yellow-light); color: var(--yellow-dark); }

.footer__cols { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
.footer__col h3 { font-size: var(--fs-body); font-weight: var(--w-bold); margin-bottom: var(--s-1); }
.footer__col p,
.footer__col a { display: block; font-size: var(--fs-body); }
.footer__col a:hover { opacity: .75; }

.footer__bar {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: 27px var(--s-5); background: var(--footer-bar); font-size: var(--fs-body);
}

/* =====================================================================
   PAGINA SPAZI (spazi.html)
   Riusa token e componenti della home (.btn, .pill, .title, .container…).
   ===================================================================== */

/* --- Intro "A PLACE TO BE": titolone + paragrafo a sx, immagine a dx --- */
.intro { padding-top: var(--s-7); padding-bottom: 0; }
.intro__title {
  font-size: var(--fs-titlone);
  font-weight: var(--w-regular);
  line-height: .9;
  text-transform: uppercase;
  margin-bottom: var(--s-6);
}
.intro__title span { color: var(--blue-light); }   /* "TO BE" azzurro */
.intro__text { font-size: var(--fs-subtitle); margin-bottom: var(--s-4); max-width: 900px; }

/* Linea divisoria tratteggiata (larghezza container): usata da evento.js tra
   hero e racconto. Stessa estetica dei separatori .section ma dentro un container. */
.rule {
  border: 0;
  height: 1px;
  margin-block: var(--s-7);
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .5) 0 10px, transparent 10px 20px);
}

/* --- Banda "spazio": ogni spazio è una .section (separatore + spaziatura come
       le altre pagine). Riga superiore immagine full-bleed a sx + animazione a dx,
       riga inferiore titolo a sx + card a dx (dentro .container). L'immagine esce
       dal container per arrivare fino al bordo viewport, come l'hero della home. --- */
/* Le bande stanno nel wrapper #bands: l'ultima sarebbe :last-of-type tra i suoi
   fratelli e perderebbe il padding-bottom (regola pensata per l'ultima section
   prima del footer). Lo ripristiniamo: ogni banda ha spaziatura simmetrica. */
.section.band { padding-bottom: var(--s-7); }
/* Anchor dalla home (#flying-desk/#event-area): l'header è sticky, quindi
   scostiamo il punto di arrivo della sua altezza per non finirci sotto. */
.band { scroll-margin-top: var(--header-h); }
/* La prima banda è anche :first-of-type (primo <section> figlio di #bands) e
   perderebbe il separatore in alto (regola pensata per la prima .section della
   pagina, che altrove segue un hero/video e non ne ha bisogno). Qui invece la
   precede solo il titolo "A PLACE TO BE": il separatore va ripristinato. */
.section.band:first-of-type {
  background:
    repeating-linear-gradient(90deg,
      var(--dash-color) 0 var(--dash-len),
      transparent var(--dash-len) calc(var(--dash-len) + var(--dash-gap)))
    top / 100% var(--dash-thick) no-repeat;
}
.band__top {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* cella sx parte dal bordo schermo */
  align-items: center;
  gap: var(--s-5);
}
.band__media {
  height: 440px;
  background: var(--ticket-media) center/cover no-repeat;
}
/* Contenitore dell'animazione PNG-sequence (vedi PngSequence in spazi.js).
   Finché i frame non sono presenti mostra un segnaposto con lo stemma. */
.band__anim {
  position: relative;
  display: grid;
  place-items: center;
  width: min(480px, 88%);
  aspect-ratio: 480 / 458;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.band__anim-canvas { max-width: 100%; max-height: 100%; display: none; }
.band__anim.is-ready .band__anim-canvas { display: block; }
.band__anim-fallback {
  display: grid; place-items: center;
  width: 96px; height: 96px;
  color: var(--ink); opacity: .15;
}
.band__anim.is-ready .band__anim-fallback { display: none; }

.band__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: start;
  margin-top: var(--s-5);
}
.band__gate { font-size: var(--fs-ui); text-transform: uppercase; margin-bottom: var(--s-3); opacity: .85; }
.band__name {
  font-size: var(--fs-display);
  font-weight: var(--w-regular);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}
.band__name-lead { color: var(--blue-primary); }   /* prima parola azzurra */
.band__card { display: flex; flex-direction: column; gap: var(--s-1); }
.band__heading { font-size: var(--fs-subtitle); font-weight: var(--w-regular); line-height: 1.1; }
.band__text { font-size: var(--fs-body); max-width: 56ch; }
.band__actions { display: flex; gap: var(--s-2); margin-top: var(--s-2); }

/* --- Mappa spazi: CTA freccia + accordion per piano/gate --- */
.map-cta {
  display: inline-flex;
  width: 72px; height: 72px;
  color: var(--blue-primary);
  margin-bottom: var(--s-4);
}
a.map-cta { transition: color .2s ease; }
a.map-cta:hover { color: var(--blue-light); }
.title--accent { color: var(--blue-light); }
/* La mappa è una .section normale (separatore in alto incluso); padding-bottom
   esplicito (id > :last-of-type) per mantenere lo stacco dal footer. */
#mappa { padding-bottom: var(--s-7); }

.floor + .floor { margin-top: var(--s-7); }
.floor__name { font-size: var(--fs-heading); font-weight: var(--w-extrabold); text-transform: uppercase; margin-bottom: var(--s-4); }
.floor__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }
.floor__gate { font-size: var(--fs-ui); text-transform: uppercase; margin-bottom: var(--s-2); opacity: .85; }

/* Accordion (un solo template; voci con testo = espandibili) */
.acc { display: flex; flex-direction: column; gap: var(--s-2); }
.acc__item { display: block; background: var(--surface); border-radius: 30px; padding: 20px; }
a.acc__item { cursor: pointer; }
.acc__item--blue   .acc__title { color: var(--blue-primary); }
.acc__item--yellow .acc__title { color: var(--yellow-light); }
.acc__title { font-size: 25px; font-weight: var(--w-semibold); }

/* Titolo della pagina EVENTI: come .intro__title ma con l'ultima parola azzurra.
   (riusa la stessa tipografia titolone della pagina Spazi) */
.intro__title--events { line-height: .9; }
/* La sezione eventi è l'ultima .section della pagina: l'override :last-of-type
   le toglierebbe il padding-bottom (serve sulla home per attaccare il footer).
   Qui invece vogliamo lo stacco simmetrico dal footer. */
.section.section--events { padding-bottom: var(--s-7); }
/* Home: solo gli ultimi due eventi, contenitore più stretto e centrato. */
#home-events { max-width: 900px; margin-inline: auto; }

/* --- Card evento (pagina EVENTI in comune con Academy, vedi events_data.js) ---
   Locandina a sfondo + tag di provenienza (pill) in alto a sx; sui PROSSIMI
   eventi, in fondo, la stessa info data/luogo della pagina del singolo evento
   (.event-date): qui è l'ultimo figlio del flex column, quindi l'overflow:hidden
   + border-radius della card la "taglia" da sola sugli angoli inferiori, senza
   bisogno di un border-radius proprio. Sui CONCLUSI manca (la locandina parla
   da sola): la media riempie tutta l'altezza della card. */
.events-grid { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.events-grid + .subhead { margin-top: var(--s-5); }
/* Conclusi: colonne indipendenti (stile Pinterest), non righe. Sfalsare una
   CARD dentro un flex-wrap a righe (provato prima) allarga quella riga e
   lascia un vuoto strano prima della riga dopo — qui invece ogni colonna è un
   mini flex-column a sé: si sposta la colonna intera, le card dentro restano
   compatte. Il JS (events_data.js, renderEventsPage) distribuisce le card
   nelle colonne; il numero di colonne (3 desktop / 2 mobile, vedi RESPONSIVE)
   lo decide lì via matchMedia, qui si stila solo il contenitore. */
.events-grid--upcoming { margin-top: var(--s-2); }
.events-grid--concluded { flex-wrap: nowrap; align-items: flex-start; margin-top: var(--s-2); }
.events-col { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; gap: var(--s-4); }
.events-grid--concluded .event-card { flex: none; width: 100%; }
.events-col:nth-child(2) { margin-top: var(--s-5); } /* desktop: colonna centrale delle 3 */
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 1 calc(33.333% - var(--s-4) * 2 / 3); /* grow:0 — niente stiramento delle card orfane su righe incomplete */
  aspect-ratio: 409 / 545;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,.18);
}
/* La card è un link: niente sottolineatura/colore-link, eredita lo stile. */
a.event-card { text-decoration: none; color: inherit; }
.event-card__media { flex: 1 1 auto; min-height: 0; background: var(--bg) center/cover no-repeat; }
/* Tag di provenienza: sola scritta (la category dell'evento), niente stemma.
   Colore PIENO per sito (azzurro=airport, giallo=academy) -> distingue il sito
   e resta leggibile su qualsiasi locandina di sfondo. Maiuscolo come le altre
   pill/etichette del progetto. */
.event-card__tag {
  position: absolute;
  top: var(--s-3); left: var(--s-3);
  z-index: 1;
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: var(--w-medium);
  text-transform: uppercase;
}
.event-card__tag--airport { background: var(--blue-primary); color: var(--ink); }
.event-card__tag--academy { background: var(--yellow-light); color: var(--yellow-dark); }
/* Box data/luogo: stesso componente della pagina di dettaglio, qui statico
   (non più a cavallo del bordo) e senza ombra (il bordo è la card stessa). */
.event-card .event-date { position: static; transform: none; width: 100%; margin-bottom: 0; box-shadow: none; border-radius: 0; }

/* =====================================================================
   PAGINA EVENTO (evento.html) — il singolo evento.
   Hero fotografico full-bleed, blocco titolo + locandina che "galleggia"
   sull'hero, badge data smerigliato, poi racconto (testo sticky + galleria).
   Riusa token e componenti (.rule, .container, header/footer).
   ===================================================================== */
.event-top { position: relative; }
/* Hero: foto full-bleed con sfumatura scura in alto (leggibilità header) */
.event-top__hero {
  height: 512px;
  background: var(--ticket-media) center/cover no-repeat;
  /* il video/hero della home parte sotto l'header: qui l'header trasparente
     scorre sopra la foto, quindi la tiriamo su sotto l'header come nell'hero home */
  margin-top: -110px;
}
.event-top__hero::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 512px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .12) 45%, rgba(0, 0, 0, 0) 88%);
  pointer-events: none;
}
.event-top__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, 520px);
  gap: var(--s-6);
  align-items: start;
  padding-top: var(--s-7);
}
.event-head { display: flex; flex-direction: column; gap: var(--s-5); }
/* Riga "meta" del biglietto portata sulla pagina di dettaglio (su fondo scuro):
   Capitolo · Take Off · anno + stemma spinto a fine riga, come nel ticket. */
.event-head__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-body);
  text-transform: uppercase;
}
.event-head__mark { width: 40px; height: 40px; margin-left: auto; color: var(--ink); flex: none; }
.event-head__title {
  font-size: var(--fs-titlone);
  font-weight: var(--w-regular);
  line-height: .9;
  text-transform: uppercase;
}
.event-head__title span { color: var(--blue-light); }   /* nome evento azzurro */
.event-head__lead {
  font-size: var(--fs-subtitle);
  font-weight: var(--w-regular);
  line-height: 1.15;
  max-width: 32ch;
}
/* Locandina: galleggia sopra l'hero, tirata su con margine negativo */
.event-poster { margin-top: -240px; }
.event-poster img {
  width: 100%;
  display: block;
  border-radius: var(--r-card);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 45px rgba(0, 0, 0, .25);
}
/* Card data/orario/luogo a cavallo del bordo inferiore dell'hero. Card bianca
   come .ticket (stesso --ticket-bg), col divisorio tratteggiato verticale tra
   data e info ripreso identico da .ticket__stub (border dashed + --ticket-perf). */
.event-date {
  position: absolute;
  left: var(--gutter);          /* allineato al contenuto del container */
  top: 0;                       /* top dell'inner = bordo inferiore hero */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-card);
  background: var(--ticket-bg);
  color: var(--ink-dark);
  box-shadow: 0 0 45px rgba(0, 0, 0, .25);
}
.event-date__cal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;   /* la colonna si allunga quanto .event-date__info: il
                             border-right (linea tratteggiata) ne segue l'altezza */
  gap: 2px;
  text-align: center;
  padding-right: var(--s-3);
  border-right: 1.5px dashed var(--ticket-perf);
}
.event-date__month { font-size: var(--fs-body); font-weight: var(--w-medium); text-transform: uppercase; line-height: 1; }
.event-date__day { font-size: var(--fs-subtitle); font-weight: var(--w-medium); line-height: 1; color: var(--blue-light); }
.event-date__info { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.event-date__time { font-size: var(--fs-body); color: var(--blue-light); }
.event-date__venue-name { font-size: var(--fs-body); font-weight: var(--w-semibold); line-height: 1.3; }
.event-date__venue-address { font-size: var(--fs-body); opacity: .7; }
.event-date__add {
  display: grid;
  place-items: center;
  width: var(--ctrl-h); height: var(--ctrl-h); /* stessa altezza standard di .btn/.pill */
  border-radius: 50%;
  background: rgba(0, 0, 0, .1);
  color: var(--ink-dark);
  flex: none;
  transition: background-color .2s ease;
}
.event-date__add:hover { background: rgba(0, 0, 0, .18); }
.event-date__add svg { width: 22px; height: 22px; }

/* Racconto: colonna testo (sticky) + galleria fotografica flush a destra */
.event-story {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-left: var(--gutter);   /* solo gutter sinistro: galleria tocca il bordo dx */
  display: grid;
  grid-template-columns: minmax(0, 460px) 1fr;
  gap: var(--s-6);
  align-items: start;
  padding-bottom: var(--s-7);
}
/* Senza galleria: testo a tutta larghezza, ripristina padding destro */
.event-story--text-only {
  padding-right: var(--gutter);
  grid-template-columns: 1fr;
}
.event-story--text-only .event-story__text { position: static; }
.event-story__text {
  position: sticky;
  top: var(--s-7);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--fs-body);
  max-width: 600px;
}
/* Galleria: griglia 2 colonne alternata (1 intera / 2 affiancate / 1 intera…)
   angoli vivi, nessun gap, flush al bordo destro del container */
.event-story__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.event-story__gallery img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* 1ª, 4ª, 7ª… immagine: occupa entrambe le colonne */
.event-story__gallery img:nth-child(3n+1) {
  grid-column: 1 / -1;
}

/* =====================================================================
   PAGINA SPAZIO (spazio.html) — dettaglio di un singolo spazio.
   Riusa l'hero (.event-top) e il sistema .section (separatore tratteggiato
   in cima, tranne sulla prima). Sticky title + contenuto che scorre (ordine
   inverso di .event-story), galleria 3x2, grid servizi, CTA finale.
   ===================================================================== */
/* .story segue subito l'hero (.event-top): è la 2a <section> della pagina,
   quindi non è :first-of-type (quell'onore va all'hero) e prenderebbe il
   separatore tratteggiato in cima. Qui invece non serve, come dopo un hero. */
.section.story { background: none; }
.story__inner { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: var(--s-6); align-items: start; }
.story__title { position: sticky; top: var(--s-7); align-self: start; display: flex; flex-direction: column; gap: var(--s-4); }
.story__gate { font-size: var(--fs-ui); text-transform: uppercase; margin-bottom: var(--s-3); opacity: .85; }
.story__name { font-size: var(--fs-titlone); font-weight: var(--w-regular); line-height: var(--lh-tight); text-transform: uppercase; }
.story__name-lead { color: var(--blue-primary); }   /* prima parola azzurra, come .band__name-lead */
.story__icon { width: 70px; height: 70px; color: var(--blue-light); }
.story__content { display: flex; flex-direction: column; gap: var(--s-5); }
.story__lead { font-size: var(--fs-subtitle); font-weight: var(--w-regular); line-height: 1.15; }
.story__photo img { width: 100%; display: block;2 }
.story__body { font-size: var(--fs-body); max-width: 65ch; }

/* Galleria 3x2: angoli vivi (no border-radius), sfondo placeholder come .ticket__media */
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.gallery-grid__item { aspect-ratio: 537 / 309; background: var(--ticket-media) center/cover no-repeat; }

/* Grid "I servizi inclusi": stesso bordo/glifo delle icone .icon, card neutra */
.services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.service-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-card); background: var(--surface); }
.service-card__icon { display: block; width: 78px; height: 78px; }
.service-card__icon svg { width: 78px; height: 78px; }
.service-card__title { font-size: var(--fs-heading); font-weight: var(--w-regular); line-height: 1.1; }
.service-card__text { font-size: var(--fs-body); opacity: .85; }

/* CTA finale "Iscriviti e prenota": è l'ultima .section della pagina, ma qui
   vogliamo lo stacco simmetrico dal footer (come .section--events). */
.section.section--subscribe { padding-bottom: var(--s-7); }
/* La CTA "Contattaci e prenota" è l'ULTIMA .section della detail page evento
   (vedi event_detail.js): ripristina lo stacco dal footer che .section:last-of-type
   azzererebbe. */
.section.section--contact { padding-bottom: var(--s-7); }
.title--primary { color: var(--blue-primary); }   /* "Iscriviti" più scuro di .title--accent */
.subscribe__text { font-size: var(--fs-body); max-width: 64ch; margin-top: var(--s-3); }
.subscribe__link { text-decoration: underline; }
.subscribe__actions { display: flex; gap: var(--s-2); margin-top: var(--s-4); }

/* ---------------------------- RESPONSIVE ---------------------------- */
@media (max-width: 900px) {
  :root { --s-7: 64px; }
  .events__more { display: flex; justify-content: center; margin-top: var(--s-2); }
  /* Banda in colonna unica; la FOTO va in fondo alla section.
     display:contents "scioglie" .band__top così media e anim diventano figli
     diretti della banda flex e si possono riordinare con `order`. */
  .band { display: flex; flex-direction: column; }
  .band__top { display: contents; }
  .band__anim { order: 1; width: min(320px, 80%); }
  .band__bottom { order: 2; grid-template-columns: 1fr; }
  .band__media { order: 3; height: 240px; margin-top: var(--s-5); } /* stacco dai bottoni sopra */
  .floor__cols { grid-template-columns: 1fr; }
  .acc__title { font-size: 20px; }
  .nav { display: none; }
  .site-header .btn--book { display: none; } /* mobile: nell'header AIRPORT + hamburger */
  .menu-toggle { display: inline-flex; }
  .section__action { display: none; }
  .card {padding: var(--s-2); padding-top: var(--s-4);}
  .card-grid { grid-template-columns: 1fr; gap: var(--s-2); }
  /* Biglietto: da 3 colonne a colonna unica; perforazione orizzontale sopra il tagliando */
  .ticket { grid-template-columns: 1fr; height:auto; }
  .ticket::before, .ticket::after { display: none; }  /* bande % non valide da impilati */
  .ticket__media { height: 200px; }
  .ticket__mark { width: 34px; height: 34px; }
  .ticket__body { height: auto; justify-content: flex-start; gap: var(--s-2); padding: var(--s-4); }
  .ticket__meta  { position: static; }
  .ticket__barcode-fill { display: none; } /* troppo stretto per il barcode, meglio nasconderlo */
  .ticket__stub {
    background:
      repeating-linear-gradient(90deg,
        var(--ticket-perf) 0 var(--dash-len),
        transparent var(--dash-len) calc(var(--dash-len) + var(--dash-gap)))
      top / 100% var(--dash-thick) no-repeat;
    align-items: center;
    flex-direction: row;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
  }
  .ticket__stub::before,
  .ticket__stub::after {
    border-left: 0; border-right: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
  }
  .ticket__stub::before { top: -13.5px; left: 0;    border-left:  20px solid var(--ticket-perf); }  /* ▶ */
  .ticket__stub::after  { top: -13.5px; bottom: auto; left: auto; right: 0; border-right: 20px solid var(--ticket-perf); } /* ◀ */
  .ticket__day { margin-bottom: 0; }
  /* Griglia eventi: prossimi a colonna unica (card più grandi), conclusi a due colonne */
  .events-grid { gap: var(--s-2); }
  .events-grid--upcoming .event-card { flex-basis: 100%; }
  .events-col { gap: var(--s-2); }
  .events-col:nth-child(2) { margin-top: 0; }
  .events-col:nth-child(1) { margin-top: var(--s-4); } /* mobile: prima delle due colonne */
  /* Tag più piccolo: a 2 colonne la card è larga ~160px, la pill a dimensione
     desktop sfora la card e l'overflow:hidden la taglia. */
  .event-card__tag { top: var(--s-2); left: var(--s-2); height: 32px; padding: 0 12px; font-size: 12px; }
  .hero__media { height: 480px; }
  .hero::after { height: 480px; }
  .hero__logo { height: 300px; margin-top: -150px; }
  .footer__grid { grid-template-columns: 1fr; }
  .diagram { height: 380px; }

  /* Pagina evento: una colonna; locandina e testo non più affiancati */
  .event-top__hero { height: 320px; }
  .event-top__hero::after { height: 320px; }
  .event-top__inner { grid-template-columns: 1fr; gap: var(--s-5); margin-top: -200px; }
  .event-poster { margin-top: var(--s-3); order: -1; } /* locandina sopra il titolo */
  .event-date { position: static; transform: none; width: 100%; margin-bottom: var(--s-3); } /* larghezza standard, come .event-story__gallery */
  .event-date__info { flex: 1; min-width: 0; }
  .event-date__venue-address { white-space: normal; }
  .event-story { grid-template-columns: 1fr; padding-right: var(--gutter); }
  .event-story__text { position: static; }
  .event-story__gallery { grid-template-columns: 1fr; }
  .event-story__gallery img:nth-child(3n+1) { grid-column: 1; }

  /* Pagina spazio: una colonna, titolo non più sticky, griglie a colonna unica */
  .story__inner { grid-template-columns: 1fr; }
  .story__title { position: static; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card__icon { width: 60px; height: 60px; }
  .service-card__icon svg { width: 60px; height: 60px; }

  /* Galleria spazio: su mobile diventa un carosello a scorrimento orizzontale
     con snap (niente JS: scroll nativo + scroll-snap). */
  .gallery-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-grid__item { scroll-snap-align: start; }
  .footer__bar { padding: var(--s-3); flex-direction: column; }
}