/* ==========================================================================
   KIPLING SPORTING VILLAGE — 2026
   Direzione visiva: "l'insegna del circolo".
   Navy del guidone + giallo palla + terra battuta. Linee di campo come griglia.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN
   -------------------------------------------------------------------------- */
:root {
    /* Colore — derivato dal logo storico (guidone navy, palla gialla) */
    --ink:        #06121f;
    --ink-2:      #0b1d31;
    --navy:       #123563;
    --navy-lt:    #1f5091;
    --ball:       #ffd400;
    --ball-dim:   #d9b400;
    --clay:       #b8543a;
    --clay-lt:    #d4795c;
    --clay-dk:    #a34a33;   /* testo piccolo su sabbia: 4,85:1 (AA) */
    --sand:       #f0e9dc;
    --sand-ink:   #24180f;

    --text:       #eaf0f7;
    --muted:      rgba(234, 240, 247, .62);
    --faint:      rgba(234, 240, 247, .56);
    --line:       rgba(255, 255, 255, .14);
    --line-str:   rgba(255, 255, 255, .30);

    /* Tipografia */
    --f-display:  "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
    --f-body:     "Instrument Sans", "Segoe UI", system-ui, sans-serif;
    --f-mono:     "DM Mono", ui-monospace, "Cascadia Mono", monospace;

    /* Scala tipografica */
    --t-hero:     max(3.4rem, min(13vw, 17vh, 9.5rem));
    --t-h2:       clamp(2.6rem, 6.5vw, 6rem);
    --t-h3:       clamp(1.5rem, 2.6vw, 2.4rem);
    --t-h4:       clamp(1.05rem, 1.5vw, 1.3rem);
    --t-body:     clamp(1rem, 1.05vw, 1.075rem);
    --t-small:    .875rem;
    --t-label:    .72rem;

    /* Spazio */
    --gut:        clamp(1.25rem, 4vw, 3.5rem);
    --sec-y:      clamp(5rem, 11vw, 9.5rem);
    --max:        1320px;

    /* Materia — ombre e luce di taglio riusabili */
    --edge-hi:    inset 0 1px 0 rgba(255, 255, 255, .07);
    --drop-1:     0 10px 30px rgba(3, 9, 16, .45);
    --drop-2:     0 18px 50px rgba(3, 9, 16, .55);

    /* Movimento */
    --ease:       cubic-bezier(.25, .46, .45, .94);
    --ease-out:   cubic-bezier(.16, 1, .3, 1);

    /* Sistema */
    --head-h:     76px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* il menu a tendina, le barre di scorrimento e i controlli nativi
       vengono disegnati dal sistema in versione scura */
    color-scheme: dark;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

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

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--ball); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--ball);
    outline-offset: 3px;
    border-radius: 2px;
}

.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: absolute; top: -100px; left: var(--gut); z-index: 999;
    background: var(--ball); color: var(--ink);
    padding: .75rem 1.25rem; font-family: var(--f-mono); font-size: var(--t-label);
    text-transform: uppercase; letter-spacing: .08em;
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA DI BASE
   -------------------------------------------------------------------------- */
.display {
    font-family: var(--f-display);
    font-weight: 800;
    text-transform: uppercase;
    line-height: .84;
    letter-spacing: -.005em;
    font-stretch: 100%;
}

.eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--f-mono);
    font-size: var(--t-label);
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--ball);
}
.eyebrow::before {
    content: ""; width: 26px; height: 1px; background: var(--ball); opacity: .7;
}
.eyebrow--clay { color: var(--clay-lt); }
.eyebrow--clay::before { background: var(--clay-lt); }
.eyebrow--ink { color: var(--clay-dk); }
.eyebrow--ink::before { background: var(--clay-dk); }

.lede {
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    line-height: 1.62;
    color: var(--muted);
    max-width: 62ch;
}

.mono {
    font-family: var(--f-mono);
    font-size: var(--t-label);
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gut);
}

.section {
    position: relative;
    padding-block: var(--sec-y);
}
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--flush-top { padding-top: 0; }

