/* ===========================================================
   Pallavolo Laives — Design System
   Palette derived from official club logo (blue + volleyball red)
   Typography: Barlow Condensed (display) + Barlow (body) — athletic, condensed, energetic
   =========================================================== */

/* ===== Font self-hosted =====
   Barlow e Barlow Condensed sono serviti dal nostro dominio (cartella /fonts)
   invece che dai server di Google: nessun indirizzo IP dei visitatori viene
   trasmesso a terzi al caricamento della pagina. Subset latin + latin-ext,
   sufficienti per italiano e tedesco. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-condensed-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-condensed-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand colors — from club crest */
  --color-primary: #1b5fa6;
  --color-primary-dark: #0e3e75;
  --color-primary-light: #eaf2fb;
  --color-accent: #d32330;
  --color-accent-dark: #a81820;
  --color-accent-light: #fdecec;
  /* Varianti "in primo piano": stesso colore del brand in tema chiaro,
     schiarite in tema scuro. Servono SOLO quando blu e rosso sono usati
     come testo o icona: come sfondo restano --color-primary/--color-accent,
     che devono restare scuri per reggere il testo bianco sopra. */
  --color-primary-fg: #1b5fa6;
  --color-accent-fg: #d32330;

  --color-bg: #fafbfc;
  --color-surface: #ffffff;
  --color-text: #16232e;
  --color-text-muted: #55677a;
  --color-border: #e3e8ed;

  --color-on-primary: #ffffff;
  --color-on-accent: #ffffff;

  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --shadow-sm: 0 2px 8px rgba(14, 62, 117, 0.08);
  --shadow-md: 0 8px 24px rgba(14, 62, 117, 0.12);
  --shadow-lg: 0 20px 48px rgba(14, 62, 117, 0.18);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 64px;
  --header-gap: 16px;
  --surface-glass: rgba(255, 255, 255, 0.75);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0b1520;
    --color-surface: #101d2b;
    --color-text: #eef3f8;
    --color-text-muted: #9fb0c0;
    --color-border: #223247;
    --color-primary-light: #142a42;
    --color-accent-light: #2a1418;
    --color-primary-fg: #6fa8dc;   /* 7.3:1 sul fondo scuro (era 2.8:1) */
    --color-accent-fg: #ff8a90;    /* 8.1:1 sul fondo scuro (era 3.6:1) */
    --surface-glass: rgba(16, 29, 43, 0.75);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 var(--space-2);
  letter-spacing: 0.2px;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }

p { margin: 0 0 var(--space-2); color: var(--color-text-muted); }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

section { padding: var(--space-6) 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent-fg);
  margin-bottom: var(--space-2);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 2px;
}

/* ===== Buttons =====
   Structure: <button class="btn btn-*"><span class="btn-face">label</span>
   <span class="btn-face btn-face-hover">label + icon</span></button>
   Both faces sit in the same grid cell (button sizes to fit the larger one) and
   cross-fade/slide on hover; outline/ghost variants also fill with a solid
   background so the incoming face stays readable. Reduced-motion users get an
   instant swap since all transitions are zeroed out globally in that case.
   Sotto i 640px il bottone e' statico: vedi il blocco mobile piu' in basso. */
.btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out);
  white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--color-primary-fg); outline-offset: 3px; }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn-face {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 30px;
  transition: transform 320ms var(--ease-out), opacity 260ms var(--ease-out);
  z-index: 2;
}
.btn-face-hover {
  opacity: 0;
  transform: translateX(-100%);
}
.btn:hover .btn-face:not(.btn-face-hover),
.btn:focus-visible .btn-face:not(.btn-face-hover) {
  opacity: 0;
  transform: translateX(100%);
}
.btn:hover .btn-face-hover,
.btn:focus-visible .btn-face-hover {
  opacity: 1;
  transform: translateX(0);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover,
.btn-primary:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: var(--color-accent-dark); }

