/* TopSmash — impalcatura: header, hero, sezioni, footer, mobile
   ------------------------------------------------------------------ */

.ts-wrap { width: 100%; max-width: var(--ts-content); margin-inline: auto; padding-inline: var(--ts-gutter); }
.ts-wrap--narrow { max-width: var(--ts-narrow); }
.ts-section { padding-block: clamp(3.2rem, 8vw, 7rem); position: relative; }
.ts-section--tight { padding-block: clamp(2.2rem, 5vw, 4rem); }
.ts-section--alt { background: var(--ts-bg-2); }
.ts-section--line { border-top: 1px solid var(--ts-line); }

/* ── Header ───────────────────────────────────────────────────────── */
.ts-header {
	position: sticky; top: 0; z-index: 110;
	backdrop-filter: blur(14px) saturate(140%);
	background: color-mix(in srgb, var(--ts-bg) 72%, transparent);
	border-bottom: 1px solid transparent;
	transition: background .3s var(--ts-ease), border-color .3s var(--ts-ease), height .3s var(--ts-ease);
}
.ts-header.is-stuck { background: color-mix(in srgb, var(--ts-bg) 92%, transparent); border-bottom-color: var(--ts-line); }
.ts-header__inner { display: flex; align-items: center; gap: 1.2rem; min-height: var(--ts-header-h); }
.ts-header.is-stuck .ts-header__inner { min-height: 60px; }

.ts-brand { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--ts-font-display); font-weight: 800; letter-spacing: -.03em; font-size: 1.12rem; }
.ts-brand__mark { display: grid; place-items: center; }
.ts-brand__mark svg { overflow: visible; }
.ts-brand:hover .ts-brand__ball { animation: ts-ball-pop .7s var(--ts-ease); }
.custom-logo-link img, .ts-header .custom-logo { max-height: 46px; width: auto; }

/* Desktop: menu diviso ai lati del logo centrale */
.ts-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.ts-header__side { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.ts-header .ts-header__inner { max-width: none; }
.ts-header__side--left { justify-content: flex-start; }
.ts-header__side--right { justify-content: flex-end; }
.ts-header__logo { display: flex; justify-content: center; position: relative; z-index: 2; align-self: start; padding-top: 8px; margin-bottom: -26px; transition: padding .3s var(--ts-ease), margin .3s var(--ts-ease); }
.ts-header__logo .custom-logo-link { display: block; line-height: 0; }
.ts-header__logo .custom-logo { max-height: 90px; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45)); transition: max-height .3s var(--ts-ease); }
.ts-header.is-stuck .ts-header__logo { align-self: center; padding-top: 0; margin-bottom: 0; }
.ts-header.is-stuck .ts-header__logo .custom-logo { max-height: 50px; }

