/* Polisportiva Sibilla Bacoli — direzione «Club», 14 ottobre 2026.
   Rifatta dopo la critica di Luca alla versione tutta blu notte («sembra AI slop», loghi ovunque).
   Presa dai siti di club curati (Venezia FC, FC St. Pauli): pagine chiare, blu notte solo per testata,
   aperture e piè di pagina, azzurro come accento, scudetto solo in testata e piè di pagina, niente ombre né filigrane.
   Colori dal PDF ufficiale dello scudetto: blu notte #0B2459, azzurro #009FE5. */
:root {
  --night: #0b2459;
  --night-2: #13306f;
  --accent: #009fe5;
  --accent-text: #006fa6; /* azzurro scuro per testi piccoli su fondo chiaro: 5,4:1 su bianco (l'azzurro pieno arriva a 3:1) */
  --bg: #ffffff;
  --surface: #f1f4f9;
  --text: #0b2459;
  --muted: #4b5b7c;
  --line: rgba(11, 36, 89, .14);
  --on-dark: #ffffff;
  --on-dark-muted: #b9c6e2;
  --on-dark-line: rgba(255, 255, 255, .16);
  --button-bg: #0b2459;
  --button-text: #ffffff;
  /* etichette «DA INSERIRE» */
  --todo: #8a6100;
  --todo-on-dark: #e6b422;
  --heading: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --body: 'Manrope', Arial, sans-serif;
  --gutter: 64px;
  --section-space: clamp(64px, 8vw, 112px);
  --header-height: 72px;
  --radius: 6px;
}

/* Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
main:focus { outline: none; }

h1, h2 { font-family: var(--heading); font-weight: 700; line-height: .95; text-transform: uppercase; }
h1 { font-size: clamp(52px, 8vw, 120px); }
h2 { font-size: clamp(38px, 5vw, 68px); }
h3 { font-size: 20px; font-weight: 700; line-height: 1.25; }
p { color: var(--muted); }

.wrap { width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 20px; background: var(--night); color: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.sprite { position: absolute; }
.icon { flex: none; width: 1em; height: 1em; vertical-align: -.12em; }

/* Dati mancanti: fuori palette apposta, per non dimenticarli prima di pubblicare */
.todo {
  display: inline-block;
  padding: 3px 8px;
  border: 1px dashed currentColor;
  color: var(--todo);
  font: 500 12px/1.5 ui-monospace, Menlo, Consolas, monospace;
  vertical-align: middle;
}
.todo::before { content: 'DA INSERIRE · '; }
.on-dark .todo, .site-footer .todo, .page-hero .todo { color: var(--todo-on-dark); }

/* Spazio per le fotografie della società: grigio-blu, dichiaratamente vuoto finché le foto non arrivano */
.photo-slot {
  position: relative;
  display: grid;
  place-items: end start;
  aspect-ratio: 4 / 3;
  padding: 16px;
  background: #dfe5ef;
  border-radius: var(--radius);
  overflow: hidden;
}
.photo-slot span { padding: 4px 10px; background: rgba(255, 255, 255, .85); color: var(--muted); border-radius: 999px; font-size: 12px; font-weight: 600; }

/* Pulsanti e link */
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  background: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--button-bg);
  border-radius: var(--radius);
  font: 700 15px/1.2 var(--body);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.button:hover { background: var(--accent); border-color: var(--accent); color: var(--night); }