.btn-light {
  background: #fff;
  color: var(--color-accent-dark);
  box-shadow: var(--shadow-md);
}
.btn-light:hover,
.btn-light:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
/* Il riempimento al passaggio del mouse era ottenuto con un pallino che si
   dilatava fino a coprire il bottone. Il pallino, ancorato a 20px dal bordo
   sinistro, finiva pero' dietro le prime lettere dell'etichetta. Ora lo
   stesso effetto si ottiene con un semplice sfondo in dissolvenza: niente
   elemento sovrapposto al testo, e la faccia che compare in hover ha
   comunque il fondo pieno che le serve per essere leggibile. */
.btn-ghost:hover,
.btn-ghost:focus-visible {
  transform: translateY(-3px);
  background: #fff;
  border-color: #fff;
}
.btn-ghost .btn-face-hover { color: var(--color-primary); }

.btn-outline {
  background: transparent;
  border-color: var(--color-primary-fg);
  color: var(--color-primary-fg);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  transform: translateY(-3px);
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline .btn-face-hover { color: #fff; }

.btn-block { width: 100%; }

/* Su schermi stretti un'etichetta lunga non entra su una riga sola.
   Il .btn ha overflow:hidden, quindi senza questo blocco il testo esce dal
   bottone e viene tagliato invece di andare a capo — succedeva su
   "Compila il modulo di iscrizione" gia' a 375px. Le etichette corte non
   cambiano: min-height tiene l'altezza dei bottoni a 52px come prima. */
@media (max-width: 640px) {
  .btn { white-space: normal; }
  .btn-face {
    padding: 12px 22px;
    line-height: 1.2;
    text-align: center;
  }
  /* Su schermi stretti il bottone diventa statico: lo scambio di facce e il
     riempimento sono affordance da mouse, e al tocco non se ne vede nulla
     perche' la pagina cambia subito. Togliere la faccia nascosta risolve
     anche il problema per cui la sua etichetta piu' larga (label + icona)
     mandava a capo il testo e faceva crescere il bottone di 12px.
     Va spento pure il riempimento: senza la faccia in hover resterebbe
     visibile quella a riposo, con testo blu su sfondo blu.
     La visibilita' da tastiera non dipende da questo: resta l'anello di
     .btn:focus-visible, che e' una proprieta' outline a se stante. */
  .btn-face-hover { display: none; }
  .btn:hover .btn-face,
  .btn:focus-visible .btn-face { opacity: 1; transform: none; }
  .btn-outline:hover, .btn-outline:focus-visible,
  .btn-ghost:hover, .btn-ghost:focus-visible { background: transparent; }
  .btn-outline:hover, .btn-outline:focus-visible { border-color: var(--color-primary-fg); }
  .btn-ghost:hover, .btn-ghost:focus-visible { border-color: rgba(255,255,255,0.55); }
}

/* ===== Header — floating collapsible pill =====
   The frosted-glass + shadow live on ::before, not on .site-header itself:
   backdrop-filter/transform on an element creates a containing block for its
   fixed-position descendants — since .main-nav (mobile drawer) is fixed and lives
   inside the header, putting backdrop-filter directly on .site-header would trap
   the drawer inside the pill's own box instead of the viewport (a real bug hit
   earlier when this lived on the header directly — keep the split).

   Collapse-to-circle on scroll works by transitioning `width` between two
   concrete pixel values: --header-expanded-w (measured in JS from the content's
   natural size) and --header-h (a circle, since border-radius is 999px). CSS
   can't transition to/from `width:auto`, hence the JS measurement — see
   initHeaderPill() in main.js. Falls back to the expanded pill (no collapse) if
   that JS never runs, which is the safe default. */
.site-header {
  /* Centered via left:0/right:0/margin:auto rather than left:50%+transform:
     translateX — a transform on this element would create a containing block
     for position:fixed descendants (.main-nav, the mobile drawer), trapping it
     inside the pill's own box instead of the viewport. Same category of bug
     already hit once with backdrop-filter on this element; same fix (keep
     transform/filter off the ancestor of a fixed overlay) applies here too. */
  position: fixed;
  top: var(--header-gap);
  left: 0;
  right: 0;
  margin: 0 auto;
  height: var(--header-h);
  width: var(--header-expanded-w, auto);
  max-width: calc(100vw - 32px);
  z-index: 100;
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(227, 232, 237, 0.7);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: width 480ms cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 300ms ease;
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250, 251, 252, 0.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
@media (prefers-color-scheme: dark) {
  .site-header::before { background: rgba(11, 21, 32, 0.78); }
  .site-header { border-color: rgba(34, 50, 71, 0.7); }
}
.site-header.is-collapsed {
  width: var(--header-h);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: max-content;
  padding: 0 8px 0 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  flex-shrink: 0;
}
.brand img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.brand-name { display: flex; flex-direction: column; line-height: 1.1; transition: opacity 180ms ease; }
/* Kept in markup/i18n (reused elsewhere); hidden here so the pill stays compact. */
.brand-name small { display: none; }
/* The collapsed pill is only as wide as the logo circle; header-inner itself
   stays at its full natural width and just gets clipped by overflow:hidden,
   so without this the name's first letter peeks out right at the clip edge
   instead of disappearing cleanly. */
.site-header.is-collapsed .brand-name {
  opacity: 0;
  transition-duration: 100ms;
}

/* Fades ahead of the width collapse so the pill closes around empty space,
   not around text getting clipped mid-character. .main-nav is only handled
   here on desktop (min-width query below) — on mobile it becomes a separate
   fixed drawer overlay governed entirely by .is-open, unrelated to the pill's
   own collapse state. */
.nav-toggle { transition: opacity 180ms ease; }
.site-header.is-collapsed .nav-toggle {
  opacity: 0;
  pointer-events: none;
  transition-duration: 100ms;
}
@media (min-width: 861px) {
  .main-nav { transition: opacity 180ms ease; }
  .site-header.is-collapsed .main-nav {
    opacity: 0;
    pointer-events: none;
    transition-duration: 100ms;
  }
}

.main-nav { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.3px;
  padding: 8px 4px;
  position: relative;
  color: var(--color-text);
  white-space: nowrap;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--color-accent);
  transition: width 220ms var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--color-accent-fg); }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px;
  background: var(--color-surface);
  flex-shrink: 0;
}
.lang-switch button {
  border: none;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background 200ms ease, color 200ms ease;
  min-height: 30px;
}
.lang-switch button.is-active { background: var(--color-primary); color: #fff; }
.lang-switch button:hover:not(.is-active) { color: var(--color-text); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block; width: 22px; height: 2.5px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    top: calc(var(--header-gap) + var(--header-h) + 10px);
    left: 12px; right: 12px; bottom: 12px;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--space-4) var(--space-3);
    gap: var(--space-4);
    transform: translateY(-14px);
    opacity: 0;
    pointer-events: none;
    transition: transform 320ms var(--ease-out), opacity 260ms var(--ease-out);
    overflow-y: auto;
  }
  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { display: block; padding: 16px 4px; font-size: 1.4rem; border-bottom: 1px solid var(--color-border); min-height: 44px; }
  .lang-switch { align-self: flex-start; }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-gap) + var(--header-h) + var(--space-4));
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 62%, #2d78bf 100%);
  color: #fff;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  background: rgba(8, 30, 58, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: calc(var(--space-4) * -1);
}