.section-head {
    display: grid;
    gap: 1.5rem;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 900px) {
    .section-head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
        align-items: end;
        gap: 3rem;
    }
}
.section-head__title {
    font-family: var(--f-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: var(--t-h2);
    line-height: .86;
    letter-spacing: -.01em;
    margin-top: 1.1rem;
}
.section-head__title em {
    font-style: normal;
    color: var(--ball);
    background: linear-gradient(180deg, #ffdd33 12%, var(--ball-dim) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.summer .section-head__title em {
    background: linear-gradient(180deg, var(--clay-lt), var(--clay));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section-head__title .clay { color: var(--clay-lt); }

/* --------------------------------------------------------------------------
   5. TOP BAR + HEADER
   -------------------------------------------------------------------------- */
.topbar {
    position: relative; z-index: 60;
    background: var(--navy);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-family: var(--f-mono);
    font-size: var(--t-label);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.topbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: 38px;
}
.topbar__claim { color: rgba(255, 255, 255, .72); }
.topbar__links { display: flex; align-items: center; gap: 1.5rem; }
.topbar__link { display: inline-flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.86); transition: color .25s var(--ease); }
.topbar__link:hover { color: var(--ball); }
.topbar__link svg { width: 13px; height: 13px; }
@media (max-width: 780px) {
    .topbar__claim { display: none; }
    .topbar__inner { justify-content: center; }
}

.header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(6, 18, 31, .0);
    border-bottom: 1px solid transparent;
    transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
.header.is-solid {
    background: rgba(6, 18, 31, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--line);
}
.header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; min-height: var(--head-h);
}

.brand { display: inline-flex; align-items: center; gap: .85rem; }
.brand__mark {
    width: 48px; height: 48px; object-fit: contain;
    background: var(--sand);
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.brand__text { display: grid; line-height: 1; }
.brand__name {
    font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
    font-size: 1.32rem; letter-spacing: .01em;
}
.brand__sub {
    font-family: var(--f-mono); font-size: .62rem;
    text-transform: uppercase; letter-spacing: .26em; color: var(--ball);
    margin-top: .28rem;
}

/* Otto voci più il sottomenu Tennis: la barra orizzontale compare solo quando
   ci sta senza andare a capo, sotto resta il menu a scomparsa. */
.nav { display: none; }
@media (min-width: 1200px) {
    .nav { display: flex; align-items: center; gap: 1.15rem; }
}
@media (min-width: 1360px) {
    .nav { gap: 1.6rem; }
}
.nav__link {
    position: relative;
    font-family: var(--f-mono); font-size: var(--t-label);
    text-transform: uppercase; letter-spacing: .1em;
    color: rgba(234, 240, 247, .78);
    padding-block: .4rem;
    transition: color .25s var(--ease);
}
.nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: var(--ball);
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--ease-out);
}
.nav__link:hover, .nav__link.is-active { color: #fff; }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

/* Sottomenu Tennis → Scuola Tennis */
.nav__group { position: relative; }
.nav__link--parent { display: inline-flex; align-items: center; gap: .35rem; }
.nav__link--parent::before {
    content: ""; order: 2;
    width: .38rem; height: .38rem;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-.12rem) rotate(45deg);
    transition: transform .3s var(--ease-out);
}
.nav__group:hover .nav__link--parent::before,
.nav__group:focus-within .nav__link--parent::before { transform: translateY(.05rem) rotate(-135deg); }
.nav__sub {
    position: absolute; top: 100%; left: -1rem;
    min-width: 12.5rem;
    padding: .9rem 0 .4rem;
    display: grid;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .25s var(--ease), transform .3s var(--ease-out), visibility .3s;
}
.nav__sub::before {
    content: ""; position: absolute; inset: .5rem 0 0;
    background: rgba(6, 18, 31, .96);
    border: 1px solid var(--line); border-top: 2px solid var(--ball);
    box-shadow: var(--drop-1);
    z-index: -1;
}
.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub,
.nav__group.is-open .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub-link {
    font-family: var(--f-mono); font-size: var(--t-label);
    text-transform: uppercase; letter-spacing: .1em;
    color: rgba(234, 240, 247, .78);
    padding: .65rem 1rem;
    transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__sub-link:hover, .nav__sub-link:focus-visible { color: var(--ball); background: rgba(255, 255, 255, .04); }

.header__actions { display: flex; align-items: center; gap: .9rem; }
@media (max-width: 719px) { .header__actions > .btn { display: none; } }

.burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px;
    border: 1px solid var(--line-str);
}
@media (min-width: 1200px) { .burger { display: none; } }
.burger span {
    display: block; height: 2px; background: var(--text);
    transition: transform .35s var(--ease-out), opacity .2s linear;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile */
.mobile-menu {
    position: fixed; inset: 0; z-index: 45;
    background: var(--ink);
    padding: calc(var(--head-h) + 3rem) var(--gut) 3rem;
    display: grid; align-content: start; gap: .25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .55s var(--ease-out), visibility .55s;
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu__link {
    font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
    font-size: clamp(2rem, 9vw, 3.2rem); line-height: 1.1;
    border-bottom: 1px solid var(--line);
    padding-block: .55rem;
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.mobile-menu__link span {
    font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em; color: var(--faint);
}
.mobile-menu__link--sub {
    font-size: clamp(1.4rem, 6vw, 2.1rem);
    padding-left: 1.2rem;
    color: rgba(234, 240, 247, .8);
}
.mobile-menu__foot { margin-top: 2.5rem; display: grid; gap: .6rem; }

/* --------------------------------------------------------------------------
   6. BOTTONI
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .95rem 1.6rem;
    font-family: var(--f-mono); font-size: var(--t-label);
    text-transform: uppercase; letter-spacing: .12em;
    border: 1px solid transparent;
    transition: background .3s var(--ease), color .3s var(--ease),
                border-color .3s var(--ease), transform .3s var(--ease-out);
    white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(3, 9, 16, .32);
}
@media (hover: hover) {
    .btn:hover { transform: translateY(-3px); box-shadow: var(--drop-1); }
}
.btn:active { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(3, 9, 16, .4); }

.btn--primary {
    background: var(--ball); color: var(--ink);
    box-shadow: 0 6px 20px rgba(255, 212, 0, .16), 0 4px 14px rgba(3, 9, 16, .32);
}
.btn--primary:hover { background: #fff; }
/* riflesso che attraversa il bottone una volta sola, al passaggio del mouse */
.btn--primary::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-18deg);
    transition: left .55s var(--ease-out);
    pointer-events: none;
}
@media (hover: hover) {
    .btn--primary:hover::after { left: 130%; }
}

.btn--ghost { border-color: var(--line-str); color: var(--text); }
.btn--ghost:hover { border-color: var(--ball); color: var(--ball); }

.btn--clay { background: var(--clay); color: #fff; }
.btn--clay:hover { background: var(--clay-lt); }

.btn--ink { background: var(--ink); color: var(--sand); }
.btn--ink:hover { background: var(--navy); }

.btn--sm { padding: .7rem 1.15rem; }

/* --------------------------------------------------------------------------
   7. AVANZAMENTO DELLA LETTURA
   -------------------------------------------------------------------------- */
.progress-bar {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%;
    transform-origin: left; transform: scaleX(0);
    background: var(--ball); z-index: 55;
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    overflow: hidden;
    margin-top: calc(var(--head-h) * -1);
    padding-top: var(--head-h);
}
.hero__media {
    position: absolute; inset: -8% 0 -8%;
    z-index: 0;
    will-change: transform;
}
.hero__media video, .hero__media img {
    width: 100%; height: 100%; object-fit: cover;
}
.hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg, rgba(6,18,31,.78) 0%, rgba(6,18,31,.34) 30%, rgba(6,18,31,.82) 68%, var(--ink) 100%),
        linear-gradient(90deg, rgba(6,18,31,.68) 0%, rgba(6,18,31,.12) 62%, transparent 100%),
        radial-gradient(120% 70% at 50% 110%, rgba(18,53,99,.5), transparent 65%);
}
.hero__body {
    position: relative; z-index: 2;
    padding-bottom: clamp(1.2rem, 3vh, 3rem);
}
.hero__title {
    font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
    line-height: .82; letter-spacing: -.012em;
    margin-bottom: .2rem;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__title .line--lead > span { font-size: var(--t-hero); }
.hero__title .line--tail > span {
    font-size: clamp(1.5rem, 4.4vw, 3.2rem);
    letter-spacing: .14em;
    font-weight: 600;
    padding-top: .35em;
}
.hero__title .accent {
    color: var(--ball);
    background: linear-gradient(180deg, #ffdd33 12%, var(--ball-dim) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* l'ombra va solo sulla riga bianca: sotto un testo in gradiente si vedrebbe attraverso */
.hero__title .line--lead > span { text-shadow: 0 6px 34px rgba(6, 18, 31, .7); }

.hero__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
    margin-top: clamp(1rem, 2vh, 1.6rem); margin-bottom: clamp(1.2rem, 2.5vh, 2rem);
}
.hero__claim {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: rgba(255, 255, 255, .84);
    max-width: 46ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__stats {
    position: relative; z-index: 2;
    border-top: 1px solid var(--line);
    border-image: linear-gradient(90deg, transparent, var(--line-str) 18%, var(--line-str) 82%, transparent) 1;
    display: grid; grid-template-columns: repeat(2, 1fr);
}
.stat { transition: background .35s var(--ease); }
.stat:hover { background: rgba(255, 255, 255, .03); }
@media (min-width: 780px) { .hero__stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
    padding: clamp(.9rem, 1.8vh, 1.4rem) 0 clamp(1rem, 2vh, 1.7rem);
    border-right: 1px solid var(--line);
    padding-inline: clamp(.9rem, 2vw, 1.6rem);
}
.hero__stats .stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
@media (max-width: 779px) {
    .stat:nth-child(2n) { border-right: 0; }
    .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .stat:nth-child(3) { padding-left: 0; }
}
.stat__num {
    font-family: var(--f-display); font-weight: 800;
    font-size: max(2rem, min(4.6vw, 5vh, 3.4rem)); line-height: .9;
    color: var(--ball);
    text-shadow: 0 3px 18px rgba(6, 18, 31, .75);
    display: flex; align-items: baseline; gap: .1em;
}
.stat__suffix { font-size: .45em; color: var(--text); }
.stat__label {
    font-family: var(--f-mono); font-size: var(--t-label);
    text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
    margin-top: .5rem;
}

.scroll-hint {
    position: absolute; right: var(--gut); bottom: clamp(7rem, 14vw, 10rem); z-index: 3;
    display: none; align-items: center; gap: .7rem;
    font-family: var(--f-mono); font-size: var(--t-label);
    text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.7);
    writing-mode: vertical-rl;
}
@media (min-width: 900px) { .scroll-hint { display: flex; } }
.scroll-hint__track { width: 1px; height: 64px; background: var(--line-str); position: relative; overflow: hidden; }
.scroll-hint__track::after {
    content: ""; position: absolute; inset-inline: 0; height: 22px; background: var(--ball);
    animation: railDrop 2.2s var(--ease) infinite;
}
@keyframes railDrop {
    0%   { transform: translateY(-100%); }
    60%  { transform: translateY(100%); }
    100% { transform: translateY(100%); }
}

/* --------------------------------------------------------------------------
   9. GRIGLIE E CARD GENERICHE
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.4rem, 2.4vw, 2rem);
    background: rgba(255, 255, 255, .028);
    border: 1px solid var(--line);
    box-shadow: var(--edge-hi);
    transition: background .35s var(--ease), border-color .35s var(--ease),
                transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
/* la lama gialla che si distende sul bordo alto: rende la scheda viva prima del clic */
.card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--ball), transparent 70%);
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s var(--ease-out);
}
@media (hover: hover) {
    .card:hover {
        background: rgba(255, 255, 255, .055);
        border-color: var(--line-str);
        transform: translateY(-4px);
        box-shadow: var(--edge-hi), var(--drop-1);
    }
    .card:hover::before { transform: scaleX(1); }
}
/* su touch la lama di luce non si accenderebbe mai: resta accesa a meta' */
@media (hover: none) {
    .card::before { transform: scaleX(.34); }
}
.summer .card::before { background: linear-gradient(90deg, var(--clay), transparent 70%); }
.card__icon {
    width: 34px; height: 34px; color: var(--ball);
    margin-bottom: 1.1rem;
}
.card__title {
    font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
    font-size: 1.4rem; line-height: 1; letter-spacing: .005em;
    margin-bottom: .6rem;
}
.card__text { font-size: var(--t-small); color: var(--muted); line-height: 1.6; }

