/*
Theme Name:   Skate On Ice
Theme URI:    https://www.ssdskateonice.com
Author:       S.S.D. Skate On Ice
Description:  Tema su misura per S.S.D. Skate On Ice — pattinaggio artistico a Desio e Sesto San Giovanni. Home one-page con hero video, corsi, sedi, staff, gallery, rassegna stampa e contatti; pagina Gallery con filtri.
Version:      1.4.6
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  skateonice
*/

  /* ═══════════════════════════════════════════════════════════════════
     TOKENS — Neutral Modern riconciliato con il brand Skate On Ice.
     Nomi da design system attivo, valori dal logo (vedi brand-spec.md).
     Nessun hex fuori da questo blocco.
     ═══════════════════════════════════════════════════════════════════ */
  :root {
    /* superfici */
    --bg:        #F7FAFB;
    --surface:   #FFFFFF;
    --ink-deep:  #05283A;
    --ink-deep-2:#083A52;

    /* testo */
    --fg:        #10222E;
    --muted:     #5B717D;
    --border:    #DCE6EB;

    /* accento */
    --accent:    #084A6B;
    --accent-on: #FFFFFF;
    --ice:       #80DCF2;

    /* stato */
    --success:   #17A34A;
    --danger:    #DC2626;

    /* derivati */
    --accent-soft: color-mix(in oklab, var(--accent) 10%, transparent);
    --ice-soft:    color-mix(in oklab, var(--ice) 18%, transparent);
    --fg-soft:     color-mix(in oklab, var(--fg) 6%, transparent);
    --on-deep:     color-mix(in oklab, var(--surface) 78%, var(--ink-deep));

    /* tipografia */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

    --fs-display: clamp(46px, 9.5vw, 132px);
    --fs-h1: clamp(36px, 6vw, 76px);
    --fs-h2: clamp(28px, 4.2vw, 52px);
    --fs-h3: clamp(19px, 1.6vw, 23px);
    --fs-lead: clamp(16px, 1.5vw, 20px);
    --fs-body: 16px;
    --fs-meta: 13px;

    /* spazio */
    --gap-xs: 8px;  --gap-sm: 12px; --gap-md: 20px;
    --gap-lg: 32px; --gap-xl: 56px; --gap-2xl: clamp(64px, 9vw, 120px);
    --container: 1200px;
    --gutter: clamp(18px, 4vw, 40px);

    --radius-sm: 8px; --radius: 12px; --radius-lg: 20px; --radius-pill: 999px;
    --elev: 0 2px 8px color-mix(in oklab, var(--fg), transparent 90%);
    --elev-lift: 0 14px 34px color-mix(in oklab, var(--ink-deep), transparent 86%);
    --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 66%);
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --nav-h: 68px;
    --t-fast: .18s;
  }

  /* ─── reset & base ─────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--bg); color: var(--fg);
    font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  img, svg, video { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
  p { text-wrap: pretty; margin: 0; }
  h1, h2, h3, h4 { text-wrap: balance; margin: 0; font-family: var(--font-display); }
  :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
  ul { margin: 0; padding: 0; list-style: none; }

  /* ─── primitive ────────────────────────────────────────────────── */
  .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
  .section { padding-block: var(--gap-2xl); position: relative; }
  .stack { display: flex; flex-direction: column; }
  .stack > * + * { margin-top: var(--gap-md); }
  .row { display: flex; align-items: center; gap: var(--gap-md); flex-wrap: wrap; }
  .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); flex-wrap: wrap; }
  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
  .grid-2-1 { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--gap-2xl); align-items: start; }

  /* ─── tipo ─────────────────────────────────────────────────────── */
  h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; }
  h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.03em; font-weight: 800; }
  h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; }
  .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); max-width: 58ch; }
  .eyebrow {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--accent);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; }
  .meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); letter-spacing: 0.02em; }
  .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  /* ─── bottoni ──────────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 46px; padding: 12px 22px; border-radius: var(--radius-pill);
    font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
    border: 1px solid transparent;
    transition: background .18s var(--ease), border-color .18s var(--ease),
                color .18s var(--ease), transform .12s var(--ease);
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }
  .btn-primary:hover { background: color-mix(in oklab, var(--accent), black 14%); }
  .btn-secondary { border-color: var(--border); color: var(--fg); background: var(--surface); }
  .btn-secondary:hover { border-color: var(--fg); }
  .btn-ice { background: var(--ice); color: var(--ink-deep); border-color: var(--ice); }
  .btn-ice:hover { background: color-mix(in oklab, var(--ice), white 22%); }
  .btn-outline-ice { border-color: color-mix(in oklab, var(--ice), transparent 55%); color: var(--on-deep); }
  .btn-outline-ice:hover { border-color: var(--ice); color: var(--ice); }
  .btn-arrow svg { width: 15px; height: 15px; transition: transform .18s var(--ease); }
  .btn-arrow:hover svg { transform: translateX(3px); }

  /* ═══ NAV ═══════════════════════════════════════════════════════ */
  /* Barra piatta alta quanto la nav, bianca al 70% di opacita':
     nessuna sfumatura verso il basso, nessuna dissolvenza sul contenuto. */
  .topnav {
    position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h);
    display: flex; align-items: center;
  }
  .topnav::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: color-mix(in oklab, var(--surface) 70%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.25);
    backdrop-filter: blur(12px) saturate(1.25);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease);
  }
  .topnav.is-solid::before {
    border-bottom-color: color-mix(in oklab, var(--border) 70%, transparent);
  }
  .topnav-inner {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); width: 100%;
  }
  /* Lockup scontornato (PNG con canale alfa): appoggia diretto sul velo, niente piastra. */
  .brand { display: inline-flex; align-items: center; gap: 10px; }
  .brand img { height: 38px; width: auto; display: block; }
  .brand .brand-fallback {
    font-family: var(--font-display); font-weight: 800; font-size: 17px;
    letter-spacing: -0.03em; line-height: 1; color: var(--accent);
  }
  .topnav nav { display: flex; gap: clamp(14px, 2vw, 30px); }
  .topnav nav a {
    font-size: 14px; font-weight: 500; color: var(--muted);
    padding: 6px 2px; position: relative; transition: color .18s var(--ease);
  }
  .topnav nav a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
    background: var(--accent); transition: right .24s var(--ease);
  }
  .topnav nav a:hover, .topnav nav a.is-active { color: var(--fg); }
  .topnav nav a.is-active::after, .topnav nav a:hover::after { right: 0; }

  /* Hamburger: occupa tutta l'altezza dell'header, tre filetti allineati a destra. */
  .nav-burger {
    display: none; width: 46px; height: var(--nav-h);
    flex-direction: column; align-items: flex-end; justify-content: center; gap: 9px;
    background: none; border: 0; padding: 0;
  }
  .nav-burger i {
    display: block; width: 32px; height: 2px; border-radius: 2px;
    background: var(--fg); transition: width .26s var(--ease);
  }
  .nav-burger i:nth-child(2) { width: 21px; }
  .nav-burger:hover i:nth-child(2) { width: 32px; }

  /* ── Drawer mobile: entra da destra, copre tutto lo schermo ──────
     Sta sopra l'header (z-index > 60) e porta il proprio comando di
     chiusura, cosi' il velo bianco della barra non lo sbianca. */
  html.is-menu-open { overflow: hidden; }
  .mobile-panel {
    position: fixed; inset: 0; z-index: 70;
    display: flex; flex-direction: column;
    background: linear-gradient(158deg, var(--ink-deep) 0%, var(--ink-deep-2) 100%);
    color: var(--surface);
    transform: translateX(100%); visibility: hidden;
    transition: transform .42s var(--ease), visibility .42s var(--ease);
    overscroll-behavior: contain;
  }
  .mobile-panel.is-open { transform: none; visibility: visible; }
  .mobile-panel::after {
    content: ''; position: absolute; inset: auto -30% -25% 20%; pointer-events: none;
    background: radial-gradient(circle, var(--ice-soft), transparent 70%);
    aspect-ratio: 1; filter: blur(30px);
  }
  .mp-top {
    position: relative; z-index: 1; flex: 0 0 auto; height: var(--nav-h);
    display: flex; align-items: center; justify-content: flex-end;
    padding-inline: var(--gutter);
  }
  .mp-close {
    width: 46px; height: var(--nav-h); margin-right: -11px;
    display: grid; place-items: center; color: var(--surface);
    transition: color .2s var(--ease);
  }
  .mp-close:hover { color: var(--ice); }
  .mp-close svg { width: 26px; height: 26px; }
  .mp-nav {
    position: relative; z-index: 1; flex: 1 1 auto; overflow-y: auto;
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    gap: 2px; padding: var(--gap-lg) var(--gutter); text-align: right;
    overflow-x: hidden;
  }
  .mp-nav a {
    display: flex; align-items: baseline; justify-content: flex-end; gap: 14px;
    width: 100%; padding: 11px 0;
    font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
    font-size: clamp(30px, 8vw, 44px); line-height: 1.06; letter-spacing: -0.04em;
    color: var(--surface); opacity: 0; transform: translateX(30px);
    transition: opacity .36s var(--ease), transform .36s var(--ease), color .2s var(--ease);
  }
  .mp-lab { text-align: right; text-wrap: balance; }
  .mobile-panel.is-open .mp-nav a {
    opacity: 1; transform: none;
    transition-delay: calc(90ms + var(--i, 0) * 55ms);
  }
  .mp-nav a:hover, .mp-nav a:focus-visible, .mp-nav a[aria-current="page"] { color: var(--ice); }
  .mp-num {
    font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em;
    color: color-mix(in oklab, var(--ice) 62%, transparent);
  }
  .mp-foot {
    position: relative; z-index: 1; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: stretch;
    padding: var(--gap-md) var(--gutter) calc(var(--gap-md) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid color-mix(in oklab, var(--surface) 16%, transparent);
  }
  .mp-foot .btn { width: 100%; justify-content: center; }

  /* ═══ HERO VIDEO ════════════════════════════════════════════════ */
  .hero {
    position: relative; min-height: 100svh; display: grid; align-items: end;
    background: var(--ink-deep); color: var(--surface); overflow: hidden;
    padding-block: calc(var(--nav-h) + 40px) clamp(40px, 7vh, 76px);
  }
  .video-stage { position: absolute; inset: 0; overflow: hidden; }
  .hero-video { width: 100%; height: 100%; object-fit: cover; }

  /* fondo animato: piano di ghiaccio + scie di lama. Si vede finché il
     video reale non viene inserito (vedi HERO_VIDEO_SRC nello script). */
  .ice-field { position: absolute; inset: -10%; }
  .ice-field span {
    position: absolute; border-radius: 50%; filter: blur(60px);
    background: radial-gradient(circle, var(--ice-soft), transparent 70%);
    animation: drift 26s var(--ease) infinite alternate;
  }
  .ice-field span:nth-child(1) { width: 58vw; height: 58vw; left: -8%;  top: -14%; animation-duration: 24s; }
  .ice-field span:nth-child(2) { width: 46vw; height: 46vw; right: -6%; top: 18%;  animation-duration: 31s; animation-delay: -6s; }
  .ice-field span:nth-child(3) { width: 40vw; height: 40vw; left: 34%;  bottom: -18%; animation-duration: 28s; animation-delay: -12s;
    background: radial-gradient(circle, color-mix(in oklab, var(--ink-deep-2) 80%, var(--ice)), transparent 70%); }
  @keyframes drift {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(4vw, -3vh, 0) scale(1.14); }
  }
  .blade-trails { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
  .blade-trails path {
    fill: none; stroke: var(--ice); stroke-width: .55; stroke-linecap: round;
    stroke-dasharray: 260; stroke-dashoffset: 260;
    animation: carve 9s var(--ease) infinite;
  }
  .blade-trails path:nth-child(2) { animation-delay: 1.6s; opacity: .6; }
  .blade-trails path:nth-child(3) { animation-delay: 3.4s; opacity: .35; }
  @keyframes carve {
    0%   { stroke-dashoffset: 260; opacity: 0; }
    18%  { opacity: .9; }
    62%  { stroke-dashoffset: 0; opacity: .5; }
    100% { stroke-dashoffset: -260; opacity: 0; }
  }
  .hero-scrim {
    position: absolute; inset: 0;
    background:
      linear-gradient(to top, var(--ink-deep) 4%, color-mix(in oklab, var(--ink-deep) 55%, transparent) 46%, color-mix(in oklab, var(--ink-deep) 72%, transparent) 100%);
  }
  .hero-inner { position: relative; z-index: 2; width: 100%; }
  .hero h1 {
    font-size: var(--fs-display); line-height: .9; letter-spacing: -0.05em;
    font-weight: 800; margin: clamp(14px, 2vw, 22px) 0 clamp(16px, 2vw, 24px);
    text-transform: uppercase;
  }
  .hero h1 .line { display: block; overflow: hidden; }
  .hero h1 .line > span { display: block; transform: translateY(102%); animation: riseIn .95s var(--ease) forwards; }
  .hero h1 .line:nth-child(1) > span { animation-delay: .12s; }
  .hero h1 .line:nth-child(2) > span { animation-delay: .24s; }
  .hero h1 em { font-style: normal; color: var(--ice); }
  @keyframes riseIn { to { transform: translateY(0); } }
  .hero .lead { color: color-mix(in oklab, var(--surface) 74%, transparent); max-width: 46ch; }
  .hero-names { color: var(--surface); font-weight: 500; }
  .hero-cta { margin-top: clamp(26px, 4vw, 42px); display: flex; gap: var(--gap-sm); flex-wrap: wrap; }

  /* segnaposto video */
  .video-badge {
    position: absolute; z-index: 3; right: var(--gutter); top: calc(var(--nav-h) + 24px);
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px 10px 12px; border-radius: var(--radius-pill);
    background: color-mix(in oklab, var(--ink-deep) 62%, transparent);
    border: 1px solid color-mix(in oklab, var(--ice), transparent 74%);
    backdrop-filter: blur(10px);
  }
  .video-badge .dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--ice); flex: none;
    animation: pulse 2.4s var(--ease) infinite;
  }
  @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
  .video-badge .meta { color: color-mix(in oklab, var(--surface) 76%, transparent); }
  .video-play {
    position: absolute; z-index: 3; right: calc(var(--gutter) + 14px); top: 40%; transform: translateY(-50%);
    width: clamp(76px, 9vw, 104px); height: clamp(76px, 9vw, 104px); border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in oklab, var(--surface) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--ice), transparent 62%);
    backdrop-filter: blur(8px); color: var(--surface);
    transition: background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
  }
  .video-play:hover { background: color-mix(in oklab, var(--ice) 26%, transparent); border-color: var(--ice); transform: translateY(-50%) scale(1.06); }
  .video-play svg { width: 26px; height: 26px; margin-left: 4px; }
  .video-play span {
    position: absolute; bottom: -34px; right: 0;
    white-space: nowrap; text-align: right; font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
    color: color-mix(in oklab, var(--surface) 66%, transparent);
  }
  /* con il filmato reale il bottone diventa un comando audio discreto, in basso a destra */
  .video-play .wave-1, .video-play .wave-2 { opacity: 0; transition: opacity .18s var(--ease); }
  .video-play.is-on .wave-1 { opacity: 1; }
  .video-play.is-on .wave-2 { opacity: .55; }
  .video-play.is-audio {
    width: 54px; height: 54px; top: auto; bottom: calc(var(--gutter) + 18px);
    right: var(--gutter); transform: none;
  }
  .video-play.is-audio:hover { transform: scale(1.06); }
  .video-play.is-audio svg { width: 20px; height: 20px; margin-left: 0; }
  .video-play.is-audio span {
    bottom: auto; top: 50%; right: calc(100% + 12px); transform: translateY(-50%);
  }
  @media (max-width: 640px) {
    .video-play.is-audio { width: 46px; height: 46px; bottom: calc(var(--gutter) + 10px); }
    .video-play.is-audio span { display: none; }
  }
  /* ═══ TICKER ════════════════════════════════════════════════════ */
  .ticker {
    background: var(--accent); color: var(--accent-on);
    padding-block: 15px; overflow: hidden; white-space: nowrap;
    border-block: 1px solid var(--accent);
  }
  .ticker-track { display: inline-flex; gap: 0; animation: slide 34s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  .ticker-track span {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em;
    text-transform: uppercase; padding-inline: 26px;
    display: inline-flex; align-items: center; gap: 26px;
  }
  .ticker-track span::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ice); }
  @keyframes slide { to { transform: translateX(-50%); } }

  /* ═══ REVEAL ════════════════════════════════════════════════════ */
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }
  .reveal[data-d="1"] { transition-delay: .08s; }
  .reveal[data-d="2"] { transition-delay: .16s; }
  .reveal[data-d="3"] { transition-delay: .24s; }
  .reveal[data-d="4"] { transition-delay: .32s; }

  /* ═══ CARD ══════════════════════════════════════════════════════ */
  .card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: clamp(20px, 2.4vw, 30px);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  }
  .card-int:hover { transform: translateY(-5px); box-shadow: var(--elev-lift); border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); }
  .mark {
    width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent); margin-bottom: var(--gap-md); flex: none;
  }
  .mark svg { width: 20px; height: 20px; }
  /* ═══ SOCIETÀ / STAT ════════════════════════════════════════════ */
  .stat-num {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(30px, 3vw, 40px); line-height: .95; letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
  }
  .stat-label { color: var(--muted); font-size: 13px; line-height: 1.35; margin-top: 6px; max-width: 17ch; }
  /* griglia 2x2: tiene la scheda bassa quanto il testo che le sta accanto */
  .stat-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; }
  .stat-cell { padding: 16px 0; border-top: 1px solid var(--border); }
  .stat-cell:nth-child(-n+2) { border-top: 0; padding-top: 0; }
  .stat-cell:nth-child(odd) { padding-right: 16px; }
  .stat-cell:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--border); }

  /* ═══ TAB CORSI ═════════════════════════════════════════════════ */
  .tabs { display: flex; gap: 8px; flex-wrap: wrap; }
  .tab {
    padding: 10px 18px; border-radius: var(--radius-pill); min-height: 44px;
    border: 1px solid var(--border); background: var(--surface);
    font-size: 14px; font-weight: 600; color: var(--muted);
    transition: all .18s var(--ease);
  }
  .tab:hover { color: var(--fg); border-color: var(--fg); }
  .tab[aria-selected="true"] { background: var(--fg); border-color: var(--fg); color: var(--surface); }
  .tabpanel[hidden] { display: none; }
  .course { display: grid; grid-template-columns: auto 1fr; gap: var(--gap-md); align-items: start; }
  .course p { color: var(--muted); font-size: 15px; margin-top: 6px; }
  .course ul { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
  .course li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--muted); }
  .course li::before {
    content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px;
    border-radius: 50%; border: 1.5px solid var(--accent);
  }

  /* ═══ SEDI (fascia scura) ═══════════════════════════════════════ */
  .band-deep { background: var(--ink-deep); color: var(--surface); }
  .band-deep .lead { color: color-mix(in oklab, var(--surface) 66%, transparent); }
  .band-deep .eyebrow { color: var(--ice); }
  .band-deep .meta { color: color-mix(in oklab, var(--surface) 58%, transparent); }
  /* Le due sedi sono card piatte: niente ombre, niente gradienti, niente
     testate colorate — solo filetti. La misura della pista e' il dato
     dominante e resta disegnata in scala reale fra le due sedi. */
  .venues { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2vw, 26px); }
  .venue-card {
    background: var(--surface); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: clamp(24px, 3vw, 38px);
    display: flex; flex-direction: column;
  }
  .venue-city {
    margin: 0 0 14px; font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  }
  .venue-card h3 { font-size: clamp(25px, 2.7vw, 35px); letter-spacing: -0.03em; margin: 0; }
  .venue-addr { margin: 9px 0 0; color: var(--muted); font-size: 15px; }

  /* misura della pista: pianta in scala + cifra in evidenza */
  .venue-size {
    margin: clamp(22px, 2.6vw, 30px) 0 0;
    padding: clamp(18px, 2.2vw, 24px) 0;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: clamp(16px, 2vw, 26px);
  }
  .venue-size svg { flex: none; height: auto; }
  .venue-size rect { fill: var(--ice-soft); stroke: var(--accent); stroke-width: .9; }
  .venue-size dt {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
  }
  .venue-size dd {
    margin: 7px 0 0; font-family: var(--font-display); font-weight: 800;
    font-size: clamp(29px, 3.4vw, 42px); letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums; line-height: 1;
  }
  .venue-size dd small {
    font-size: .42em; font-weight: 600; letter-spacing: 0;
    color: var(--muted); margin-left: 6px;
  }

  .venue-when { padding: clamp(18px, 2.2vw, 24px) 0 0; }
  .venue-lab {
    margin: 0; font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  }
  .venue-days { margin: 9px 0 0; font-size: clamp(16px, 1.5vw, 19px); font-weight: 700; letter-spacing: -0.015em; }

  .venue-link {
    margin-top: auto; padding-top: clamp(20px, 2.4vw, 28px);
    display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
    color: var(--accent); font-weight: 700; font-size: 15px; text-decoration: none;
  }
  .venue-link svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
  .venue-link:hover svg { transform: translateX(4px); }
  .venue-link:hover { text-decoration: underline; text-underline-offset: 4px; }

  /* ═══ STAFF ═════════════════════════════════════════════════════ */
  .coach { position: relative; }
  .coach .ph-portrait {
    aspect-ratio: 3 / 4; border-radius: var(--radius); border: 1px solid var(--border);
    background:
      radial-gradient(120% 90% at 50% 8%, var(--ice-soft), transparent 62%),
      var(--surface);
    display: grid; place-items: center; overflow: hidden;
    transition: transform .3s var(--ease), border-color .3s var(--ease);
  }
  .coach:hover .ph-portrait { transform: translateY(-4px); border-color: color-mix(in oklab, var(--accent) 34%, var(--border)); }
  .coach .ph-portrait img {
    width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
    transition: transform .5s var(--ease);
  }
  .coach:hover .ph-portrait img { transform: scale(1.035); }
  .coach h3 { margin-top: 14px; font-size: 17px; }
  .coach .role { color: var(--muted); font-size: 13.5px; margin-top: 3px; line-height: 1.45; text-wrap: pretty; }

  /* ═══ GALLERY ═══════════════════════════════════════════════════ */
  .gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; grid-auto-rows: 168px; }
  .shot {
    position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
    background:
      linear-gradient(145deg, var(--ice-soft), var(--fg-soft)),
      var(--surface);
    display: grid; place-items: center; cursor: pointer;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease);
  }
  .shot:hover { transform: scale(1.015); box-shadow: var(--elev-lift); }
  .shot.tall { grid-row: span 2; }
  .shot.wide { grid-column: span 2; }
  .gallery-all { display: flex; justify-content: center; margin-top: 30px; }
  .btn-lg { height: 56px; padding-inline: 30px; font-size: 16px; }


  /* ═══ PARLANO DI NOI ════════════════════════════════════════════ */
  /* Muro di ritagli: ogni scheda e' una pagina di giornale astratta,
     pronta a essere sostituita dalla foto dell'articolo vero. */
  .press { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.2vw, 28px); }
  .clip { display: block; width: 100%; text-align: left; transform: rotate(var(--rot, 0deg)); transition: transform .3s var(--ease); }
  .clip:nth-child(odd)  { --rot: -1.2deg; }
  .clip:nth-child(even) { --rot: 1deg; }
  .clip:hover, .clip:focus-visible { transform: rotate(0deg) translateY(-6px); }
  .clip:focus-visible { outline: none; }
  .clip:focus-visible .clip-sheet { box-shadow: var(--focus-ring); }
  .clip-sheet {
    position: relative; aspect-ratio: 3 / 4; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); box-shadow: var(--elev);
    padding: 15px 14px 16px; display: flex; flex-direction: column; gap: 9px;
    transition: box-shadow .3s var(--ease);
  }
  .clip:hover .clip-sheet { box-shadow: var(--elev-lift); }
  .clip-rule { height: 2px; background: var(--fg); opacity: .78; flex: none; }
  .clip-head { height: 10px; border-radius: 2px; flex: none; background: color-mix(in oklab, var(--fg) 24%, transparent); }
  .clip-head.short { width: 58%; }
  /* il ritaglio vero: l'altezza segue la proporzione dello scatto (--ar),
     cosi' l'articolo entra intero e la pagina finta gli si costruisce intorno */
  .clip-shot {
    flex: none; aspect-ratio: var(--ar, 3 / 2); overflow: hidden;
    border: 1px solid var(--border); border-radius: 2px; background: var(--surface);
  }
  .clip-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .clip-cols { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; min-height: 14px; }
  .clip-cols.one { grid-template-columns: 1fr; }
  .clip-col {
    border-radius: 2px;
    background: repeating-linear-gradient(to bottom,
      color-mix(in oklab, var(--fg) 14%, transparent) 0 3px,
      transparent 3px 8px);
  }
  .clip-zoom {
    position: absolute; right: 11px; bottom: 11px; width: 34px; height: 34px;
    border-radius: 50%; background: var(--surface); border: 1px solid var(--border);
    display: grid; place-items: center; color: var(--accent);
    opacity: 0; transform: translateY(6px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .clip:hover .clip-zoom, .clip:focus-visible .clip-zoom { opacity: 1; transform: none; }
  .clip-zoom svg { width: 15px; height: 15px; }

  /* -- Pila mobile -------------------------------------------------
     11 schede 3:4 in due colonne su un telefono sono ~1300px di
     scroll dentro una sezione secondaria. Da mobile la rassegna
     parte raccolta in un'unica pila di giornali: si apre solo se
     uno la vuole leggere. Desktop invariato. */
  .press-stack, .press-close { display: none; }
  .press-stack {
    width: 100%; padding: 0;
    background: none; border: 0; text-align: center; cursor: pointer;
  }
  .press-stack:focus-visible { outline: none; }
  .press-stack:focus-visible .ps-deck { box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
  /* display:block obbligatorio: su uno <span> inline l'aspect-ratio non si applica
     e la pila collasserebbe ad altezza zero */
  .ps-deck { display: block; position: relative; width: min(62vw, 236px); margin: 0 auto; aspect-ratio: 3 / 4; transition: transform .25s var(--ease); }
  .press-stack:active .ps-deck { transform: scale(.97); }
  .ps-sheet {
    position: absolute; inset: 0; overflow: hidden;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: var(--elev);
    padding: 11px 10px 12px; display: flex; flex-direction: column; gap: 7px;
    transform: translate(var(--x), var(--y)) rotate(var(--r));
    animation: psSway infinite ease-in-out;
    animation-duration: calc(4s + var(--k) * .5s);
    animation-delay: calc(var(--k) * -.8s);
  }
  .ps-sheet:last-child { box-shadow: var(--elev-lift); }
  /* oscillazione minima: i fogli respirano, non ballano */
  @keyframes psSway {
    0%, 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); }
    50%      { transform: translate(var(--x), calc(var(--y) - 3px)) rotate(calc(var(--r) + 1.5deg)); }
  }
  .ps-rule { height: 2px; background: var(--fg); opacity: .78; flex: none; }
  .ps-bar { height: 7px; border-radius: 2px; flex: none; background: color-mix(in oklab, var(--fg) 24%, transparent); }
  .ps-bar.short { width: 56%; }
  .ps-sheet img {
    display: block; width: 100%; height: 40%; object-fit: cover; flex: none;
    border: 1px solid var(--border); border-radius: 2px;
  }
  .ps-lines {
    flex: 1 1 auto; border-radius: 2px;
    background: repeating-linear-gradient(to bottom,
      color-mix(in oklab, var(--fg) 14%, transparent) 0 3px,
      transparent 3px 8px);
  }
  /* apertura: i fogli si sollevano e sfumano, poi entra la griglia */
  .press-stack.is-fanning .ps-sheet {
    animation: psFan .4s var(--ease) forwards;
    animation-delay: calc(var(--k) * 45ms);
  }
  @keyframes psFan {
    to { transform: translate(var(--x), -22px) rotate(calc(var(--r) * 2.2)) scale(1.06); opacity: 0; }
  }
  .ps-cta { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 24px; }
  .ps-count {
    width: 46px; height: 46px; flex: none; border-radius: 50%;
    background: var(--accent); color: var(--accent-on);
    font-family: var(--font-display); font-weight: 800; font-size: 18px;
    display: grid; place-items: center; font-variant-numeric: tabular-nums;
  }
  .ps-txt {
    text-align: left; font-family: var(--font-display); font-weight: 800;
    font-size: 17px; line-height: 1.15; letter-spacing: -0.01em; color: var(--fg);
  }
  .ps-txt em { display: block; margin-top: 4px; font-style: normal; font-weight: 500; font-size: 13.5px; letter-spacing: 0; color: var(--muted); }

  /* ═══ CONTATTI ══════════════════════════════════════════════════ */
  .contact { background: var(--bg); }
  .contact-head { margin-bottom: clamp(34px, 4.4vw, 58px); }
  .contact-kicker {
    display: flex; align-items: center; gap: 16px; margin: 0;
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(14px, 1.35vw, 18px); letter-spacing: .2em;
    text-transform: uppercase; color: var(--accent);
  }
  .contact-kicker::before { content: ''; width: 44px; height: 3px; background: var(--accent); flex: none; }
  .contact-title {
    font-size: var(--fs-h1); line-height: .96; letter-spacing: -0.045em;
    font-weight: 800; text-transform: uppercase;
    margin: clamp(16px, 2vw, 24px) 0 0; max-width: 15ch;
  }
  .contact-title em { font-style: normal; color: var(--accent); }
  .contact-sub {
    font-size: clamp(17px, 1.55vw, 21px); line-height: 1.55;
    color: var(--muted); max-width: 54ch; margin-top: clamp(16px, 1.8vw, 22px);
  }

  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 2.6vw, 36px); align-items: start; }
  .contact-panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px);
  }
  .panel-label {
    margin: 0; font-family: var(--font-display); font-weight: 800;
    font-size: clamp(21px, 2.1vw, 28px); letter-spacing: -0.025em; text-transform: uppercase;
  }
  .panel-note { margin: 8px 0 clamp(24px, 2.6vw, 32px); font-size: 15.5px; color: var(--muted); }

  /* azioni dirette — whatsapp, chiamata, email */
  .acts { display: grid; gap: 12px; }
  .act {
    display: flex; align-items: center; gap: 16px; padding: 18px 22px; min-height: 88px;
    border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--bg);
    transition: border-color .2s var(--ease), background .2s var(--ease),
                transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .act:hover { border-color: var(--accent); background: var(--surface); transform: translateY(-2px); box-shadow: var(--elev); }
  .act:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .act-ico {
    flex: none; width: 48px; height: 48px; display: grid; place-items: center;
    border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent);
  }
  .act-ico svg { width: 24px; height: 24px; }
  .act-txt { flex: 1; min-width: 0; }
  .act-k {
    display: block; font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }
  .act-v {
    display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 800;
    font-size: clamp(19px, 1.9vw, 24px); letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
  }
  .act-v.is-mail { font-size: clamp(14.5px, 1.35vw, 17.5px); letter-spacing: -0.01em; word-break: break-word; }
  .act-go { flex: none; width: 17px; height: 17px; color: var(--accent); transition: transform .18s var(--ease); }
  .act:hover .act-go { transform: translateX(3px); }

  /* whatsapp e' la via piu' rapida: unico riempimento pieno della sezione */
  .act-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
  .act-primary:hover { background: color-mix(in oklab, var(--accent), black 14%); border-color: var(--accent); }
  .act-primary .act-ico { background: color-mix(in oklab, var(--accent-on) 16%, transparent); color: var(--accent-on); }
  .act-primary .act-k { color: color-mix(in oklab, var(--accent-on) 74%, transparent); }
  .act-primary .act-go { color: var(--accent-on); }

  /* colonna destra — gruppi categorizzati */
  .cgroup + .cgroup {
    margin-top: clamp(24px, 2.6vw, 32px); padding-top: clamp(24px, 2.6vw, 32px);
    border-top: 1px solid var(--border);
  }
  .cgroup-h {
    margin: 0 0 15px; font-family: var(--font-display); font-weight: 800;
    font-size: 12.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
  }

  /* orari — nessun mono, cifre tabellari nel carattere di testata */
  .hours { margin: 0; }
  .hrow {
    display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
    padding-block: 12px; border-top: 1px solid var(--border);
  }
  .hrow:first-of-type { border-top: 0; padding-top: 0; }
  .hrow dt { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.012em; }
  .hrow dd {
    margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 16.5px;
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  /* la riga indirizzo apre il gruppo: le fasce orarie riprendono il filetto */
  .place + .hours .hrow:first-of-type { border-top: 1px solid var(--border); padding-top: 12px; }

  /* sedi */
  .place {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding-block: 14px; border-top: 1px solid var(--border);
  }
  .place:first-of-type { border-top: 0; padding-top: 0; }
  .place-n { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; letter-spacing: -0.012em; }
  .place-a { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
  .place-go {
    flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--accent);
    font-family: var(--font-display); font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em;
  }
  .place-go svg { width: 13px; height: 13px; transition: transform .18s var(--ease); }
  .place-go:hover svg { transform: translate(2px, -2px); }

  /* ═══ CTA FINALE ════════════════════════════════════════════════ */
  .cta-deep { text-align: center; }
  .cta-deep h2 { font-size: clamp(32px, 5.5vw, 68px); text-transform: uppercase; letter-spacing: -0.04em; }
  .cta-deep h2 em { font-style: normal; color: var(--ice); }
  .cta-deep .lead { margin-inline: auto; }

  /* ═══ FOOTER ════════════════════════════════════════════════════ */
  .pagefoot { background: var(--ink-deep); color: color-mix(in oklab, var(--surface) 62%, transparent); padding-block: var(--gap-xl) var(--gap-lg); font-size: 13.5px; }
  .pagefoot a:hover { color: var(--ice); }
  .pagefoot .brand-plate { background: var(--surface); border-radius: var(--radius); padding: 7px 14px; display: inline-flex; align-items: center; }
  .pagefoot img { height: 36px; }
  .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gap-lg); }
  .foot-grid h4 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in oklab, var(--surface) 44%, transparent); margin-bottom: 14px; font-weight: 500; }
  .foot-grid li + li { margin-top: 9px; }
  .foot-bottom { margin-top: var(--gap-xl); padding-top: var(--gap-md); border-top: 1px solid color-mix(in oklab, var(--surface) 14%, transparent); }
  .socials { display: flex; gap: 8px; }
  .socials a {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid color-mix(in oklab, var(--surface) 20%, transparent);
    transition: all .18s var(--ease);
  }
  .socials a:hover { border-color: var(--ice); color: var(--ice); background: color-mix(in oklab, var(--ice) 12%, transparent); }
  .socials svg { width: 17px; height: 17px; }

  /* ═══ LIGHTBOX ══════════════════════════════════════════════════ */
  dialog.lightbox {
    border: 0; padding: 0; background: transparent; max-width: min(880px, 92vw); width: 100%;
  }
  dialog.lightbox::backdrop { background: color-mix(in oklab, var(--ink-deep) 88%, transparent); backdrop-filter: blur(6px); }
  .lb-body { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; }
  .lb-stage {
    aspect-ratio: 16 / 9; display: grid; place-items: center; position: relative;
    background: linear-gradient(145deg, var(--ice-soft), var(--fg-soft)), var(--surface);
    border-bottom: 1px solid var(--border);
  }

  /* frecce avanti/indietro — solo sui ritagli di stampa */
  .lb-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 52px; height: 52px; border-radius: 50%; display: none; place-items: center;
    background: color-mix(in oklab, var(--surface) 88%, transparent);
    border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
    color: var(--fg); backdrop-filter: blur(6px);
    box-shadow: 0 4px 16px color-mix(in oklab, var(--ink-deep) 22%, transparent);
    transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  .is-press .lb-nav { display: grid; }
  .lb-nav:hover { background: var(--surface); border-color: var(--fg); }
  .lb-nav.prev { left: 16px; }
  .lb-nav.next { right: 16px; }
  .lb-nav.prev:hover { transform: translateY(-50%) translateX(-3px); }
  .lb-nav.next:hover { transform: translateY(-50%) translateX(3px); }
  .lb-nav:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .lb-nav svg { width: 20px; height: 20px; }
  dialog.lightbox.is-press { max-width: min(1280px, 96vw); }
  .is-press .lb-stage { aspect-ratio: auto; background: var(--fg-soft); }
  .lb-stage img { display: none; width: 100%; max-height: 84vh; object-fit: contain; }
  .is-press .lb-stage img { display: block; }
  .is-press #lbStage { display: none; }
  .lb-foot { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
  .lb-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; }
  .lb-close:hover { border-color: var(--fg); }
  .lb-close svg { width: 16px; height: 16px; }

  /* ═══ RESPONSIVE ════════════════════════════════════════════════ */
  @media (max-width: 1180px) {
    .grid-2-1 { gap: var(--gap-xl); }
    .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
    .foot-grid > :first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 1024px) {
    .gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; }
    .press { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 920px) {
    .topnav nav { display: none; }
    .nav-burger { display: flex; }
    .topnav .btn-nav { display: none; }
    .grid-2, .grid-3, .grid-2-1 { grid-template-columns: 1fr; }
    .venues { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 744px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
    /* la rassegna parte chiusa: si vede solo la pila di giornali */
    .press { grid-template-columns: repeat(2, 1fr); display: none; }
    .press.is-open { display: grid; }
    .press-stack { display: block; }
    .press-stack.is-gone { display: none; }
    .press-close:not([hidden]) { display: flex; justify-content: center; margin-top: 28px; }
    /* ogni scheda atterra nella sua posizione di griglia, una dopo l'altra */
    .press.is-open .clip {
      animation: clipLand .5s var(--ease) backwards;
      animation-delay: calc(var(--j, 0) * 42ms);
    }
    @keyframes clipLand {
      from { opacity: 0; transform: translateY(-26px) rotate(-7deg) scale(.84); }
      to   { opacity: 1; transform: rotate(var(--rot, 0deg)); }
    }
    .shot.wide { grid-column: span 2; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .hero { align-items: end; }
    .video-play { top: 40%; }
  }
  @media (max-width: 560px) {
    :root { --nav-h: 60px; }
    .hero h1 { font-size: clamp(38px, 13vw, 60px); }
    /* Affiancate a 390px le due pill restavano larghe 171px: "Contatta la
       societa'" andava a capo e, con align-items:stretch, entrambe salivano
       a 74px. In colonna l'etichetta sta su una riga sola. */
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { width: 100%; min-height: 48px; padding-block: 12px; white-space: nowrap; }
    .video-badge { left: var(--gutter); right: auto; padding: 8px 14px 8px 10px; }
    .shot.tall { grid-row: span 1; }
    .course { grid-template-columns: 1fr; }
    .venue-size { flex-wrap: wrap; gap: 16px; }
    .act { padding: 16px 18px; gap: 13px; min-height: 80px; }
    .act-ico { width: 42px; height: 42px; }
    .act-ico svg { width: 21px; height: 21px; }
    .place { flex-direction: column; align-items: flex-start; gap: 8px; }
    /* le frecce coprono meno ritaglio sui telefoni, restano sopra i 44px tattili */
    .lb-nav { width: 46px; height: 46px; }
    .lb-nav svg { width: 18px; height: 18px; }
    .lb-nav.prev { left: 8px; }
    .lb-nav.next { right: 8px; }
  }
  @media (max-width: 400px) {
    .foot-grid { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: 1fr 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; }
    .hero h1 .line > span { transform: none; }
  }

/* ═══════════════════════════════════════════════════════════════════
   AGGIUNTE DEL TEMA — media reali, pagina Gallery, integrazione WP
   ═══════════════════════════════════════════════════════════════════ */

/* le sezioni raggiunte da un'ancora non finiscono sotto la nav fissa */
main [id] { scroll-margin-top: calc(var(--nav-h) + 8px); }

/* barra di amministrazione WordPress (utenti loggati) */
.admin-bar .topnav, .admin-bar .mobile-panel { top: 32px; }
.admin-bar .mobile-panel { inset: 32px 0 0 0; }
@media (max-width: 782px) {
  .admin-bar .topnav { top: 46px; }
  .admin-bar .mobile-panel { inset: 46px 0 0 0; }
}
@media (max-width: 600px) {
  /* sotto i 600px la admin bar non è fissa: la nav torna in cima */
  .admin-bar .topnav { top: 0; }
}

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto !important; clip-path: none; height: auto; width: auto; margin: 0;
  z-index: 100000; top: 8px; left: 8px; padding: 12px 18px;
  background: var(--surface); color: var(--fg); border-radius: var(--radius-sm); box-shadow: var(--elev-lift);
}

/* ─── gallery home: scatti reali ─────────────────────────────────── */
.shot { padding: 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.shot.is-empty { cursor: default; }
.shot.is-empty:hover { transform: none; box-shadow: none; }
.shot.is-empty svg { width: 28px; height: 28px; color: color-mix(in oklab, var(--ink-deep) 30%, transparent); }
.shot-type {
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radius-pill); background: var(--surface);
  border: 1px solid var(--border); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.shot-type svg { width: 11px; height: 11px; }

/* ─── lightbox: immagini e video reali ───────────────────────────── */
dialog.lightbox.has-media { max-width: min(1280px, 96vw); }
.has-media .lb-stage { aspect-ratio: auto; background: var(--fg-soft); }
.lb-stage video { display: none; width: 100%; max-height: 84vh; background: var(--ink-deep); }
.has-media.is-image .lb-stage img { display: block; }
.has-media.is-video .lb-stage video { display: block; }
.has-media #lbStage { display: none; }
.has-seq .lb-nav { display: grid; }

/* ═══ PAGINA GALLERY ═══════════════════════════════════════════════ */
.page-head {
  background: linear-gradient(160deg, var(--ink-deep) 0%, var(--ink-deep-2) 68%, var(--accent) 140%);
  color: var(--surface); position: relative; overflow: hidden;
  padding-block: calc(var(--nav-h) + clamp(54px, 8vw, 96px)) clamp(48px, 7vw, 88px);
}
.page-head::after {
  content: ''; position: absolute; inset: auto -10% -60% 40%; height: 120%;
  background: radial-gradient(60% 60% at 50% 50%, var(--ice-soft), transparent 70%);
  pointer-events: none;
}
.page-head .container { position: relative; z-index: 1; }
.page-head .eyebrow { color: var(--ice); }
.page-title {
  font-size: var(--fs-h1); font-weight: 800; line-height: .94; letter-spacing: -0.045em;
  text-transform: uppercase; margin-top: 20px;
}
.page-title em { font-style: normal; color: var(--ice); }
.page-head .lead { color: color-mix(in oklab, var(--surface) 74%, transparent); margin-top: 22px; max-width: 46ch; }
.crumb { display: flex; align-items: center; gap: 10px; font-size: 13px; color: color-mix(in oklab, var(--surface) 60%, transparent); }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--ice); }