.hero .eyebrow { color: #ffd9d9; }
.hero .eyebrow::before { background: #ffd9d9; }
.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.02;
  margin: 0 0 var(--space-3);
}
.hero h1 > span { display: block; }
.split-letter { display: inline-block; will-change: transform, opacity; }
.hero-title-accent { color: #ffd9d9; }
.hero-lead { color: rgba(255,255,255,0.88); font-size: 1.2rem; max-width: 560px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* Su schermi stretti la hero mostrava solo testo, lasciando sotto i pulsanti
   un'ampia fascia di fondo vuota (193px su un telefono da 812px). La foto la
   riempie, centrata sotto i bottoni, riprendendo lo stesso motivo del desktop:
   un cartoncino bianco inclinato dietro la fotografia, ruotata in senso
   opposto. Le misure sono in min() cosi' la foto si restringe da sola sui
   telefoni piu' piccoli invece di allungare la hero. */
.hero-visual {
  display: block;
  position: relative;
  z-index: 2;
  width: min(170px, 44vw);
  margin: var(--space-4) auto 0;
}
.hero-visual::before {
  content: '';
  position: absolute;
  inset: -8px;
  background: #fff;
  border-radius: var(--radius-lg);
  transform: rotate(-5deg);
  box-shadow: var(--shadow-md);
}
.hero-visual img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 3px solid rgba(255, 255, 255, 0.25);
  box-shadow: var(--shadow-lg);
  transform: rotate(3deg);
}

@media (min-width: 960px) {
  .hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    gap: var(--space-6);
  }
  .hero-content { max-width: none; }
  .hero-visual {
    display: block;
    position: relative;
    z-index: 2;
    justify-self: end;
    /* Annulla il dimensionamento mobile: qui comanda la colonna della griglia. */
    width: auto;
    margin: 0;
  }
  /* A plain white card sits behind the photo at a slightly different tilt,
     peeking out along the edges — like a torn/rough-cut backing paper —
     for a bit more depth than a flat drop shadow gives on its own. */
  .hero-visual::before {
    content: '';
    position: absolute;
    inset: -10px;
    background: #fff;
    border-radius: var(--radius-lg);
    transform: rotate(-5deg);
    box-shadow: var(--shadow-md);
  }
  .hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 3px solid rgba(255, 255, 255, 0.25);
    box-shadow: var(--shadow-lg);
    transform: rotate(3deg);
    transition: transform 450ms var(--ease-out);
  }
  .hero-visual:hover img { transform: rotate(0deg) scale(1.02); }
}