.card--num .card__num {
    font-family: var(--f-display); font-weight: 800; font-size: 3.2rem; line-height: .85;
    color: var(--ball); display: flex; align-items: baseline; gap: .15em;
}
.card--num .card__num span { font-size: .28em; color: var(--muted); font-family: var(--f-mono); letter-spacing: .1em; }

/* Riga descrittiva a due colonne */
.feat {
    display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
    padding-block: 1.35rem;
    border-bottom: 1px solid var(--line);
}
.feat:first-child { border-top: 1px solid var(--line); }
.feat__icon {
    width: 40px; height: 40px; display: grid; place-items: center;
    border: 1px solid var(--line-str); color: var(--ball);
}
.feat__icon svg { width: 18px; height: 18px; }
.feat__title {
    font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
    font-size: 1.24rem; line-height: 1.05; margin-bottom: .3rem;
}
.feat__text { font-size: var(--t-small); color: var(--muted); }
.feat__text strong { color: var(--text); font-weight: 600; }

/* Media con parallax */
.media {
    position: relative; overflow: hidden;
    background: var(--ink-2);
}
.media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.media__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media--tall { aspect-ratio: 3 / 4; max-height: 78vh; }
.media--wide { aspect-ratio: 16 / 10; }
.media--square { aspect-ratio: 1 / 1; }
@media (max-width: 979px) {
    /* in colonna singola una 3:4 riempie tutto lo schermo: si accorcia */
    .media--tall { aspect-ratio: 4 / 3; max-height: 60vh; }
    .media--wide { aspect-ratio: 3 / 2; }
}
/* cornice interna sfalsata, come le stampe incorniciate dei club storici */
.media::after {
    content: ""; position: absolute; inset: 10px; z-index: 2;
    border: 1px solid rgba(255, 255, 255, .16);
    pointer-events: none;
}
.summer .media::after { border-color: rgba(255, 255, 255, .24); }
.media__tag {
    position: absolute; left: 0; bottom: 0; z-index: 3;
    border-top: 2px solid var(--ball);
    background: var(--ink); color: var(--ball);
    font-family: var(--f-mono); font-size: var(--t-label);
    letter-spacing: .12em; text-transform: uppercase;
    padding: .55rem .9rem;
}
.media__ph { z-index: 3; }
.media__ph {
    position: absolute; inset: auto 0 0 0;
    background: linear-gradient(180deg, transparent, rgba(6,18,31,.94));
    padding: 2.5rem .9rem .8rem;
    font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ball);
}