.gal-bar {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.admin-bar .gal-bar { top: calc(var(--nav-h) + 32px); }
@media (max-width: 782px) { .admin-bar .gal-bar { top: calc(var(--nav-h) + 46px); } }
@media (max-width: 600px) { .admin-bar .gal-bar { top: var(--nav-h); } }
.gal-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); padding-block: 14px; flex-wrap: wrap; }
.gal-count { font-size: 14px; color: var(--muted); white-space: nowrap; }
.gal-count b { color: var(--fg); font-variant-numeric: tabular-nums; }

.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pic {
  position: relative; display: flex; flex-direction: column; width: 100%; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  background: var(--surface); padding: 0; cursor: zoom-in;
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.pic:hover { border-color: var(--fg); transform: translateY(-3px); }
.pic-frame {
  aspect-ratio: 4 / 3; flex: 0 0 auto; display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 20% 0%, color-mix(in oklab, var(--ice) 22%, transparent), transparent 62%),
    linear-gradient(145deg, color-mix(in oklab, var(--ink-deep) 7%, var(--surface)), color-mix(in oklab, var(--ink-deep) 15%, var(--surface)));
  position: relative; overflow: hidden;
}
.pic-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.pic:hover .pic-frame img { transform: scale(1.03); }
.pic-frame svg { width: 30px; height: 30px; color: color-mix(in oklab, var(--ink-deep) 34%, transparent); position: relative; }
.pic .shot-type { z-index: 1; }
.pic[hidden] { display: none; }

