/* ==========================================================================
   Hyrox Italia — fogli di stile
   Un solo file, letto dall'alto in basso: token, base, componenti, pagine.
   ========================================================================== */

:root{
	--ink:#15151b;
	--ink-soft:#4a4a56;
	--paper:#f7f4ec;
	--paper-2:#efe8d8;
	--card:#ffffff;
	--volt:#d7ff3f;
	--volt-ink:#22280a;
	--flame:#ff4a26;
	--flame-dark:#e13c1b;
	--line:rgba(21,21,27,.09);
	--shadow:0 18px 40px -18px rgba(21,21,27,.28);
	--shadow-sm:0 10px 24px -14px rgba(21,21,27,.22);
	--r-xl:36px;
	--r-lg:28px;
	--r-md:20px;
	--r-sm:14px;
	--r-pill:999px;
	--wrap:1200px;
	--font-display:'Unbounded', system-ui, sans-serif;
	--font-body:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:var(--font-body);
	font-size:17px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
button{font-family:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{
	display:inline-flex;align-items:center;gap:8px;
	background:var(--ink);color:var(--volt);
	font-family:var(--font-display);font-size:12.5px;font-weight:600;
	letter-spacing:.03em;padding:8px 18px;border-radius:var(--r-pill);
}
.eyebrow.light{background:var(--paper-2);color:var(--ink)}
.eyebrow.flame{background:var(--flame);color:#fff}

.btn{
	display:inline-flex;align-items:center;justify-content:center;gap:10px;
	font-family:var(--font-display);font-weight:600;font-size:15px;
	padding:16px 30px;border-radius:var(--r-pill);border:none;cursor:pointer;
	transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
	white-space:nowrap;
}
.btn-flame{background:var(--flame);color:#fff;box-shadow:var(--shadow-sm)}
.btn-flame:hover{background:var(--flame-dark);transform:translateY(-2px)}
.btn-volt{background:var(--volt);color:var(--volt-ink)}
.btn-volt:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{transform:translateY(-2px)}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
	position:sticky;top:0;z-index:50;
	padding:16px 0;
	background:rgba(247,244,236,.86);
	backdrop-filter:blur(14px);
	border-bottom:1px solid transparent;
}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{
	display:flex;align-items:center;gap:10px;
	font-family:var(--font-display);font-weight:800;font-size:19px;
}
.logo .dot{width:11px;height:11px;border-radius:50%;background:var(--flame)}
.nav-menu{display:flex;align-items:center;gap:6px}
.nav-menu li a{
	display:block;padding:10px 16px;border-radius:var(--r-pill);
	font-weight:600;font-size:15px;color:var(--ink-soft);
	transition:background-color .15s ease,color .15s ease;
}
.nav-menu li a:hover{background:var(--paper-2);color:var(--ink)}
.header-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{
	display:none;width:46px;height:46px;border-radius:50%;border:none;
	background:var(--ink);color:var(--paper);align-items:center;justify-content:center;
	cursor:pointer;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
	content:'';display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;
}
.nav-toggle span::before{position:absolute;top:-6px}
.nav-toggle span::after{position:absolute;top:6px}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;padding:64px 0 96px;overflow:hidden}
.hero-blob{
	position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;z-index:0;
}
.hero-blob.b1{width:520px;height:520px;background:var(--volt);top:-220px;right:-140px}
.hero-blob.b2{width:380px;height:380px;background:var(--flame);opacity:.18;bottom:-180px;left:-120px}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.5rem,4.6vw,4.3rem)}
.hero h1 em{font-style:normal;color:var(--flame)}
.hero-lead{font-size:19px;color:var(--ink-soft);max-width:46ch;margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px}
.hero-stats{display:flex;gap:28px;flex-wrap:wrap}
.hero-stats div strong{display:block;font-family:var(--font-display);font-size:26px}
.hero-stats div span{font-size:13.5px;color:var(--ink-soft)}