/* Split: testo + immagine */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--sticky { align-items: start; }
@media (min-width: 980px) {
    .split--sticky .split__media { position: sticky; top: calc(var(--head-h) + 2rem); }
}
@media (min-width: 980px) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
    .split--media-first > .split__media { order: -1; }
}

/* --------------------------------------------------------------------------
   10. SEZIONE CIRCOLO
   -------------------------------------------------------------------------- */
.circolo { background: var(--ink); }
.circolo__quote {
    font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
    font-size: clamp(1.8rem, 3.6vw, 3.2rem); line-height: .95;
    border-left: 2px solid var(--ball);
    padding-left: clamp(1rem, 2vw, 1.8rem);
    max-width: 34ch;
}
.circolo__quote em { font-style: normal; color: var(--ball); }

.services { margin-top: clamp(3rem, 6vw, 5rem); }

/* --------------------------------------------------------------------------
   11. SEZIONE TENNIS — terra battuta
   -------------------------------------------------------------------------- */
.tennis {
    position: relative;
    background: linear-gradient(180deg, var(--ink) 0%, #170d09 18%, #1d100a 82%, var(--ink) 100%);
    overflow: hidden;
}
.tennis__bg {
    position: absolute; inset: 0; z-index: 0; opacity: .22;
}
.tennis__bg video, .tennis__bg img { width: 100%; height: 100%; object-fit: cover; }
.tennis__bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--ink), transparent 25%, transparent 75%, var(--ink));
}
.tennis .wrap { position: relative; z-index: 1; }

.badge-fed {
    display: inline-flex; align-items: center; gap: .8rem;
    padding: .6rem .95rem .6rem .6rem;
    border: 1px solid var(--line-str);
    background: rgba(255, 255, 255, .04);
}
.badge-fed img { width: auto; height: 42px; max-width: 76px; object-fit: contain; background: #fff; padding: 3px; }
.badge-fed__ph {
    width: 38px; height: 38px; flex: none;
    display: grid; place-items: center;
    border: 1px dashed var(--line-str); color: var(--faint);
    font-family: var(--f-mono); font-size: .5rem; text-align: center; line-height: 1.1;
}
.badge-fed__text { display: grid; line-height: 1.15; }
.badge-fed__name { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; }
.badge-fed__note { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Orari */
.hours {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .03);
    box-shadow: var(--edge-hi);
}
.hours__row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: 1rem clamp(1rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--line);
}
.hours__row:last-child { border-bottom: 0; }
.hours__day { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hours__time { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; letter-spacing: .01em; }

/* --------------------------------------------------------------------------
   12. SEZIONE PADEL
   -------------------------------------------------------------------------- */
.padel { background: var(--ink); }
.padel__panel {
    background: linear-gradient(140deg, var(--navy) 0%, #0d2547 60%, var(--ink-2) 100%);
    border: 1px solid var(--line);
    box-shadow: var(--edge-hi), var(--drop-1);
    padding: clamp(1.6rem, 3.5vw, 3rem);
}
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.chip {
    font-family: var(--f-mono); font-size: var(--t-label);
    text-transform: uppercase; letter-spacing: .1em;
    padding: .45rem .8rem;
    border: 1px solid var(--line-str);
    color: var(--text);
}
.chip--on { border-color: var(--ball); color: var(--ball); }

/* --------------------------------------------------------------------------
   13. FITNESS + CORSI (marquee legato allo scroll)
   -------------------------------------------------------------------------- */
.fitness { background: var(--ink); }

.marquee {
    position: relative;
    overflow: hidden;
    border-block: 1px solid var(--line);
    padding-block: clamp(1.2rem, 2.6vw, 2rem);
    margin-block: clamp(2.5rem, 5vw, 4rem);
}
.marquee__track {
    display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
    width: max-content;
    will-change: transform;
}
.marquee__item {
    font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
    font-size: clamp(2rem, 5.5vw, 4.5rem); line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(234, 240, 247, .35);
    white-space: nowrap;
}
.marquee__item--fill { color: var(--ball); -webkit-text-stroke: 0; }
.marquee__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--clay); flex: none; }