.wall-more[hidden] { display: none; }
.wall-more { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 38px; }
.wall-more .meta { font-family: var(--font-body); font-size: 13.5px; }
.gal-empty { text-align: center; color: var(--muted); padding-block: 48px; }

.cta-split { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-lg); flex-wrap: wrap; }
.cta-split h2 { max-width: 18ch; }

@media (max-width: 1024px) { .wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .wall { grid-template-columns: 1fr; gap: 14px; }
  .gal-bar-inner { gap: 10px; }
  .gal-count { width: 100%; order: 2; }
}

/* ═══ PAGINE GENERICHE (page.php, single.php, index.php, 404) ══════ */
.page-head.is-compact { padding-block: calc(var(--nav-h) + clamp(40px, 6vw, 72px)) clamp(36px, 5vw, 60px); }
.entry-content { max-width: 72ch; font-size: 17px; line-height: 1.7; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.4em; }
.entry-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content ul { list-style: disc; }
.entry-content img { height: auto; border-radius: var(--radius); }
.entry-content blockquote { margin-inline: 0; padding-left: 20px; border-left: 3px solid var(--accent); color: var(--muted); }
.entry-content .alignwide { max-width: none; }
.post-list { display: grid; gap: var(--gap-md); }
.post-list .card h2 { font-size: clamp(22px, 2.4vw, 28px); }
.post-list .card a:hover h2 { color: var(--accent); }
.pagination { display: flex; gap: 8px; margin-top: var(--gap-lg); flex-wrap: wrap; }
.pagination .page-numbers {
  min-width: 44px; height: 44px; padding-inline: 14px; display: inline-grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); font-weight: 600;
}
.pagination .page-numbers.current { background: var(--fg); border-color: var(--fg); color: var(--surface); }
.tab[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--surface); }
.video-play[hidden] { display: none; }