.hero-art{position:relative}
.hero-card{
	background:var(--ink);color:var(--paper);border-radius:var(--r-xl);
	padding:34px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.hero-card::after{
	content:'';position:absolute;inset:0;
	background:radial-gradient(120% 90% at 80% 0%, rgba(215,255,63,.22), transparent 60%);
}
.hero-card .tag{position:relative;font-family:var(--font-display);font-size:13px;color:var(--volt);margin-bottom:14px;display:block}
.hero-card h3{position:relative;font-size:26px;margin-bottom:6px}
.hero-card p{position:relative;color:rgba(247,244,236,.72);margin-bottom:22px}
.hero-card .row{position:relative;display:flex;justify-content:space-between;align-items:center;padding-top:18px;border-top:1px solid rgba(247,244,236,.16)}

/* ==========================================================================
   Sezioni generiche
   ========================================================================== */
section{padding:88px 0}
.section-head{max-width:680px;margin-bottom:48px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{font-size:clamp(1.9rem,3vw,2.7rem);margin-top:14px}
.section-head p{color:var(--ink-soft);font-size:17.5px}

.section-dark{background:var(--ink);color:var(--paper)}
.section-dark .section-head p{color:rgba(247,244,236,.68)}
.section-dark h2,.section-dark h3{color:var(--paper)}

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.card{
	background:var(--card);border-radius:var(--r-lg);padding:32px;
	box-shadow:var(--shadow-sm);
}
.card h3{font-size:21px;margin-bottom:10px}
.card p{color:var(--ink-soft);margin-bottom:0}
.card .icon{
	width:54px;height:54px;border-radius:var(--r-md);background:var(--paper-2);
	display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:24px;
}

.station-list{display:flex;flex-direction:column;gap:14px}
.station{
	display:flex;align-items:center;gap:20px;background:var(--card);
	border-radius:var(--r-lg);padding:18px 24px;box-shadow:var(--shadow-sm);
}
.station .num{
	flex:none;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--volt);
	display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:15px;
}
.station .txt strong{display:block;font-size:17px;margin-bottom:2px}
.station .txt span{color:var(--ink-soft);font-size:14.5px}
.station .dist{margin-left:auto;flex:none;font-family:var(--font-display);color:var(--flame);font-size:14px}

/* ==========================================================================
   Eventi
   ========================================================================== */
.eventi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.evento-card{
	background:var(--card);border-radius:var(--r-lg);padding:0;overflow:hidden;
	box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
	transition:transform .2s ease, box-shadow .2s ease;
}
.evento-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.evento-top{background:var(--ink);color:var(--paper);padding:26px 26px 22px;position:relative}
.evento-top .citta{font-family:var(--font-display);font-size:22px;margin-bottom:4px}
.evento-top .data{color:var(--volt);font-weight:600;font-size:14.5px}
.evento-body{padding:22px 26px 26px;display:flex;flex-direction:column;gap:14px;flex:1}
.evento-body .sede{color:var(--ink-soft);font-size:14.5px}
.stato-pill{
	align-self:flex-start;font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:var(--r-pill);
}
.stato-in-vendita{background:rgba(215,255,63,.35);color:#3a4409}
.stato-prossimamente{background:var(--paper-2);color:var(--ink-soft)}
.stato-esaurito{background:rgba(255,74,38,.14);color:var(--flame-dark)}
.stato-concluso{background:var(--line);color:var(--ink-soft)}
.evento-body .btn{margin-top:auto;align-self:flex-start}

.rss-callout{
	display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
	background:var(--paper-2);border-radius:var(--r-lg);padding:26px 32px;margin-top:16px;
}
.rss-callout .txt strong{display:block;font-family:var(--font-display);font-size:17px;margin-bottom:4px}
.rss-callout .txt span{color:var(--ink-soft);font-size:14.5px}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--ink);color:var(--paper);padding:72px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px}
.footer-grid h4{font-size:14px;color:var(--volt);margin-bottom:16px;font-family:var(--font-display)}
.footer-grid ul{display:flex;flex-direction:column;gap:10px}
.footer-grid a{color:rgba(247,244,236,.72);font-size:15px}
.footer-grid a:hover{color:var(--paper)}
.footer-brand p{color:rgba(247,244,236,.6);max-width:32ch;font-size:15px}
.footer-bottom{
	display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
	padding-top:26px;border-top:1px solid rgba(247,244,236,.14);
	font-size:13.5px;color:rgba(247,244,236,.55);
}

/* ==========================================================================
   Contatti / form
   ========================================================================== */