.ts-nav--right { margin-left: 0; }
.ts-nav a { white-space: nowrap; }
.ts-nav ul { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.ts-nav li { position: relative; }
.ts-nav a {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .55rem .85rem; border-radius: var(--ts-radius-pill);
	font-size: .92rem; font-weight: 550; color: var(--ts-muted);
	transition: color .2s var(--ts-ease), background .2s var(--ts-ease);
}
.ts-nav a:hover, .ts-nav .current-menu-item > a, .ts-nav .current_page_item > a { color: var(--ts-text); background: var(--ts-elev); }

/* Sottomenu */
.ts-nav .sub-menu {
	position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px;
	flex-direction: column; align-items: stretch; gap: 0;
	background: var(--ts-surface); border: 1px solid var(--ts-line);
	border-radius: 14px; padding: .4rem; box-shadow: var(--ts-shadow);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .2s var(--ts-ease), transform .2s var(--ts-ease), visibility .2s;
}
.ts-nav li:hover > .sub-menu, .ts-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.ts-nav .sub-menu a { padding: .5rem .7rem; border-radius: 9px; }

.ts-header__actions { display: flex; align-items: center; gap: .5rem; }

.ts-themetoggle {
	display: grid; place-items: center; width: 42px; height: 42px;
	border: 1px solid var(--ts-line); border-radius: 50%;
	background: transparent; cursor: pointer; color: var(--ts-text);
	transition: border-color .2s var(--ts-ease), transform .2s var(--ts-ease);
}
.ts-themetoggle:hover { border-color: var(--ts-line-strong); transform: rotate(-12deg); }
.ts-themetoggle .ts-icon--moon { display: none; }
.ts-scheme-light .ts-themetoggle .ts-icon--moon { display: block; }
.ts-scheme-light .ts-themetoggle .ts-icon--sun { display: none; }

.ts-burger {
	display: none; width: 46px; height: 46px; border-radius: 14px;
	border: 1px solid var(--ts-line); background: transparent; cursor: pointer; color: inherit;
	place-items: center;
}

/* ── Menu mobile a tutto schermo ──────────────────────────────────── */
.ts-drawer {
	position: fixed; inset: 0; z-index: 130;
	background: color-mix(in srgb, var(--ts-bg) 96%, transparent);
	display: flex; flex-direction: column; padding: 1.2rem var(--ts-gutter) 2rem;
	clip-path: circle(0% at calc(100% - 46px) 46px);
	transition: clip-path .6s var(--ts-ease);
	pointer-events: none;
}
.ts-drawer.is-open { clip-path: circle(145% at calc(100% - 46px) 46px); pointer-events: auto; }
.ts-drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--ts-header-h); }
.ts-drawer__nav { margin-top: 1.4rem; overflow-y: auto; }
.ts-drawer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.ts-drawer__nav a {
	display: flex; align-items: center; justify-content: space-between;
	font-family: var(--ts-font-display); font-size: clamp(1.5rem, 7vw, 2.1rem); font-weight: 700;
	letter-spacing: -.03em; padding: .55rem 0; border-bottom: 1px solid var(--ts-line);
	opacity: 0; transform: translateY(18px);
}
.ts-drawer.is-open .ts-drawer__nav a { animation: ts-rise .5s var(--ts-ease) forwards; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }
.ts-drawer__nav .sub-menu { padding-left: .8rem; }
.ts-drawer__nav .sub-menu a { font-size: 1.05rem; font-weight: 500; color: var(--ts-muted); border-bottom: 0; padding: .35rem 0; }
.ts-drawer__foot { margin-top: auto; padding-top: 1.4rem; display: grid; gap: .7rem; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.ts-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 9vw, 7.5rem) clamp(3rem, 8vw, 6rem); isolation: isolate; }
.ts-hero__bg { position: absolute; inset: -10% -5% 0; z-index: -2; }
.ts-hero__glow {
	position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
	animation: ts-float 16s ease-in-out infinite;
}
.ts-hero__glow--1 { width: 46vw; height: 46vw; left: -8vw; top: -12vw; background: radial-gradient(circle, var(--ts-green), transparent 65%); }
.ts-hero__glow--2 { width: 38vw; height: 38vw; right: -6vw; top: 6vw; background: radial-gradient(circle, var(--ts-sky), transparent 65%); animation-delay: -6s; }
.ts-hero__glow--3 { width: 26vw; height: 26vw; left: 36vw; bottom: -14vw; background: radial-gradient(circle, var(--ts-lime), transparent 68%); opacity: .3; animation-delay: -11s; }
.ts-hero__grid {
	position: absolute; inset: 0; z-index: -1; opacity: .25;
	background-image:
		linear-gradient(to right, var(--ts-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--ts-line) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}

.ts-hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.ts-hero__title { font-size: var(--ts-step-4); margin-bottom: .5em; }
.ts-hero__title .ts-line { display: block; overflow: hidden; }
.ts-hero__title .ts-line > span { display: block; transform: translateY(110%); animation: ts-rise-clip .9s var(--ts-ease) forwards; }
.ts-hero__title .ts-line:nth-child(2) > span { animation-delay: .12s; }
.ts-hero__title .ts-line:nth-child(3) > span { animation-delay: .24s; }
.ts-hero__text { color: var(--ts-muted); font-size: var(--ts-step-1); max-width: 46ch; }
.ts-hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.ts-hero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: clamp(2rem, 5vw, 3.4rem); }
.ts-hero__court { position: relative; }