/* ===== Flowing background paths (home hero) =====
   Sweeping curved strokes generated in JS, each animating a travelling dash
   segment. Uses CSS animation rather than a per-path GSAP tween so ~70 strokes
   don't each cost a JS style write every frame; --path-len is set inline per
   path since keyframes can't read getTotalLength() on their own. */
.hero-paths-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-paths-bg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #fff;
}
.hero-path {
  stroke: currentColor;
  fill: none;
  stroke-dasharray: var(--dash-on) var(--dash-off);
  animation: pathFlow var(--path-dur, 24s) linear infinite;
  animation-delay: var(--path-delay, 0s);
}
@keyframes pathFlow {
  to { stroke-dashoffset: calc(var(--path-len, 1000px) * -1); }
}

/* ===== Grid + glow background (inner page heroes) =====
   Layered directly into background-image rather than a ::before overlay: a
   negative-z pseudo-element would paint behind the section's own gradient and
   never be seen. Order matters — grid lines first, then the accent glow, then
   the base brand gradient underneath. */
.page-hero.hero-grid-bg {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    radial-gradient(circle at 50% 35%, rgba(211, 35, 48, 0.38) 0%, rgba(211, 35, 48, 0.12) 38%, transparent 68%),
    linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 62%, #2d78bf 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%;
}

/* ===== Sections ===== */
.section-head { max-width: 640px; margin-bottom: var(--space-5); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

.icon-badge {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary-fg);
  margin-bottom: var(--space-2);
}
.icon-badge svg { width: 28px; height: 28px; }
.icon-badge.accent { background: var(--color-accent-light); color: var(--color-accent-fg); }

/* ===== Value cards =====
   Below 861px, or on touch devices with no hover, the cards are a plain
   readable vertical stack (same base .card look used elsewhere). On desktop
   pointer devices they overlap as a compact, skewed, fanned-out deck — the
   back two start dimmed/grayscale and only the front one is in full colour;
   hovering a card lifts it and brings it to full colour. Two things caused
   this to feel clumsy in earlier passes and are deliberately tuned here:
   the offsets were too large (oversized footprint, awkward empty space),
   and the hover transition was too slow/delayed (felt laggy) — both are
   trimmed down below. */
.value-stack {
  display: grid;
  gap: var(--space-3);
}
.value-card { text-align: left; }
.value-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.value-card-head h3 { margin: 0; }
.value-card-head .icon-badge {
  width: 40px; height: 40px;
  border-radius: 50%;
  margin-bottom: 0;
  flex-shrink: 0;
}
.value-card-head .icon-badge svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
  .value-stack { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}