.button-small { min-height: 42px; padding: 0 18px; font-size: 14px; }
.button-accent { background: var(--accent); border-color: var(--accent); color: var(--night); }
.button-accent:hover { background: #fff; border-color: #fff; color: var(--night); }
.button-dark { background: var(--night); border-color: var(--night); color: #fff; margin-top: 24px; }
.button-dark:hover { background: #fff; border-color: #fff; color: var(--night); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--accent);
}
.text-link:hover { color: var(--accent); }
.link-row { display: flex; flex-wrap: wrap; gap: 0 28px; }
.info-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.note { margin-top: 24px; font-size: 14px; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 95; width: max-content; max-width: calc(100% - 32px); padding: 12px 20px; transform: translateX(-50%); background: var(--accent); color: var(--night); box-shadow: 0 0 0 2px #fff; border-radius: var(--radius); font-size: 14px; font-weight: 600; }
.toast[hidden] { display: none; }

/* Etichetta sopra i titoli */
.kicker { margin-bottom: 14px; color: var(--accent-text); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.on-dark .kicker, .page-hero .eyebrow { color: var(--accent); }

/* Delfino dello scudetto (scelto da Luca il 15 ottobre 2026): solo nella banda della prova e nell'easter egg.
   Sull'azzurro della banda il corpo del delfino sparirebbe: un contorno bianco lo stacca dal fondo. */
.band { position: relative; overflow: hidden; }
.band-dolphin {
  position: absolute;
  bottom: clamp(24px, 3.5vw, 48px);
  right: var(--gutter);
  z-index: 1;
  width: clamp(80px, 8vw, 116px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.band-dolphin svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
  transition: transform .2s;
}
.band-dolphin:hover svg { transform: translateY(-6px); }
.band-dolphin.is-jumping svg { animation: dolphin-arrive 1.4s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes dolphin-arrive {
  0% { transform: translate(70px, 60px) rotate(40deg); opacity: 0; }
  25% { opacity: 1; }
  65% { transform: translate(-6px, -14px) rotate(-6deg); }
  100% { transform: none; }
}
/* Easter egg «Forza Sibilla!»: schermata intera come il «GOOOL» in televisione.
   Velo blu notte, scritta enorme che arriva di colpo, mare in basso e delfini che saltano davvero:
   escono dall'acqua col muso in su, ruotano lungo l'arco e rientrano col muso in giù (si muovono verso sinistra,
   come guarda il delfino dello scudetto). Durata 4 secondi; con «riduci movimento» solo la scritta, ferma. */
.goal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.goal-veil { position: absolute; inset: 0; background: rgba(11, 36, 89, .92); animation: goal-veil 4s ease both; }
.goal-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: goal-flash .5s ease-out .12s both; }
.goal-text { position: relative; z-index: 2; display: grid; justify-items: center; gap: .04em; margin-bottom: 14vh; font: 700 clamp(76px, 24vw, 340px)/.84 var(--heading); text-transform: uppercase; text-align: center; animation: goal-shake .45s linear .2s both; }
.goal-text > span { display: block; animation: goal-slam 4s cubic-bezier(.2, .9, .3, 1) both; }
.goal-text > span:first-child { color: #fff; }
.goal-text > span:last-child { animation-delay: .18s; }
.goal-text b { display: inline-block; padding: .02em .14em; background: var(--accent); color: var(--night); transform: skewX(-10deg); font-weight: 700; }
.goal-sea { position: absolute; z-index: 3; inset: auto 0 0; height: 26vh; animation: goal-sea 4s cubic-bezier(.3, .8, .3, 1) both; }
.goal-wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; animation: goal-wave 2.2s linear infinite; }
.goal-wave-back { color: #4cc0f0; bottom: 3vh; animation-duration: 3s; animation-direction: reverse; }
.goal-wave-front { z-index: 2; color: var(--accent); height: 70%; }
.goal-wave svg { display: block; width: 100%; height: 100%; }
.goal-jump { position: absolute; z-index: 1; bottom: 6vh; left: var(--x); width: var(--w); animation: goal-jump-x var(--d) linear var(--delay) both; }
.goal-jump svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); animation: goal-jump-arc var(--d) var(--delay) both; }
@keyframes goal-veil { 0% { opacity: 0; } 6%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes goal-flash { 0% { opacity: .55; } 100% { opacity: 0; } }
@keyframes goal-slam {
  0% { transform: scale(3.2); opacity: 0; }
  10% { transform: scale(.92); opacity: 1; }
  15% { transform: scale(1.05); }
  20%, 82% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes goal-shake {
  0%, 100% { transform: none; }
  20% { transform: translate(-10px, 6px); }
  40% { transform: translate(9px, -6px); }
  60% { transform: translate(-6px, -4px); }
  80% { transform: translate(5px, 4px); }
}
@keyframes goal-sea { 0% { transform: translateY(100%); } 14%, 84% { transform: none; } 100% { transform: translateY(100%); } }
@keyframes goal-wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes goal-jump-x { from { transform: translateX(0); } to { transform: translateX(var(--run)); } }
@keyframes goal-jump-arc {
  0% { transform: translateY(16vh) rotate(128deg); animation-timing-function: cubic-bezier(.15, .65, .45, 1); }
  50% { transform: translateY(var(--h)) rotate(62deg); animation-timing-function: cubic-bezier(.55, 0, .85, .35); }
  100% { transform: translateY(16vh) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { .goal-sea { display: none; } .goal-veil, .goal-text > span { opacity: 1; } }

/* Prossimo allenamento dell'annata scelta */
/* L'etichetta sta in fondo alla scheda, nel flusso: sopra l'orario lo copriva sotto i 1024 px (18 ottobre 2026). */
.finder-sessions li.is-next { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.finder-next { grid-column: 1 / -1; justify-self: start; margin-top: 4px; padding: 3px 10px; background: var(--accent); color: var(--night); border-radius: 999px; font-size: 12px; font-weight: 700; }

/* Testata: blu notte con filo azzurro, scudetto a sinistra */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--night); color: var(--on-dark); border-bottom: 3px solid var(--accent); }
.header-inner { position: relative; min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.brand-crest { flex: none; width: auto; height: 48px; }
.brand-name { min-width: 0; font: 700 22px/1 var(--heading); letter-spacing: .01em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); font-size: 14px; font-weight: 600; }
.main-nav > a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark-muted); transition: color .2s; }
.main-nav > a:not(.button):hover, .main-nav > a[aria-current='page'] { color: #fff; }
.main-nav > a[aria-current='page'] { box-shadow: inset 0 -3px 0 var(--accent); }
.main-nav .button { background: var(--accent); border-color: var(--accent); color: var(--night); }
.main-nav .button:hover { background: #fff; border-color: #fff; }
.menu-toggle { display: none; }

/* Apertura della home: fotografia a tutta larghezza, testo in basso a sinistra */
.hero { position: relative; display: grid; align-items: end; min-height: min(86svh, 860px); background: var(--night); color: var(--on-dark); overflow: hidden; }
.hero-media { position: absolute; inset: 0; background: var(--night-2); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* Velo per leggere il testo sopra la foto: più scuro in basso, dove sta il titolo */
/* Velo per leggere il testo sopra la foto: scuro a sinistra e in basso, dove sta il titolo; la destra della foto resta chiara */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 36, 89, .9) 0%, rgba(11, 36, 89, .7) 38%, rgba(11, 36, 89, 0) 72%),
    linear-gradient(to top, rgba(11, 36, 89, .6) 0%, rgba(11, 36, 89, 0) 45%);
  pointer-events: none;
}
@media (max-width: 760px) {
  .hero::after { background: linear-gradient(to top, rgba(11, 36, 89, .95) 0%, rgba(11, 36, 89, .8) 55%, rgba(11, 36, 89, .2) 100%); }
}
.hero-inner { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: start; padding-block: clamp(48px, 8vw, 96px); }
.eyebrow { color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hero-lead { max-width: 34em; color: var(--on-dark-muted); font-size: clamp(17px, 1.5vw, 20px); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.hero .button { background: var(--accent); border-color: var(--accent); color: var(--night); }
.hero .button:hover { background: #fff; border-color: #fff; }
.hero .text-link { color: #fff; }
.hero .eyebrow { color: #fff; }
.hero h1, .hero-lead, .hero .eyebrow { text-wrap: balance; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 6px 12px; border: 1px solid var(--on-dark-line); border-radius: 999px; color: var(--on-dark-muted); font-size: 13px; font-weight: 600; }

/* Apertura delle pagine interne: banda blu notte compatta */
.page-hero { background: var(--night); color: var(--on-dark); padding-block: clamp(48px, 7vw, 96px) clamp(36px, 5vw, 64px); }
.page-hero .wrap { display: grid; gap: 18px; justify-items: start; }
.page-hero h1 { font-size: clamp(52px, 8vw, 112px); }
.page-hero .hero-lead { color: var(--on-dark-muted); }

/* Sezioni */
.section { padding-block: var(--section-space); }
.section-alt { background: var(--surface); }
.section-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head .kicker { margin-bottom: 0; }
.section-head p { font-size: 18px; }
.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split > h2 { align-self: start; }
.split > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.prose { display: grid; gap: 16px; justify-items: start; max-width: 38em; }
.prose p { font-size: 18px; }

/* Schede (percorsi, campi): foto in alto, etichetta azzurra, titolo */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cards-two { grid-template-columns: repeat(2, 1fr); }
.card { position: relative; display: grid; gap: 12px; align-content: start; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.section-alt .card { border-color: transparent; }
.card-photo { padding: 0; overflow: hidden; }
.card-photo .photo-slot { border-radius: 0; }
.card-photo > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-photo .card-body { display: grid; gap: 10px; padding: 24px 28px 28px; }
.card h3 { font: 700 clamp(30px, 3vw, 42px)/.95 var(--heading); text-transform: uppercase; }
.card-meta { justify-self: start; padding: 4px 10px; background: rgba(0, 159, 229, .12); color: var(--night); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.card-link { transition: border-color .2s, transform .2s; }
.card-link h3 a::after { content: ''; position: absolute; inset: 0; }
.card-link h3 a:focus-visible { outline: 0; }
.card-link:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.card-cue { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 700; color: var(--night); }
@media (hover: hover) {
  .card-link:hover { border-color: var(--accent); transform: translateY(-2px); }
  .card-link:hover .card-cue { color: var(--accent); }
}

/* Punti e passaggi */
.points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.points li { display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 3px solid var(--accent); }
.points h3 { font: 700 clamp(26px, 2.4vw, 34px)/1 var(--heading); text-transform: uppercase; }
.points-numbered { grid-template-columns: repeat(3, 1fr); counter-reset: step; }
.points-numbered li { counter-increment: step; }
.points-numbered li::before { content: counter(step, decimal-leading-zero); color: var(--accent-text); font: 700 22px/1 var(--heading); }

/* Trova il tuo allenamento: annate come pulsanti, sedute come schede da calendario partite */
.finder-years { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.finder-years[hidden] { display: none; }
.finder-years button {
  min-height: 46px;
  padding: 0 18px;
  background: #fff;
  color: var(--night);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 700 18px/1 var(--heading);
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.finder-years button:hover { border-color: var(--night); }
.finder-years button[aria-pressed='true'] { background: var(--night); border-color: var(--night); color: #fff; }
.finder-group[hidden] { display: none; }
.finder-group + .finder-group { margin-top: 40px; }
.finder.is-ready .finder-group + .finder-group { margin-top: 0; }
.finder-group header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; }
.finder-group h3 { font: 700 clamp(32px, 3.4vw, 44px)/1 var(--heading); text-transform: uppercase; }
.finder-group header p { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.finder-sessions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.finder-sessions li { display: grid; gap: 6px; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.finder-day { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.finder-time { font: 700 clamp(30px, 3vw, 40px)/1 var(--heading); }
.finder-field { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }

/* Programma completo (pagina Orari e campi) */
.schedule + .schedule { margin-top: clamp(48px, 6vw, 80px); }
.schedule-title { margin-bottom: 24px; color: var(--accent-text); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.schedule .finder-group + .finder-group { margin-top: 32px; }

/* Staff per ruolo */
.staff-row { display: grid; grid-template-columns: 1fr 2fr; gap: 16px 32px; padding-block: 24px; border-top: 1px solid var(--line); }
.staff-row:last-child { border-bottom: 1px solid var(--line); }
.staff dt { font: 700 clamp(22px, 2.2vw, 30px)/1.05 var(--heading); text-transform: uppercase; }
.staff ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; }
.staff li { font-weight: 700; }
.staff li span { display: block; color: var(--muted); font-size: 14px; font-weight: 400; }

/* Banda scura con il Castello di Baia e l'invito alla prova. Il delfino sta in basso a destra, accanto al pulsante, dove c'è spazio libero. */
.band {
  padding-block: clamp(56px, 7vw, 96px);
  /* Il Castello di Baia dalla foto di apertura, in alto, sotto un velo blu notte: i ragazzi in campo restano fuori inquadratura. */
  background: linear-gradient(rgba(11, 36, 89, .78), rgba(11, 36, 89, .9)), url(/assets/images/apertura-1440.webp) 50% 6% / cover, var(--night);
  color: #fff;
}
.band-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 6vw, 96px); align-items: end; }
.band p { color: #fff; font-size: 18px; }
.band .button-dark { background: var(--accent); border-color: var(--accent); color: var(--night); }
.band .button-dark:hover { background: #fff; border-color: #fff; }

/* Piè di pagina: blu notte, scudetto piccolo, colonne */
.site-footer { padding-top: clamp(56px, 7vw, 88px); padding-bottom: 32px; background: var(--night); color: var(--on-dark); font-size: 14px; }
.site-footer p { color: var(--on-dark-muted); }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding-bottom: 40px; border-bottom: 1px solid var(--on-dark-line); }
.footer-brand { display: inline-flex; align-items: center; gap: 16px; }
.footer-brand img { width: auto; height: 64px; }
.footer-brand strong { display: block; font: 700 clamp(24px, 2.4vw, 32px)/1 var(--heading); text-transform: uppercase; }
.footer-brand em { display: block; margin-top: 6px; color: var(--on-dark-muted); font-style: normal; }
.footer-top .button { background: var(--accent); border-color: var(--accent); color: var(--night); }
.footer-top .button:hover { background: #fff; border-color: #fff; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-block: 40px; border-bottom: 1px solid var(--on-dark-line); }
.footer-title { margin-bottom: 14px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.footer-cols li + li { margin-top: 8px; }
.footer-cols a:hover { color: var(--accent); }
.footer-fields strong { display: block; font-weight: 700; }
.footer-fields span { color: var(--on-dark-muted); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; padding-top: 24px; }
.site-footer .credit a, .back-top { text-decoration: underline; text-underline-offset: 4px; }
.back-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* Pagina non trovata */
.not-found { min-height: 60vh; min-height: 60svh; display: grid; align-items: center; padding-block: var(--section-space); }
.not-found p { max-width: 24em; margin: 20px 0 32px; font-size: 18px; }

.mobile-actions { display: none; }

/* Comparsa allo scorrimento: attiva solo se js/main.js aggiunge .reveal-on */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal-on [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .points { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* Sotto 1180 px (sei voci di menu) il menu diventa un pannello che si apre dal pulsante. Senza JavaScript resta in vista, incolonnato. */
@media (max-width: 1180px) {
  .header-inner { flex-wrap: wrap; padding-block: 8px; }
  .main-nav { flex-basis: 100%; flex-wrap: wrap; gap: 4px 24px; }
  .js .header-inner { flex-wrap: nowrap; padding-block: 0; }
  .js .menu-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0 0 16px; border: 0; background: none; color: inherit; font: 700 14px/1 var(--body); cursor: pointer; }
  .js .main-nav {
    display: none;
    position: absolute;
    top: calc(100% + 3px);
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--night);
    border-bottom: 3px solid var(--accent);
    font-size: 16px;
  }
  .js .main-nav.is-open { display: flex; }
  .js .main-nav > a:not(.button) { min-height: 52px; border-bottom: 1px solid var(--on-dark-line); color: #fff; }
  .js .main-nav > a[aria-current='page'] { box-shadow: none; color: var(--accent); }
  .js .main-nav .button { margin-top: 20px; }
}

@media (max-width: 900px) {
  .split, .band-inner { grid-template-columns: 1fr; }
  .finder-sessions { grid-template-columns: 1fr; gap: 10px; }
  .finder-sessions li { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 16px; }
  .finder-day { grid-row: 1; }
  .finder-time { grid-column: 2; grid-row: 1; justify-self: end; }
  .finder-field { grid-column: 1 / -1; }
}

/* Telefono */
@media (max-width: 760px) {
  :root { --gutter: 20px; --header-height: 64px; }
  .cards, .cards-two, .points, .points-numbered, .footer-cols { grid-template-columns: 1fr; }
  .staff-row, .staff ul { grid-template-columns: 1fr; }
  .hero { min-height: min(92svh, 760px); }
  .mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 10px;
    position: fixed;
    inset: auto 0 0;
    z-index: 20;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--night);
    border-top: 3px solid var(--accent);
    transition: transform .25s, visibility .25s;
  }
  .mobile-actions.is-hidden { transform: translateY(110%); visibility: hidden; }
  .mobile-actions a { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--on-dark-line); border-radius: var(--radius); color: #fff; font-size: 15px; font-weight: 700; }
  .mobile-actions .is-primary { background: var(--accent); border-color: var(--accent); color: var(--night); }
  .has-mobile-actions .site-footer { padding-bottom: calc(32px + 72px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
  .header-inner { gap: 12px; }
  .brand-crest { height: 40px; }
  .brand-name { font-size: 18px; line-height: 1.05; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .site-header, .mobile-actions, .toast, .skip-link { display: none; }
}

/* Nel programma completo il settore è già scritto sopra il gruppo di annate */
.schedule .finder-group header p { display: none; }


/* Telefoni stretti: delfino della banda più piccolo, per non toccare il pulsante */
@media (max-width: 360px) { .band-dolphin { width: 64px; } }

/* Crea la tua carta */
.card-maker { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.card-stage { position: sticky; top: calc(var(--header-height) + 24px); display: grid; gap: 12px; justify-items: center; }
.card-canvas { width: 100%; max-width: 420px; height: auto; aspect-ratio: 5 / 7; border-radius: 18px; box-shadow: 0 18px 40px rgba(11, 36, 89, .25); touch-action: none; }
.card-form { display: grid; gap: 22px; max-width: 520px; }
.card-noscript { display: none; }
.card-form .field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.card-form .field-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.card-form label, .card-form legend { padding: 0; color: var(--night); font-size: 14px; font-weight: 700; }
.card-form input[type='text'], .card-form input[type='number'], .card-form select, .card-form input[type='file'] {
  width: 100%; min-height: 48px; padding: 0 14px; background: #fff; color: var(--night);
  border: 1px solid var(--line); border-radius: var(--radius); font: 500 16px/1.2 var(--body);
}
.card-form input[type='file'] { padding: 10px 14px; }
.card-form input:focus-visible, .card-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-form input[type='range'] { width: 100%; accent-color: var(--accent); }
.card-form .stats { gap: 14px; }
.card-form .stats label { display: grid; gap: 4px; font-weight: 600; }
.card-form .rarity { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.card-form .rarity legend { grid-column: 1 / -1; margin-bottom: 8px; }
.card-form .rarity label { position: relative; display: block; }
.card-form .rarity input { position: absolute; opacity: 0; inset: 0; }
.card-form .rarity span { display: flex; justify-content: center; align-items: center; min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; }
.card-form .rarity input:checked + span { background: var(--night); border-color: var(--night); color: #fff; }
.card-form .rarity input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-form .note { margin-top: 0; }
.card-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.card-actions .button { margin-top: 0; }
.card-actions [hidden] { display: none; }
.js .card-noscript { display: none; }
html:not(.js) .card-noscript { display: block; }
@media (max-width: 900px) {
  .card-maker { grid-template-columns: 1fr; }
  .card-stage { position: static; }
}

/* Azioni sotto ogni annata: prenota la prova, aggiungi al calendario */
.finder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 20px; }
.finder-actions .button { min-height: 46px; }
.finder-actions button.text-link { padding: 0; background: none; border: 0; color: inherit; font: 700 15px/1.2 var(--body); cursor: pointer; }
.finder-actions [hidden] { display: none; }

/* Schede dei campi: mappa a richiesta e come arrivare */
.field-cards .card { align-content: start; }
.field-years { font-size: 14px; }
.field-how { display: grid; gap: 8px; margin: 0; font-size: 15px; }
.field-how dt { color: var(--night); font-weight: 700; }
.field-how dd { margin: 0; color: var(--muted); }
.field-photo { width: calc(100% + 56px); max-width: none; margin: -28px -28px 4px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.map-placeholder { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; min-height: 150px; padding: 0; background: var(--surface); color: var(--night); border: 1px dashed var(--line); border-radius: var(--radius); font: 700 15px/1.2 var(--body); cursor: pointer; transition: border-color .2s; }
.map-placeholder:hover { border-color: var(--night); }
.field-cards iframe { width: 100%; height: 220px; border: 0; border-radius: var(--radius); }
.section-alt .map-placeholder { background: var(--surface); }

/* Scelta della foto: riquadro da toccare al posto del campo file del browser */
.card-form .field-label { color: var(--night); font-size: 14px; font-weight: 700; }
.photo-pick { position: relative; display: grid; gap: 10px; }
.photo-pick input[type='file'] { position: absolute; width: 1px; height: 1px; padding: 0; min-height: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.photo-pick-button { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 76px; padding: 0 20px; background: var(--surface); color: var(--night); border: 2px dashed rgba(11, 36, 89, .3); border-radius: var(--radius); font: 700 16px/1.2 var(--body); cursor: pointer; transition: border-color .2s, background .2s; }
.photo-pick-button svg { flex: none; color: var(--accent); }
.photo-pick-button:hover { background: #fff; border-color: var(--night); border-style: solid; }
.photo-pick input:focus-visible + .photo-pick-button { outline: 2px solid var(--accent); outline-offset: 3px; }
.photo-pick-name { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.photo-pick button.text-link { justify-self: start; min-height: 32px; padding: 0; background: none; border: 0; color: inherit; font: 700 14px/1.2 var(--body); cursor: pointer; }
.photo-pick [hidden] { display: none; }
.card-form .zoom-label { margin-top: 8px; font-weight: 600; }
/* Lo zoom compare solo quando c'è una foto da ingrandire */
.card-form [data-card-zoom]:disabled, .card-form .zoom-label:has(+ [data-card-zoom]:disabled) { display: none; }

/* Fascia dei numeri */
.facts { background: var(--bg); border-bottom: 1px solid var(--line); }
.facts-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: clamp(32px, 4vw, 56px); }
.facts-list li { display: grid; gap: 4px; align-content: start; padding-left: 20px; border-left: 4px solid var(--accent); }
.facts-list strong { font: 700 clamp(56px, 6vw, 92px)/.9 var(--heading); color: var(--night); }
.facts-list span { color: var(--muted); font-size: 15px; font-weight: 600; }
@media (max-width: 760px) { .facts-list { grid-template-columns: 1fr 1fr; gap: 28px 16px; } }
.legal-link { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--on-dark-line); }
.legal-link:hover { color: #fff; text-decoration-color: var(--accent); }
@media (max-width: 900px) { .band { background-image: linear-gradient(rgba(11, 36, 89, .78), rgba(11, 36, 89, .9)), url(/assets/images/apertura-900.webp); } }