/* ── Griglie ──────────────────────────────────────────────────────── */
.ts-grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
.ts-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ts-grid--3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
/* Elenchi (news, archivi, ricerca): sempre 3 colonne larghe come in home, anche con poche card. */
.ts-grid--list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.ts-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ts-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: center; }

.ts-sechead { max-width: 56ch; margin-bottom: clamp(1.6rem, 4vw, 2.8rem); }
.ts-sechead--center { margin-inline: auto; text-align: center; }
.ts-sechead__title { font-size: var(--ts-step-2); margin-bottom: .4em; }
.ts-sechead__text { color: var(--ts-muted); margin: 0; }
.ts-kicker {
	display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .9rem;
	font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--ts-accent-ink);
}
.ts-kicker::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .5; }

/* ── Footer ───────────────────────────────────────────────────────── */
.ts-footer { position: relative; margin-top: clamp(3rem, 8vw, 6rem); border-top: 1px solid var(--ts-line); background: color-mix(in srgb, var(--ts-bg-2) 82%, transparent); overflow: hidden; }
.ts-footer__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(2.5rem, 6vw, 4rem); }
.ts-footer h3, .ts-widget__title { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ts-muted); margin-bottom: 1rem; }
.ts-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ts-footer a { color: var(--ts-muted); transition: color .2s var(--ts-ease); }
.ts-footer a:hover { color: var(--ts-text); }
.ts-footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; border-top: 1px solid var(--ts-line); padding-block: 1.2rem; font-size: .82rem; color: var(--ts-muted); }
.ts-footer__net { position: absolute; inset: auto 0 -1px; width: 100%; max-width: none; height: 90px; opacity: .3; pointer-events: none; }

/* ── Profilo ──────────────────────────────────────────────────────── */
.ts-account { position: relative; }
.ts-account__btn {
	display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%;
	border: 1px solid var(--ts-line); background: transparent; color: var(--ts-text); cursor: pointer;
	transition: border-color .2s var(--ts-ease), background .2s var(--ts-ease), color .2s var(--ts-ease);
}
.ts-account__btn:hover { border-color: var(--ts-line-strong); background: var(--ts-elev); }
.ts-account__btn.is-in { background: var(--ts-lime); border-color: transparent; color: var(--ts-on-accent); }
.ts-account__menu {
	position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px; z-index: 5;
	display: grid; padding: .45rem; border-radius: 14px;
	background: var(--ts-surface); border: 1px solid var(--ts-line); box-shadow: var(--ts-shadow);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .2s var(--ts-ease), transform .2s var(--ts-ease), visibility .2s;
}
.ts-account::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.ts-account:hover .ts-account__menu, .ts-account:focus-within .ts-account__menu { opacity: 1; visibility: visible; transform: none; }
.ts-account__name { margin: 0; padding: .45rem .7rem .55rem; font-weight: 700; font-size: .9rem; color: var(--ts-text); border-bottom: 1px solid var(--ts-line); margin-bottom: .3rem; }
.ts-account__menu a { display: flex; align-items: center; gap: .45rem; padding: .5rem .7rem; border-radius: 9px; font-size: .9rem; color: var(--ts-muted); }
.ts-account__menu a:hover { background: var(--ts-elev); color: var(--ts-text); }
.ts-account__out { border-top: 1px solid var(--ts-line); margin-top: .3rem; border-radius: 0 0 9px 9px !important; }