@media (hover: hover) and (min-width: 861px) {
  .value-stack {
    grid-template-areas: 'stack';
    place-items: center;
    padding: var(--space-3) 0 140px;
  }
  .value-stack .value-card {
    grid-area: stack;
    position: relative;
    width: min(400px, 90%);
    min-height: 158px;
    justify-content: center;
    border-width: 2px;
    background: var(--surface-glass);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease-out,
      border-color 180ms ease-out, box-shadow 180ms ease-out;
  }

  /* Zona di hover estesa verso il basso, invisibile.
     Sollevando la carta di 10px il puntatore resterebbe "sotto" il suo bordo
     inferiore: il browser genererebbe mouseleave, la carta tornerebbe giù,
     il puntatore sarebbe di nuovo dentro, e così via all'infinito — è questo
     che faceva rimbalzare l'hover da una carta all'altra. Questa fascia
     assorbe lo spostamento. È estesa SOLO verso il basso di proposito:
     allargandola su tutti i lati, una carta arretrata ruberebbe l'hover a
     quella davanti, mentre verso il basso vince sempre la carta con z-index
     più alto, quindi non cambia quale carta risponde. */
  .value-stack .value-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: -18px;
  }

  /* Lo skew fa parte dello stato a riposo E di quello in hover: se sparisse
     al passaggio del mouse, la carta cambierebbe forma di colpo (fino a ~17px
     sugli angoli) e ricomincerebbe l'oscillazione. In hover cambia solo la
     componente verticale della traslazione. */
  .value-card-1 { transform: skewY(-5deg) translate(0, 0); filter: grayscale(1); z-index: 1; }
  .value-card-2 { transform: skewY(-5deg) translate(64px, 42px); filter: grayscale(1); z-index: 2; }
  .value-card-3 { transform: skewY(-5deg) translate(128px, 84px); filter: none; z-index: 3; }

  .value-stack .value-card:hover {
    filter: none;
    z-index: 4;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-lg);
    /* Breve ritardo: un passaggio veloce sul bordo non innesca il movimento,
       solo una sosta reale. L'uscita resta immediata. */
    transition-delay: 80ms;
  }
  .value-card-1:hover { transform: skewY(-5deg) translate(0, -10px); }
  .value-card-2:hover { transform: skewY(-5deg) translate(64px, 32px); }
  .value-card-3:hover { transform: skewY(-5deg) translate(128px, 74px); }
}

.about-section { background: var(--color-surface); }
.about-media {
  position: relative;
  min-height: 340px;
}
/* Same rough white backing card as the hero photo, so the two line up as a
   matching pair — the two images have identical treatment applied. */
.about-media::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: #fff;
  border-radius: var(--radius-lg);
  transform: rotate(2deg);
  box-shadow: var(--shadow-md);
}
.about-media img {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.facts-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.facts-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--color-text); }
.facts-list svg { width: 22px; height: 22px; color: var(--color-accent-fg); flex-shrink: 0; margin-top: 2px; }

/* CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--color-accent-dark), var(--color-accent));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: #fff; margin-bottom: 6px; }
.cta-band p { color: rgba(255,255,255,0.85); margin: 0; }

/* Questo blocco deve stare DOPO le regole .cta-band qui sopra: le media query
   non aumentano la specificita', quindi messo prima verrebbe sovrascritto. */
@media (max-width: 640px) {
  /* Meno imbottitura nella fascia: recupera 32px di larghezza per il bottone,
     che cosi' torna a stare su una riga sola. */
  .cta-band { padding: var(--space-4); }
  .cta-band .btn { width: 100%; }
}

/* Map */
.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  height: 360px;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }
.map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: var(--space-3);
  background: var(--color-primary-light);
}
.map-placeholder-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--color-text); }
.map-placeholder-text { margin: 0 0 var(--space-2); font-size: 0.9rem; max-width: 360px; }

/* ===== Cookie / third-party services notice ===== */
.cookie-banner {
  display: none;
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 460px;
  margin: 0 auto;
  z-index: 150;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
}
.cookie-banner.is-visible { display: flex; }
/* Il selettore globale `p` in cima al foglio assegna a OGNI paragrafo il
   grigio --color-text-muted. Una regola che colpisce direttamente l'elemento
   batte sempre il colore ereditato dal contenitore, per quanto specifico sia:
   percio' sui fondi scuri il testo dei paragrafi restava grigio su blu, quasi
   illeggibile. Va riassegnato esplicitamente. */