.contatti-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.form-card{background:var(--card);border-radius:var(--r-xl);padding:40px;box-shadow:var(--shadow-sm)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:14.5px;margin-bottom:7px}
.field input,.field select,.field textarea{
	width:100%;padding:14px 16px;border-radius:var(--r-md);border:1.5px solid var(--line);
	font-family:var(--font-body);font-size:15.5px;background:var(--paper);
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--flame)}
.field-check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink-soft)}
.field-check input{width:auto;margin-top:3px}
.honeypot{position:absolute;left:-9999px;top:-9999px}
.form-msg{margin-top:16px;padding:14px 18px;border-radius:var(--r-md);font-size:14.5px;display:none}
.form-msg.ok{display:block;background:rgba(215,255,63,.3);color:#3a4409}
.form-msg.err{display:block;background:rgba(255,74,38,.12);color:var(--flame-dark)}

.contatti-info .card{margin-bottom:16px}

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{background:var(--card);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.post-card .thumb{aspect-ratio:4/3;background:var(--paper-2) center/cover no-repeat}
.post-card .body{padding:24px}
.post-card .meta{font-size:13px;color:var(--ink-soft);margin-bottom:8px}
.post-card h3{font-size:19px;margin-bottom:8px}
.post-card p{color:var(--ink-soft);font-size:15px}

.single-post{max-width:760px;margin:0 auto}
.single-post .meta{color:var(--ink-soft);font-size:14.5px;margin-bottom:18px}
.single-post h1{font-size:clamp(2rem,4vw,3rem)}
.single-post .entry-content{font-size:18px}
.single-post .entry-content h2{margin-top:1.4em;font-size:1.5em}
.single-post .entry-content h3{margin-top:1.2em;font-size:1.2em}
.single-post .entry-content img{border-radius:var(--r-lg);margin:1.4em 0}
.single-post .entry-content a{color:var(--flame-dark);text-decoration:underline}
.single-post .entry-content ul,.single-post .entry-content ol{padding-left:1.3em;margin-bottom:1.2em}
.single-post .entry-content blockquote{
	border-left:4px solid var(--flame);margin:1.6em 0;padding:.4em 0 .4em 1.4em;
	font-style:italic;color:var(--ink-soft);
}

.pagination{display:flex;gap:10px;justify-content:center;margin-top:48px}
.pagination a,.pagination span{
	padding:10px 16px;border-radius:var(--r-pill);background:var(--card);
	box-shadow:var(--shadow-sm);font-weight:600;font-size:14.5px;
}
.pagination span.current{background:var(--ink);color:var(--paper)}

/* ==========================================================================
   Pagina interna generica (cosa e' hyrox, come allenarsi)
   ========================================================================== */
.page-hero{padding:56px 0 20px}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,3.6rem);max-width:16ch}
.page-hero .lead{font-size:18.5px;color:var(--ink-soft);max-width:60ch}

.split-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-row.reverse .split-media{order:2}
.media-block{
	border-radius:var(--r-xl);aspect-ratio:4/3;
	background:linear-gradient(135deg,var(--ink),#2a2a35);
	position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:28px;
	color:var(--paper);
}
.media-block.volt{background:linear-gradient(135deg,var(--volt),#eaff9c);color:var(--volt-ink)}
.media-block.flame{background:linear-gradient(135deg,var(--flame),#ff8a5c);color:#fff}
.media-block span{font-family:var(--font-display);font-size:14px;position:relative}

.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:22px 0}
.faq-item summary{cursor:pointer;font-family:var(--font-display);font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:22px;color:var(--flame);flex:none}
.faq-item[open] summary::after{content:'–'}
.faq-item p{margin-top:14px;color:var(--ink-soft)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:980px){
	.hero-grid,.split-row,.contatti-grid{grid-template-columns:1fr;gap:36px}
	.split-row.reverse .split-media{order:0}
	.bento{grid-template-columns:repeat(2,1fr)}
	.eventi-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
	.footer-grid{grid-template-columns:1fr 1fr}
	.nav-menu{display:none}
	.nav-toggle{display:flex}
	section{padding:64px 0}
}
@media (max-width:640px){
	.bento{grid-template-columns:1fr}
	.eventi-grid,.blog-grid{grid-template-columns:1fr}
	.footer-grid{grid-template-columns:1fr}
	.hero{padding:40px 0 64px}
	.hero-stats{gap:20px}
	.rss-callout{flex-direction:column;align-items:flex-start}
	body{font-size:16px}
}

/* Menu mobile a comparsa */
.nav-menu.is-open{
	display:flex;flex-direction:column;position:absolute;top:100%;left:16px;right:16px;
	background:var(--card);border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow);gap:2px;
}
.nav-menu.is-open li a{padding:14px 16px}