/* ── Icone social ─────────────────────────────────────────────────── */
.ts-social { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.ts-social__link {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid var(--ts-line); color: var(--ts-text);
	transition: background .2s var(--ts-ease), color .2s var(--ts-ease), border-color .2s var(--ts-ease), transform .2s var(--ts-ease);
}
.ts-social__link:hover { background: var(--ts-lime); border-color: transparent; color: var(--ts-on-accent); transform: translateY(-2px); }
.ts-social__link.is-missing { opacity: .45; border-style: dashed; }
.ts-drawer__social { justify-content: flex-start; }

/* ── Footer centrato ──────────────────────────────────────────────── */
.ts-footer__center { display: grid; justify-items: center; gap: 1.2rem; text-align: center; padding-block: clamp(2.8rem, 6vw, 4.4rem) clamp(2rem, 4vw, 3rem); }
.ts-footer__brand .custom-logo { max-height: 110px; width: auto; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .4)); }
.ts-footer__tagline { margin: 0; color: var(--ts-muted); max-width: 52ch; }
.ts-footer .ts-footer__menu ul, .ts-footer .ts-footer__sub { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.ts-footer .ts-footer__menu a { color: var(--ts-text); font-family: var(--ts-font-display); font-weight: 700; font-size: .98rem; letter-spacing: -.01em; }
.ts-footer .ts-footer__menu a:hover, .ts-footer .ts-footer__sub a:hover { color: var(--ts-accent-ink); }
.ts-footer .ts-footer__sub { gap: .3rem 1.2rem; }
.ts-footer .ts-footer__sub a { font-size: .86rem; }
.ts-footer__contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; font-size: .92rem; }
.ts-footer__social { margin-top: .2rem; }
.ts-footer__widgets { width: 100%; max-width: 720px; }
.ts-footer .ts-footer__bottom { justify-content: center; text-align: center; }

/* ── Torna su ───────────────────────────────────────────────────── */
.ts-totop {
	position: fixed; right: clamp(14px, 2.4vw, 32px); bottom: clamp(14px, 2.4vw, 32px); z-index: 105;
	display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
	background: color-mix(in srgb, var(--ts-surface) 88%, transparent); color: var(--ts-text); cursor: pointer;
	box-shadow: var(--ts-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
	transition: opacity .3s var(--ts-ease), transform .3s var(--ts-ease), visibility .3s, background .2s var(--ts-ease), color .2s var(--ts-ease);
}
.ts-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.ts-totop:hover { background: var(--ts-lime); color: var(--ts-on-accent); }
.ts-totop__icon { transform: rotate(-90deg); transition: transform .25s var(--ts-ease); }
.ts-totop:hover .ts-totop__icon { transform: rotate(-90deg) translateX(3px); }
.ts-totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 2.5; }
.ts-totop__ring circle { stroke: var(--ts-line); }
.ts-totop__ring .ts-totop__bar { stroke: var(--ts-lime); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--ts-progress, 0) * 100); }
.ts-totop:hover .ts-totop__bar { stroke: var(--ts-on-accent); }

/* ── Barra mobile ─────────────────────────────────────────────────── */
.ts-mobilebar {
	position: fixed; inset: auto 0 0; z-index: 115; display: none;
	grid-auto-flow: column; grid-auto-columns: 1fr;
	background: color-mix(in srgb, var(--ts-bg) 94%, transparent);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--ts-line);
	padding-bottom: env(safe-area-inset-bottom);
}
.ts-mobilebar a {
	display: grid; justify-items: center; gap: .15rem;
	padding: .6rem .2rem .55rem; min-height: 58px;
	font-size: .66rem; letter-spacing: .02em; color: var(--ts-muted);
}
.ts-mobilebar a:active { color: var(--ts-accent-ink); }

/* ── Breakpoint ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.ts-hero__inner { grid-template-columns: 1fr; }
	.ts-hero__court { order: -1; max-width: 620px; }
	.ts-split { grid-template-columns: 1fr; }
}

@media (max-width: 1640px) {
	.ts-header__social { display: none; }
	.ts-nav a { padding: .5rem .6rem; font-size: .88rem; }
}

/* Se le voci non entrano ai lati del logo (lo misura app.js): menu a scomparsa */
.ts-header.is-compact .ts-nav { display: none; }
.ts-header.is-compact .ts-burger { display: grid; }
.ts-header.is-compact .ts-header__inner { display: flex; }
.ts-header.is-compact .ts-header__side--left { display: none; }
.ts-header.is-compact .ts-header__side--right { margin-left: auto; }
.ts-header.is-compact .ts-header__logo { align-self: center; padding-top: 0; margin-bottom: 0; }
.ts-header.is-compact .ts-header__logo .custom-logo { max-height: 52px; }