/* ═══ PAGINA SAFEGUARDING ═════════════════════════════════════════ */
.sg-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.sg-text { margin-top: 18px; }
.sg-text .lead + .lead { margin-top: 16px; }
.sg-officer { margin-top: clamp(28px, 3.4vw, 40px); }
.sg-officer-name { margin-top: 10px; font-size: clamp(26px, 2.8vw, 34px); letter-spacing: -0.03em; }
.sg-officer-role { margin-top: 8px; color: var(--muted); font-size: 15px; max-width: 52ch; }
.sg-note { margin-top: 10px; font-size: 13.5px; color: var(--muted); }

/* il riquadro segnalazioni è l'unica superficie scura: deve vedersi subito */
.sg-report {
  position: sticky; top: calc(var(--nav-h) + 24px);
  background: linear-gradient(158deg, var(--ink-deep) 0%, var(--ink-deep-2) 100%);
  color: var(--surface); border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 40px); overflow: hidden;
}
.sg-report .eyebrow { color: var(--ice); }
.sg-report h2 { margin-top: 16px; font-size: clamp(28px, 3vw, 40px); text-transform: uppercase; letter-spacing: -0.04em; }
.sg-report h2 em { font-style: normal; color: var(--ice); }
.sg-report-lead { margin-top: 14px; color: color-mix(in oklab, var(--surface) 74%, transparent); }
.sg-steps { margin: 22px 0 26px; padding: 0; list-style: none; counter-reset: sg; display: grid; gap: 12px; }
.sg-steps li {
  counter-increment: sg; position: relative; padding-left: 40px;
  color: color-mix(in oklab, var(--surface) 86%, transparent); font-size: 15.5px; line-height: 1.5;
}
.sg-steps li::before {
  content: counter(sg); position: absolute; left: 0; top: -2px;
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid color-mix(in oklab, var(--ice), transparent 55%);
  font-family: var(--font-mono); font-size: 12px; color: var(--ice);
}
.sg-report a:not(.btn) { color: var(--ice); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.sg-download { width: 100%; }
.sg-report .meta { margin-top: 10px; text-align: center; color: color-mix(in oklab, var(--surface) 58%, transparent); }
.sg-report-small { margin-top: 18px; font-size: 14px; color: color-mix(in oklab, var(--surface) 70%, transparent); }
.sg-urgent {
  margin-top: 22px; padding-top: 18px; font-size: 14.5px;
  border-top: 1px solid color-mix(in oklab, var(--surface) 16%, transparent);
  color: color-mix(in oklab, var(--surface) 80%, transparent);
}
.sg-urgent strong { color: var(--surface); font-size: 1.15em; }

.docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); }
.doc {
  height: 100%; display: flex; flex-direction: column; gap: 18px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 28px);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.doc:hover { transform: translateY(-4px); box-shadow: var(--elev-lift); border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); background: var(--surface); }