.cookie-banner p { color: #fff; }
.cookie-banner-text { margin: 0; font-size: 0.92rem; }
.cookie-banner-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cookie-banner-link { font-size: 0.88rem; text-decoration: underline; color: #fff; }
@media (max-width: 640px) {
  /* Clears iscrizioni.html's fixed mobile CTA bar, which also sits at the bottom. */
  .cookie-banner { bottom: 92px; }
}

/* ===== Legal content pages (Privacy / Cookie Policy) ===== */
.legal-content { max-width: 760px; }
.legal-updated { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: var(--space-4); }
.legal-content h2 { margin-top: var(--space-5); margin-bottom: var(--space-2); }
.legal-content ul { padding-left: 1.2em; color: var(--color-text-muted); }
.legal-content li { margin-bottom: 8px; }

/* ===== Pagina 404 =====
   Blocco unico centrato: icona, codice, titolo, spiegazione, azione.
   Le distanze verticali sono gestite da un solo `gap`, così restano
   costanti anche quando il testo tedesco va a capo diversamente. */
.notfound {
  /* svh = altezza della finestra al netto delle barre del browser mobile.
     La riga vh sopra serve ai browser che non conoscono ancora svh. */
  min-height: 60vh;
  min-height: 60svh;
  display: flex;
  align-items: center;
  /* La barra di navigazione galleggia sopra la pagina e non occupa spazio nel
     flusso: il primo elemento va staccato a mano, con lo stesso calcolo usato
     da .page-hero nelle altre pagine, altrimenti l'icona le finisce sotto. */
  padding: calc(var(--header-gap) + var(--header-h) + var(--space-5)) 0 var(--space-6);
}
.notfound-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

/* L'icona dondola avanti e indietro di 5 gradi. Non serve disattivarla a
   mano per chi ha chiesto meno animazioni: la regola globale
   prefers-reduced-motion piu' in alto azzera gia' ogni animation. */
.notfound-icon {
  color: var(--color-text-muted);
  animation: notfound-wobble 2s ease-in-out infinite;
}
.notfound-icon svg { display: block; width: 96px; height: 96px; }

@keyframes notfound-wobble {
  0%       { transform: rotate(0deg); }
  33.333%  { transform: rotate(5deg); }
  66.666%  { transform: rotate(-5deg); }
  100%     { transform: rotate(0deg); }
}

.notfound-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.notfound-code {
  font-size: clamp(3.4rem, 13vw, 5.2rem);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--color-primary-fg);
}
.notfound-title {
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  color: var(--color-text);
}
.notfound-help {
  max-width: 34rem;
  margin: 0;
  font-size: 1.05rem;
}

.notfound-cta { margin-top: var(--space-1); }
/* La freccia guarda indietro: nella faccia che compare al passaggio del
   mouse scivola di poco verso sinistra, nella stessa direzione. */
.notfound-arrow { transition: transform 260ms var(--ease-out); }
.btn:hover .btn-face-hover .notfound-arrow,
.btn:focus-visible .btn-face-hover .notfound-arrow { transform: translateX(-4px); }

.notfound-secondary { margin: 0; font-size: 0.95rem; }
.notfound-secondary a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.notfound-secondary a:hover,
.notfound-secondary a:focus-visible { color: var(--color-accent-fg); }

/* ===== Footer ===== */
.site-footer {
  background: var(--color-primary-dark);
  color: rgba(255,255,255,0.82);
  padding: var(--space-6) 0 var(--space-3);
}
/* Il selettore globale `p` in cima al foglio assegna a OGNI paragrafo il
   grigio --color-text-muted. Una regola che colpisce direttamente l'elemento
   batte sempre il colore ereditato dal contenitore, per quanto specifico sia:
   percio' sui fondi scuri il testo dei paragrafi restava grigio su blu, quasi
   illeggibile. Va riassegnato esplicitamente. */
.site-footer p { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-5); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); } }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-2); }
.footer-brand img { width: 46px; height: 46px; }
.footer-brand strong { font-family: var(--font-display); color: #fff; font-size: 1.2rem; }
.site-footer h4 { color: #fff; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 1px; }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-list a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: 0.85rem;
  /* Era 0.55: sul blu del footer dava 4.38:1, appena sotto il minimo di
     leggibilita' (4.5:1). A 0.62 sale a 5.15:1 restando visibilmente
     piu' tenue del testo principale, com'e' giusto per una riga di servizio. */
  color: rgba(255,255,255,0.62);
}

/* ===== Reveal animation base state (JS adds .is-visible) ===== */
[data-reveal] { opacity: 1; }
.js .reveal-init { opacity: 0; }

/* ===== Page hero (inner pages) ===== */
.page-hero {
  padding-top: calc(var(--header-gap) + var(--header-h) + var(--space-6));
  padding-bottom: var(--space-5);
  background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-hero .eyebrow { color: #ffd9d9; }
.page-hero .eyebrow::before { background: #ffd9d9; }
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,0.85); max-width: 620px; font-size: 1.1rem; }

/* Schedule table */
.schedule-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.schedule-note svg { width: 26px; height: 26px; color: var(--color-primary-fg); flex-shrink: 0; }

.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-sm); }
table.schedule { width: 100%; border-collapse: collapse; min-width: 620px; }
table.schedule th, table.schedule td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--color-border); }
table.schedule th { font-family: var(--font-display); text-transform: uppercase; font-size: 0.82rem; letter-spacing: 1px; color: var(--color-text-muted); background: var(--color-bg); }
table.schedule tr:last-child td { border-bottom: none; }
table.schedule td.tbd { color: var(--color-text-muted); font-style: italic; }
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  padding: 4px 12px; border-radius: 999px; letter-spacing: 0.5px;
}
.badge-home { background: var(--color-primary-light); color: var(--color-primary-fg); }
.badge-away { background: var(--color-accent-light); color: var(--color-accent-fg); }