.course-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 clamp(1rem, 2vw, 2rem); }
.course-list li {
    display: flex; align-items: baseline; gap: .8rem;
    padding-block: .85rem;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-body);
}
.course-list li::before {
    content: attr(data-n);
    font-family: var(--f-mono); font-size: .62rem; color: var(--faint); letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   14. SALA PESI
   -------------------------------------------------------------------------- */
.gym {
    background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 40%, var(--ink) 100%);
}
.gym__figure { position: relative; z-index: 1; }
.gym__figure .media { position: relative; z-index: 1; }
.gym__size {
    position: absolute; z-index: 3;
    right: clamp(-1.2rem, -1.4vw, 0rem); bottom: -.24em;
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(3.2rem, 12vw, 9rem); line-height: .8;
    color: var(--ball);
    text-shadow: 0 6px 40px rgba(6, 18, 31, .8);
    pointer-events: none;
}
.gym__size span { font-size: .26em; letter-spacing: .04em; }
.gym__strip { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* --------------------------------------------------------------------------
   15. CENTRO ESTIVO — l'unica sezione chiara
   -------------------------------------------------------------------------- */
.summer {
    position: relative;
    z-index: 2;
    background: var(--sand);
    color: var(--sand-ink);
    border-top: 2px solid var(--clay);
    box-shadow: 0 -28px 60px rgba(3, 9, 16, .5);
}
.summer .section-head__title { color: var(--sand-ink); }
.summer .section-head__title em { color: var(--clay); }
.summer .lede { color: rgba(36, 24, 15, .72); }
.summer .card {
    background: rgba(36, 24, 15, .035);
    border-color: rgba(36, 24, 15, .14);
}
.summer .card:hover { background: rgba(36, 24, 15, .06); border-color: rgba(36, 24, 15, .3); }
.summer .card__icon { color: var(--clay); }
.summer .card__text { color: rgba(36, 24, 15, .68); }
.summer .feat { border-color: rgba(36, 24, 15, .14); }
.summer .feat__icon { border-color: rgba(36, 24, 15, .25); color: var(--clay); }
.summer .feat__text { color: rgba(36, 24, 15, .7); }
.summer .feat__text strong { color: var(--sand-ink); }

.summer__banner {
    display: grid; gap: 1.5rem; align-items: center;
    background: var(--sand-ink); color: var(--sand);
    padding: clamp(1.5rem, 3.5vw, 2.6rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) { .summer__banner { grid-template-columns: 1fr auto; } }
.summer__banner-title {
    font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
    font-size: clamp(1.8rem, 4vw, 3rem); line-height: .92;
}
.summer__banner-title em { font-style: normal; color: var(--ball); }

.period {
    display: inline-flex; align-items: baseline; gap: .8rem;
    font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
    font-size: clamp(2rem, 5vw, 3.6rem); line-height: .9;
    color: var(--clay);
}
.period small {
    font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em;
    color: rgba(36, 24, 15, .55);
}

.age-band {
    display: flex; align-items: center; gap: 1rem;
    border: 1px solid rgba(36, 24, 15, .2);
    padding: 1.1rem 1.4rem;
    margin-top: 1.5rem;
}
.age-band__num {
    font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: .85; color: var(--sand-ink);
}
.age-band__txt { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: rgba(36,24,15,.65); }

.sport-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.sport-tag {
    font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
    font-size: 1.15rem; letter-spacing: .02em;
    padding: .4rem .85rem;
    background: var(--sand-ink); color: var(--sand);
}
.sport-tag:nth-child(even) { background: var(--clay-dk); }

/* --------------------------------------------------------------------------
   16. CONTATTI
   -------------------------------------------------------------------------- */
.contatti { background: var(--ink); }

.contact-item {
    display: grid; grid-template-columns: auto 1fr; gap: 1rem;
    padding-block: 1.4rem;
    border-bottom: 1px solid var(--line);
}
.contact-item:first-of-type { border-top: 1px solid var(--line); }
.contact-item__icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-str); color: var(--ball); }
.contact-item__icon svg { width: 17px; height: 17px; }
.contact-item__label { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: .25rem; }
.contact-item__value { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; line-height: 1.05; }
.contact-item__value--plain {
    font-family: var(--f-body); font-weight: 500; text-transform: none;
    font-size: 1.05rem; letter-spacing: 0; word-break: break-word;
}
.contact-item__value a:hover { color: var(--ball); }
.contact-item__note { font-size: var(--t-small); color: var(--muted); margin-top: .2rem; }
.contact-item__hours { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1rem; max-width: 22rem; }
.contact-item__hours + .contact-item__hours { margin-top: .35rem; }
.contact-item__hours span { font-size: var(--t-small); color: var(--muted); }
.contact-item__hours b { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; line-height: 1.1; white-space: nowrap; }

.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 640px) {
    .form__row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.field { display: grid; gap: .4rem; min-width: 0; }
.field label {
    font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--faint);
}
.field input, .field textarea, .field select {
    width: 100%;
    min-width: 0;
    background-color: rgba(255, 255, 255, .04);
    background-image: linear-gradient(90deg, var(--ball), var(--ball));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    border: 1px solid var(--line);
    padding: .85rem 1rem;
    font-size: var(--t-body);
    transition: border-color .3s var(--ease), background-color .3s var(--ease),
                background-size .45s var(--ease-out), box-shadow .3s var(--ease);
}

/* Menu a tendina: freccia disegnata al posto di quella di sistema,
   e voci con fondo e testo dichiarati, per i browser che non seguono
   color-scheme sul popup. */