.doc-ico {
  width: 46px; height: 56px; border-radius: 6px 14px 6px 6px; flex: none;
  display: grid; place-items: end center; padding-bottom: 9px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
}
.doc-txt { flex: 1; display: flex; flex-direction: column; }
.doc-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.5vw, 19px); letter-spacing: -0.015em; line-height: 1.3; }
.doc-desc { margin-top: 8px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.doc-meta { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.doc-go { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; font-size: 14px; }
.doc-go svg { width: 13px; height: 13px; transition: transform .18s var(--ease); }
.doc:hover .doc-go svg { transform: translate(2px, -2px); }

/* link al safeguarding nella sezione Contatti e nel menu mobile */
.sg-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: clamp(22px, 2.6vw, 30px); padding: 16px 20px;
  border: 1px dashed color-mix(in oklab, var(--accent) 35%, var(--border)); border-radius: var(--radius);
  color: var(--fg); transition: border-color .2s var(--ease), background .2s var(--ease);
}
.sg-link:hover { border-style: solid; border-color: var(--accent); background: var(--surface); }
.sg-link b { font-family: var(--font-display); font-weight: 700; }
.sg-link small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.sg-link svg { flex: none; width: 17px; height: 17px; color: var(--accent); }
.mp-sg {
  display: block; margin-top: 14px; text-align: center; font-size: 13.5px;
  color: color-mix(in oklab, var(--surface) 70%, transparent);
}
.mp-sg:hover { color: var(--ice); }
.foot-bottom a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1024px) { .docs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 920px) {
  .sg-grid { grid-template-columns: 1fr; }
  .sg-report { position: static; }
}
@media (max-width: 560px) { .docs { grid-template-columns: 1fr; } }