.standings-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-4);
}
.standings-cta .icon-badge { margin-bottom: 0; }
.standings-cta-text { flex: 1; min-width: 220px; }

/* Steps (iscrizioni) */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--space-3); }
.step { display: flex; gap: var(--space-3); align-items: flex-start; }
.step-num {
  counter-increment: step;
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
}
.step-num::before { content: counter(step); }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: 20px 4px;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  color: var(--color-text); text-align: left;
  min-height: 44px;
}
.faq-q svg { width: 22px; height: 22px; color: var(--color-accent-fg); transition: transform 260ms var(--ease-out); flex-shrink: 0; }
.faq-item.is-open .faq-q svg { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 320ms var(--ease-out), padding 320ms var(--ease-out);
  color: var(--color-text-muted);
}
.faq-item.is-open .faq-a { max-height: 240px; padding-bottom: 20px; }

/* Sticky mobile CTA on iscrizioni */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 12px var(--space-3);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
  display: none;
}
@media (max-width: 640px) { .sticky-cta.is-active { display: block; } }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-accent); color: #fff;
  padding: 12px 20px; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ===== Sponsors =====
   Logos sit in a centred wrapping row (flex, not a fixed grid) so the layout
   still reads well when the club adds a 4th/5th sponsor later. On pointer
   devices, hovering the group dims the logos and reveals the contact link;
   on touch/small screens there is no hover, so the link is shown inline
   instead — otherwise it would be unreachable there. */
.sponsors-section { background: var(--color-surface); }

.sponsor-group { position: relative; }

.sponsor-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  transition: opacity 400ms var(--ease-out), filter 400ms var(--ease-out);
}
.sponsor-item { flex: 0 1 200px; display: flex; justify-content: center; }
.sponsor-item img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 88px;
  opacity: 0.85;
  transition: opacity 300ms var(--ease-out);
}

.sponsor-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
  pointer-events: none;
}
/* The card background keeps the address legible over the blurred logos. */
.sponsor-mail {
  margin: 0;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  font-size: 1.02rem;
  color: var(--color-text-muted);
  text-align: center;
}
/* user-select:all lets a single click grab the whole address, which is the
   point of showing it: it stays usable when no mail client is configured. */
.sponsor-mail strong {
  color: var(--color-text);
  font-weight: 600;
  user-select: all;
  -webkit-user-select: all;
  white-space: nowrap;
}