.field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.6rem;
    cursor: pointer;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd400' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
        linear-gradient(90deg, var(--ball), var(--ball));
    background-position: right 1rem center, 0 100%;
    background-size: 13px 13px, 0 2px;
}
.field select:focus {
    background-size: 13px 13px, 100% 2px;
}
.field select option {
    background-color: var(--ink-2);
    color: var(--text);
    padding: .5rem;
}
.field select option:checked {
    background-color: var(--navy);
    color: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus {
    border-color: var(--ball);
    background-color: rgba(255, 255, 255, .06);
    background-size: 100% 2px;
    box-shadow: 0 0 0 3px rgba(255, 212, 0, .12);
    outline: none;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field--hp { position: absolute; left: -9999px; }

.form__note { font-size: .75rem; color: var(--faint); line-height: 1.5; }
.field__opt { text-transform: none; letter-spacing: 0; opacity: .8; }
.modal__hint {
    margin-top: .5rem;
    font-family: var(--f-mono); font-size: .62rem;
    letter-spacing: .06em; line-height: 1.5;
    color: var(--ball);
}
.form__actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.map {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    border: 1px solid var(--line);
    margin-top: clamp(2.5rem, 5vw, 4rem);
}
/* Mappa a richiesta: prima del clic nessuna chiamata a Google */
.map__gate {
    position: absolute; inset: 0;
    display: grid; place-content: center; justify-items: center; gap: 1rem;
    padding: 1.5rem; text-align: center;
    background:
        linear-gradient(rgba(6, 18, 31, .78), rgba(6, 18, 31, .9)),
        url("../public/images/sezioni/aerea-circolo.jpg") center / cover;
}
.map__addr { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1; }
.map__note { font-size: .75rem; color: var(--muted); max-width: 46ch; }
.map__note a, .form__note a, .footer__bottom a { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 599px) { .map { aspect-ratio: 4 / 5; } .map__link { left: 1rem; text-align: center; } }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.9) contrast(.85); }
.map__link {
    position: absolute; right: 1rem; bottom: 1rem;
    background: var(--ink); color: var(--ball);
    padding: .6rem 1rem;
    font-family: var(--f-mono); font-size: var(--t-label);
    text-transform: uppercase; letter-spacing: .1em;
    border: 1px solid var(--line-str);
}
.map__link:hover { background: var(--ball); color: var(--ink); }

/* --------------------------------------------------------------------------
   17. DIALOG FORM (mailto)
   -------------------------------------------------------------------------- */
.modal {
    position: fixed; inset: 0; z-index: 90;
    display: none;
    place-items: center;
    padding: var(--gut);
    background: rgba(3, 9, 16, .8);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal.is-open { display: grid; }
.modal__box {
    width: min(560px, 100%);
    max-height: 88vh; overflow-y: auto;
    background: var(--ink-2);
    border: 1px solid var(--line-str);
    padding: clamp(1.4rem, 3vw, 2.2rem);
}
.modal__head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.modal__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.8rem; line-height: .95; }
.modal__sub { font-size: var(--t-small); color: var(--muted); margin-top: .4rem; }
.modal__close { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); flex: none; }
.modal__close:hover { border-color: var(--ball); color: var(--ball); }
.modal__close svg { width: 16px; height: 16px; }
.modal__alt {
    margin-top: 1.2rem; padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
}
.modal__alt-label { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); width: 100%; }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.footer {
    background: var(--ink-2);
    border-top: 1px solid var(--line);
    padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.footer__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 560px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }
.footer__title {
    font-family: var(--f-mono); font-size: .62rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--ball); margin-bottom: 1.1rem;
}
.footer__list { display: grid; gap: .6rem; font-size: var(--t-small); color: var(--muted); }
.footer__list a:hover { color: var(--ball); }
.footer__hours { display: grid; gap: .35rem; font-size: var(--t-small); color: var(--muted); }
.footer__hours b { color: var(--text); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; display: block; }
.footer__brand-text { font-size: var(--t-small); color: var(--muted); max-width: 34ch; margin-top: 1.1rem; }
.footer__socials { display: flex; gap: .5rem; margin-top: 1.4rem; }
.footer__social {
    position: relative;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    color: var(--muted);
    box-shadow: var(--edge-hi);
    overflow: hidden;
    transition: border-color .3s var(--ease), color .3s var(--ease),
                transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
/* al passaggio si accende il colore del marchio: riconoscibile, ma solo in hover */
.footer__social::before {
    content: ""; position: absolute; inset: 0;
    opacity: 0; transition: opacity .35s var(--ease);
}
.footer__social--ig::before {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.footer__social--fb::before { background: #1877f2; }
.footer__social--wa::before { background: #25d366; }
.footer__social svg { position: relative; z-index: 1; width: 19px; height: 19px; }
@media (hover: hover) {
    .footer__social:hover {
        color: #fff;
        border-color: transparent;
        transform: translateY(-3px);
        box-shadow: var(--drop-1);
    }
    .footer__social:hover::before { opacity: 1; }
}
/* su touch i marchi sono sempre accesi: il colore e' il segnale di riconoscimento */
@media (hover: none) {
    .footer__social { color: #fff; border-color: transparent; }
    .footer__social::before { opacity: 1; }
}

.footer__bottom {
    margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
    font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--faint);
}

.to-top {
    width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid var(--line); color: var(--muted);
}
.to-top:hover { border-color: var(--ball); color: var(--ball); }
.to-top svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   19. GRANA
   Un velo di rumore fermo sopra la pagina: da' materia al fondo scuro.
   Sta sotto l'header e non intercetta il puntatore.
   -------------------------------------------------------------------------- */
body::after {
    content: "";
    position: fixed; inset: 0; z-index: 3;
    pointer-events: none;
    opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   20. ANIMAZIONI DI INGRESSO
   -------------------------------------------------------------------------- */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
}
.no-motion [data-reveal],
.is-revealed[data-reveal] { opacity: 1; transform: none; }

[data-split] .split-line { display: block; overflow: hidden; }

/* --------------------------------------------------------------------------
   22. RIFINITURE PER SCHERMI PICCOLI
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .hero__title .line--tail > span { letter-spacing: .08em; }
    .hero__cta { display: grid; }
    .hero__cta .btn { width: 100%; }
    .section-head { margin-bottom: 2rem; }
    .modal__box { padding: 1.2rem 1.1rem; max-height: 92vh; }
    .modal__alt { gap: .5rem; }
    .modal__alt .btn { flex: 1 1 100%; }
    .sport-tag { font-size: 1.02rem; }
    .hours__time { font-size: 1.3rem; }
    .contact-item__value { font-size: 1.25rem; }
    .footer__bottom { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}

/* Tablet in verticale: due colonne dove il testo altrimenti si allunga troppo */
@media (min-width: 620px) and (max-width: 979px) {
    .hero__stats { grid-template-columns: repeat(4, 1fr); }
    .hero__stats .stat:nth-child(2n) { border-right: 1px solid var(--line); }
    .hero__stats .stat:nth-child(-n+2) { border-bottom: 0; }
    .hero__stats .stat:last-child { border-right: 0; }
    .hero__stats .stat:nth-child(3) { padding-left: clamp(.9rem, 2vw, 1.6rem); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .hero__media { position: absolute; inset: 0; }
    .scroll-hint__track::after { display: none; }
}

/* --------------------------------------------------------------------------
   21. MESSAGGI DI ERRORE DEI MODULI
   -------------------------------------------------------------------------- */
.form__error {
    margin: 0;
    padding: .7rem .9rem;
    border-left: 3px solid var(--clay-lt);
    background: rgba(212, 121, 92, .12);
    color: var(--text);
    font-size: var(--t-small);
}
.summer .form__error { color: var(--sand-ink); }

/* --------------------------------------------------------------------------
   22. PRENOTA UN CAMPO — soci al portale, non soci alla segreteria
   <details> nativo: si apre e chiude anche senza JavaScript.
   -------------------------------------------------------------------------- */
.book { position: relative; }
.book__toggle { display: flex; list-style: none; }
.book__toggle::-webkit-details-marker { display: none; }
.book__toggle svg { transition: transform .3s var(--ease-out); }
.book[open] .book__toggle svg { transform: rotate(180deg); }
.book__menu {
    position: absolute; z-index: 10; top: calc(100% + .5rem); left: 0;
    width: max-content; min-width: 100%; max-width: min(22rem, calc(100vw - 2 * var(--gut)));
    display: grid;
    background: var(--ink-2);
    border: 1px solid var(--line-str); border-top: 2px solid var(--ball);
    box-shadow: var(--drop-2);
}
.book__opt {
    display: grid; gap: .2rem; text-align: left;
    padding: .95rem 1.1rem;
    border-bottom: 1px solid var(--line);
    transition: background .2s var(--ease);
}
.book__opt:last-child { border-bottom: 0; }
.book__opt:hover, .book__opt:focus-visible { background: rgba(255, 255, 255, .05); }
.book__who {
    font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
    font-size: 1.2rem; line-height: 1;
}
.book__opt:hover .book__who { color: var(--ball); }
.book__what { font-size: var(--t-small); color: var(--muted); }

/* Padel: si prenota solo per telefono */
.padel__book {
    display: grid; gap: .3rem;
    margin-top: 1.8rem; padding-top: 1.4rem;
    border-top: 1px solid var(--line);
}
.padel__book-label {
    font-family: var(--f-mono); font-size: var(--t-label);
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.padel__book-num {
    font-family: var(--f-display); font-weight: 800;
    font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1;
    color: var(--ball);
    justify-self: start;
    transition: color .2s var(--ease);
}
.padel__book-num:hover { color: #fff; }

/* --------------------------------------------------------------------------
   23. SCUOLA TENNIS — continua la terra battuta della sezione Tennis
   -------------------------------------------------------------------------- */
.scuola { background: linear-gradient(180deg, var(--ink) 0%, #1a0f0a 50%, var(--ink) 100%); }
.media--team { aspect-ratio: 16 / 9; }
@media (max-width: 699px) { .media--team { aspect-ratio: 4 / 3; } }

/* --------------------------------------------------------------------------
   24. RISTORANTE
   -------------------------------------------------------------------------- */
.ristorante { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 55%, var(--ink) 100%); }
.ristorante__strip { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Le ancore non finiscono sotto l'header fisso (anche senza Lenis) */
[data-section], #contatti { scroll-margin-top: calc(var(--head-h) + 1rem); }

/* --------------------------------------------------------------------------
   25. DESIGN 2026
   Otto ritocchi di modernizzazione: velo dell'hero, grading delle foto,
   grana unica, parole giganti di sezione, fascia aerea, titoli outline,
   firma gigante nel footer, header compatto quando e' solido.
   Le animazioni collegate stanno in main.js (blocco 6b) e si attivano solo
   con GSAP e senza prefers-reduced-motion: altrimenti tutto resta visibile.
   -------------------------------------------------------------------------- */

/* 1. HERO — il velo si apre: il volo del drone resta leggibile, il buio
   resta in basso e, leggermente, a sinistra dietro il titolo */
.hero__scrim {
    background:
        linear-gradient(180deg, rgba(6, 18, 31, .04) 0%, rgba(6, 18, 31, .10) 38%, rgba(6, 18, 31, .62) 74%, var(--ink) 100%),
        linear-gradient(75deg, rgba(6, 18, 31, .48) 0%, rgba(6, 18, 31, .12) 50%, transparent 78%);
}

/* 2. FOTO — color grading uniforme su tutte le immagini incorniciate
   (l'ingresso a tendina e' il blocco 6b di main.js, sulla figure) */
.media img { filter: saturate(.92) contrast(1.05); }

/* 3. GRANA — resta quella della sezione 19 (body::after): non si duplica */

/* 4. PAROLE GIGANTI — in alto a destra dietro i contenuti; la deriva
   verticale con lo scroll e' il blocco 6b di main.js */
.watermark {
    position: absolute;
    top: clamp(.5rem, 3vw, 2.5rem);
    right: 0;
    z-index: 0;
    font-family: var(--f-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(7rem, 22vw, 22rem);
    line-height: .8;
    letter-spacing: -.005em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(234, 240, 247, .07);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}
.summer .watermark { -webkit-text-stroke-color: rgba(36, 24, 15, .09); }
/* in Tennis il video di fondo sta a z 0: la parola gli si mette sopra,
   restando sotto ai contenuti (.wrap, z 1) */
.tennis .watermark { z-index: 1; }
.padel > .wrap, .gym > .wrap, .summer > .wrap, .ristorante > .wrap {
    position: relative; z-index: 1;
}
/* le parole sforano a destra: si taglia senza creare scroll container
   (lo sticky di .split--sticky nel Circolo non ne risente) */
.padel, .gym, .summer, .ristorante { overflow-x: clip; }

/* 6. TITOLI OUTLINE — il gesto del tratto al posto del gradiente */
.section-head__title em.outline {
    background: none;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px var(--ball);
}
/* su fondo sabbia il tratto segue la terra battuta */
.summer .section-head__title em.outline { -webkit-text-stroke-color: var(--clay); }

/* 7. CHIUSURA — la firma gigante sopra la griglia del footer */
.footer__giant {
    font-family: var(--f-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(5rem, 21vw, 20rem);
    line-height: .8;
    letter-spacing: .01em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 212, 0, .35);
    width: 100%;
    white-space: nowrap;
    margin: 0 0 clamp(1.5rem, 4vw, 3rem);
}

/* 8. HEADER COMPATTO + FRECCE — la barra solida si assottiglia; le frecce
   dei pulsanti avanzano di 4px al passaggio (il chevron di .book no) */
.header__inner { transition: min-height .4s var(--ease); }
.brand__mark { transition: width .4s var(--ease), height .4s var(--ease); }
.header.is-solid .header__inner { min-height: 62px; }
.header.is-solid .brand__mark { width: 40px; height: 40px; }

.btn svg { transition: transform .3s var(--ease-out); }
@media (hover: hover) {
    .btn:hover svg { transform: translateX(4px); }
    /* il chevron di "Prenota un campo" ruota, non trasla */
    .btn.book__toggle:hover svg { transform: none; }
    .book[open] .book__toggle:hover svg { transform: rotate(180deg); }
}

/* Scuola Tennis: testo del cliente (23/09/2026) */
.scuola__intro { margin-top: 1.6rem; color: var(--muted); max-width: 60ch; }
.scuola__pillars { margin-top: clamp(3rem, 6vw, 5rem); }
.scuola__pillars .card__title { margin-bottom: .7rem; }
.scuola__pillars .card__text + .card__text { margin-top: .7rem; }
.scuola__pillars .card--num .card__num { margin-bottom: 1rem; }
.scuola__close { margin-top: clamp(3rem, 6vw, 5rem); display: grid; gap: 1.2rem; }
.scuola__quote { max-width: 30ch; border-left-color: var(--clay-lt); }
.scuola__quote em { color: var(--clay-lt); }

/* Coppie di foto quadrate (Il Circolo, Tennis) */
.photo-pair { margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 640px) { .photo-pair { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   Giro del 25/09/2026
   -------------------------------------------------------------------------- */
/* "Prenota un campo": .hero__cta riceve un transform dalle animazioni e chiude il
   menu nel proprio livello; in colonna singola il video che segue lo copriva e il
   tocco su "Non sono socio" finiva sul video (il menu si chiudeva). */
.book-row { position: relative; z-index: 5; }

/* Tennis: quattro foto quadrate, 2×2 su telefono e tablet, in fila su desktop */
.photo-quad { margin-top: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr 1fr; gap: clamp(.6rem, 1.5vw, 1.2rem); }
@media (min-width: 980px) { .photo-quad { grid-template-columns: repeat(4, 1fr); } }

/* Foto a tutta larghezza sotto le colonne (Padel, Fitness) */
.media--band { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Fitness: programmazione dei corsi. È un'immagine con testo: si mostra intera
   (niente ritaglio, filtro o cornice) e il tocco la apre a piena risoluzione */
.media--schedule { max-width: min(1100px, 125vh); margin-inline: auto; background: none; overflow: visible; }
.media--schedule::after { display: none; }
.media--schedule a { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.media--schedule img { height: auto; object-fit: contain; filter: none; will-change: auto; }
.media--schedule a:focus-visible { outline: 2px solid var(--ball); outline-offset: 4px; }
/* Immagine ingrandita (programmazione): su schermi grandi sta tutta nella finestra,
   su telefono è larga 900 px e si scorre col dito; la X resta sempre visibile */
.zoom {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(3, 9, 16, .94);
}
.zoom[hidden] { display: none; }
.zoom__scroll {
    position: absolute; inset: 0;
    overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    display: grid; place-items: center;
    padding: 4.5rem var(--gut) var(--gut);
}
.zoom__scroll img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 6rem); border-radius: 6px; }
@media (max-width: 899px) {
    .zoom__scroll { place-items: start; }
    .zoom__scroll img { max-width: none; max-height: none; width: 900px; }
}
.zoom__close {
    position: fixed; top: .9rem; right: .9rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 48px; padding: 0 1.1rem;
    background: var(--ball); color: var(--ink);
    font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.zoom__close svg { width: 18px; height: 18px; }
.zoom__hint {
    position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 2;
    padding: .5rem .9rem; background: var(--ink); border-top: 2px solid var(--ball); color: var(--ball);
    font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap; pointer-events: none;
}
@media (min-width: 900px) { .zoom__hint { display: none; } }
.zoom__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.media__cap {
    margin-top: .8rem; text-align: center;
    font-family: var(--f-mono); font-size: var(--t-label);
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* Scuola Tennis: composizione dello staff */
.staff__lead { color: var(--muted); margin-bottom: 1.2rem; }
.staff {
    list-style: none; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); column-gap: 2rem;
    border-top: 1px solid var(--line);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.staff li {
    display: flex; align-items: baseline; gap: .9rem;
    padding: .9rem 0; border-bottom: 1px solid var(--line);
}
.staff__num {
    font-family: var(--f-display); font-weight: 800; font-size: 2rem; line-height: 1;
    color: var(--clay-lt); min-width: 1.4ch;
}
.staff__role { font-size: var(--t-small); }

/* Ristorante: i due cellulari */
.feat__phones a { color: var(--text); font-weight: 600; white-space: nowrap; }
.feat__phones a:hover { color: var(--ball); }