/* pulsante "Guarda di più" sotto la gallery della home */
.gallery-all { flex-direction: column; align-items: center; gap: 12px; }
.gallery-count { text-align: center; }
.wall-end { text-align: center; margin-top: 32px; }
/* il lightbox si scorre anche col dito: niente scroll della pagina dietro */
.lb-stage { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.lb-stage img { -webkit-user-drag: none; }

/* ═══ IL MOMENTO — foto centrale che si apre allo scorrimento ══════════
   Senza JS (o con riduci-movimento) è una foto a tutto schermo statica.
   Con .is-live la sezione si allunga e la parte "incollata" fa da palco:
   --p (0→1) apre la cornice fino ai bordi, --t (0→1) fa entrare il testo. */
.moment { position: relative; background: var(--ink-deep); color: var(--surface); }
.moment-sticky {
  position: relative; height: 100svh; min-height: 560px; overflow: hidden;
  display: grid; align-items: end;
}
.moment.is-live { height: 230svh; }
.moment.is-live .moment-sticky { position: sticky; top: 0; }
.moment-frame {
  --ix: clamp(20px, 18vw, 320px); --iy: 14vh;
  position: absolute; inset: 0; margin: 0; overflow: hidden;
  clip-path: inset(calc((1 - var(--p, 1)) * var(--iy)) calc((1 - var(--p, 1)) * var(--ix)) round calc((1 - var(--p, 1)) * 28px));
}
.moment-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 48% 58%;
  transform: scale(calc(1.05 - var(--p, 1) * .05)); transform-origin: 50% 60%;
}
.moment.is-live .moment-frame { will-change: clip-path; }
.moment.is-live .moment-img { will-change: transform; }
.moment-shade {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--t, 1);
  background:
    linear-gradient(to top, var(--ink-deep) 0%, color-mix(in oklab, var(--ink-deep) 72%, transparent) 30%, transparent 62%),
    linear-gradient(to right, color-mix(in oklab, var(--ink-deep) 55%, transparent) 0%, transparent 55%);
}
.moment-copy {
  position: relative; z-index: 2; width: 100%;
  padding-bottom: clamp(48px, 10vh, 104px);
  opacity: var(--t, 1); transform: translateY(calc((1 - var(--t, 1)) * 44px));
}
.moment-copy .eyebrow { color: var(--ice); }
.moment-copy h2 {
  margin-top: 18px; max-width: 13ch;
  font-size: var(--fs-h1); line-height: .96; letter-spacing: -0.045em; text-transform: uppercase;
}
.moment-copy h2 em { font-style: normal; color: var(--ice); }
.moment-text {
  margin: 20px 0 30px; max-width: 42ch;
  font-size: var(--fs-lead); line-height: 1.6; color: color-mix(in oklab, var(--surface) 82%, transparent);
}
@media (max-width: 744px) {
  .moment-frame { --ix: 6vw; --iy: 11vh; }
  .moment.is-live { height: 200svh; }
  .moment-img { object-position: 46% 55%; }
}
@media (prefers-reduced-motion: reduce) {
  .moment.is-live { height: auto; }
  .moment.is-live .moment-sticky { position: relative; }
  .moment-frame { clip-path: none; }
  .moment-img, .moment-copy { transform: none; }
  .moment-shade, .moment-copy { opacity: 1; }
}
/* da tablet orizzontale in su il testo sta a destra, accanto alle figure */
.moment-box { max-width: 36rem; }
@media (min-width: 1024px) {
  .moment-copy { display: flex; justify-content: flex-end; padding-bottom: clamp(56px, 13vh, 128px); }
  .moment-box { width: min(36rem, 38%); }
  .moment-copy h2 { font-size: clamp(36px, 4.4vw, 66px); }
  .moment-shade {
    background:
      linear-gradient(to left, color-mix(in oklab, var(--ink-deep) 88%, transparent) 0%, color-mix(in oklab, var(--ink-deep) 55%, transparent) 30%, transparent 52%),
      linear-gradient(to top, color-mix(in oklab, var(--ink-deep) 60%, transparent) 0%, transparent 35%);
  }
}