/* Sotto i 1180px il menu diviso non entra: logo a sinistra e menu a scomparsa */
@media (max-width: 1180px) {
	.ts-header .ts-nav { display: none; }
	.ts-header .ts-burger { display: grid; }
	.ts-header__inner { display: flex; }
	.ts-header__side--left { display: none; }
	.ts-header__side--right { margin-left: auto; }
	.ts-header__logo, .ts-header.is-stuck .ts-header__logo { align-self: center; padding-top: 0; margin-bottom: 0; }
	.ts-header__logo .custom-logo, .ts-header.is-stuck .ts-header__logo .custom-logo { max-height: 52px; }
}

@media (max-width: 860px) {
	.ts-nav { display: none; }
	.ts-header__logo .custom-logo, .ts-header.is-stuck .ts-header__logo .custom-logo { max-height: 48px; }
	.ts-burger { display: grid; }
	.ts-footer__inner { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 640px) {
	:root { --ts-header-h: 64px; }
	body { padding-bottom: 58px; }
	.ts-mobilebar { display: grid; }
	.ts-totop { bottom: calc(70px + env(safe-area-inset-bottom)); width: 46px; height: 46px; }
	.ts-hero__stats { grid-template-columns: repeat(2, 1fr); }
	.ts-hero { padding-block: 1.6rem 3rem; }
	.ts-hero__court { order: 0; margin-top: 1.4rem; }
	.ts-section { padding-block: 2.6rem; }
	.ts-footer__bottom { justify-content: center; text-align: center; }
}

/* Logo ufficiale (verticale): un po' più alto del vecchio marchio tondo. */
.ts-header__logo .ts-logo-svg { max-height: 118px; height: auto; }
.ts-header.is-stuck .ts-header__logo .ts-logo-svg, .ts-header.is-compact .ts-header__logo .ts-logo-svg { max-height: 60px; }
.ts-footer__brand .ts-logo-svg { max-height: 150px; height: auto; }
@media (max-width: 1180px) {
	.ts-header__logo .ts-logo-svg, .ts-header.is-stuck .ts-header__logo .ts-logo-svg { max-height: 56px; }
}
@media (max-width: 860px) {
	.ts-header__logo .ts-logo-svg, .ts-header.is-stuck .ts-header__logo .ts-logo-svg { max-height: 52px; }
}

.ts-logo--light { display: none; }
.ts-scheme-light .ts-logo--dark { display: none; }
.ts-scheme-light .ts-logo--light { display: inline-block; }
.ts-scheme-light .ts-logo-svg { filter: drop-shadow(0 8px 18px rgba(10, 19, 48, .12)); }

/* Telefono e tablet: l'header ha la stessa altezza da fermo e "appiccicato", così scorrendo
   la pagina non si sposta di qualche pixel (la riga sotto la foto di apertura non vibra). */
@media (max-width: 860px) {
	.ts-header, .ts-header.is-stuck { transition: background .3s var(--ts-ease), border-color .3s var(--ts-ease); }
	.ts-header .ts-header__inner, .ts-header.is-stuck .ts-header__inner { min-height: var(--ts-header-h); }
}

/* Menu su telefono: voci più vicine, icone social subito sotto le voci. */
.ts-drawer__nav { margin-top: .8rem; }
.ts-drawer__nav ul { gap: 0; }
.ts-drawer__nav a { padding: .32rem 0; }
.ts-drawer__foot { margin-top: 1.1rem; padding-top: 0; }
.ts-drawer__social .ts-social__link { width: 44px; height: 44px; }

/* Menu su telefono: icone social nella riga in alto, a destra del logo. */
.ts-drawer__top { gap: .8rem; }
.ts-drawer__top .ts-drawer__social { margin-right: auto; margin-left: .2rem; }
.ts-drawer__top .ts-social__link { width: 40px; height: 40px; }