@media (hover: hover) and (min-width: 861px) {
  .sponsor-group:hover .sponsor-grid,
  .sponsor-group:focus-within .sponsor-grid {
    opacity: 0.35;
    filter: blur(2px);
  }
  .sponsor-group:hover .sponsor-overlay,
  .sponsor-group:focus-within .sponsor-overlay {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
}

/* Touch / small screens: no hover, so surface the link permanently. */
@media (hover: none), (max-width: 860px) {
  .sponsor-overlay {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin-top: var(--space-4);
  }
}

/* ===== Contributi enti pubblici ===== */
.contributions-section { background: var(--color-primary-light); }
.contributions-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 720px;
  display: grid;
  gap: var(--space-2);
}
.contribution-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.contribution-entity {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text);
  flex: 1 1 260px;
}
.contribution-type {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  flex: 2 1 160px;
}
.contribution-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--color-primary-fg);
  white-space: nowrap;
  margin-left: auto;
}
@media (max-width: 640px) {
  .contribution-item { flex-direction: column; align-items: flex-start; }
  .contribution-entity, .contribution-type { flex: 0 0 auto; }
  .contribution-amount { margin-left: 0; }
}

/* ===== Social icons (footer) ===== */
.social-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
  margin: var(--space-3) 0 12px;
}
.social-links { display: flex; gap: 12px; }
.social-links a {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent);
  border: 2px solid rgba(255,255,255,0.9);
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: background 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.social-links a:hover {
  background: #fff;
  color: var(--color-accent-fg);
  transform: translateY(-4px) scale(1.06);
  box-shadow: var(--shadow-lg);
}
.social-links svg { width: 24px; height: 24px; }

/* ===== Timeline (Storia) ===== */
.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before {
  content: '';
  position: absolute;
  left: 27px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--color-border);
}
.timeline-item {
  position: relative;
  padding-left: 76px;
  margin-bottom: var(--space-5);
}
.timeline-item:last-child { margin-bottom: 0; }
.timeline-year {
  position: absolute;
  left: 0; top: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
  text-align: center;
  line-height: 1.15;
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
.timeline-item.is-highlight .timeline-year { background: var(--color-accent); }
.timeline-item h3 { margin-bottom: 6px; }
.timeline-item p { margin-bottom: 0; }

.highlight-card {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  background: linear-gradient(120deg, var(--color-accent-dark), var(--color-accent));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-lg);
}
.highlight-card .icon-badge {
  background: rgba(255,255,255,0.16);
  color: #fff;
  flex-shrink: 0;
}
.highlight-card h3 { color: #fff; margin-bottom: 4px; }
.highlight-card p { color: rgba(255,255,255,0.9); margin: 0; }

.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }
.stat-item strong { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--color-primary-fg); }
.stat-item span { color: var(--color-text-muted); font-size: 0.9rem; }

.tag-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.tag-list li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary-fg);
}

/* ===== Photo gallery (fanned stack) ===== */
.gallery-section { background: var(--color-surface); overflow: visible; }

.photo-stack {
  position: relative;
  height: 280px;
  margin: var(--space-6) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-card {
  position: absolute;
  top: 50%; left: 50%;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  background: var(--color-bg);
  transition: box-shadow 260ms var(--ease-out);
  will-change: transform;
}
.photo-card:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.photo-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.photo-card:hover,
.photo-card:focus-visible { box-shadow: var(--shadow-lg); }

.gallery-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }

@media (max-width: 700px) {
  .photo-stack {
    height: auto;
    display: flex;
    justify-content: flex-start;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 8px 8px 16px;
    margin-top: var(--space-4);
    -webkit-overflow-scrolling: touch;
  }
  .photo-card {
    position: relative;
    top: auto; left: auto; margin: 0;
    flex: 0 0 auto;
    width: 72vw;
    max-width: 260px;
    height: 72vw;
    max-height: 260px;
    scroll-snap-align: center;
    transform: none !important;
  }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(11, 21, 32, 0.9);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: min(90vw, 720px);
  max-height: 82vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.lightbox-close {
  position: absolute; top: 20px; right: 24px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,0.18); }