/* ═══════════════════════════════════════════════════════════════
   ASD Cobra Kai — foglio di stile
   Identita' "Giallo-Nera": nero profondo, giallo Cobra come accento,
   motivo a strisce diagonali (hazard) come firma grafica.
   Font: Bebas Neue (display) · Source Sans 3 (testi, variabile)
   ═══════════════════════════════════════════════════════════════ */

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/bebas-neue-400.woff2") format("woff2");
}
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-sans-3-var.woff2") format("woff2");
}

/* ═══ Design tokens ═══ */
:root {
	--bg:#0a0a0c;
	--bg-2:#0f0f13;
	--surface:#15151a;
	--surface-2:#1b1b22;
	--yellow:#ffdf00;
	--yellow-soft:#ffea3d;
	--text:#f2f2ee;
	--muted:#a2a2ab;
	--line:rgba(255,255,255,.09);
	--font-display:"Bebas Neue", "Arial Narrow", sans-serif;
	--font-body:"Source Sans 3", "Segoe UI", Tahoma, sans-serif;
	--stripe:repeating-linear-gradient(-45deg, var(--yellow) 0 10px, var(--bg) 10px 20px);
	--radius:14px;
	--shadow:0 18px 50px rgba(0,0,0,.55);
	--header-h:76px;
}

/* ═══ Reset essenziale ═══ */
* {margin:0; padding:0; box-sizing:border-box;}
html {scroll-behavior:smooth;}
body {
	font-family:var(--font-body);
	font-size:16px;
	line-height:1.6;
	color:var(--text);
	background:var(--bg);
	overflow-x:hidden;
}
img {max-width:100%; display:block;}
ul, ol {list-style:none;}
a {color:inherit; text-decoration:none;}
button {font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
table {border-collapse:collapse; width:100%;}

/* La scrittura araba e' legata: mai spaziare le lettere */
html[lang="ar"] * {letter-spacing:0 !important;}

::selection {background:var(--yellow); color:#000;}

.container {max-width:1200px; margin:0 auto; padding:0 24px;}

/* ═══ Bottoni ═══ */
.btn {
	display:inline-block;
	font-family:var(--font-display);
	font-size:20px;
	letter-spacing:.06em;
	line-height:1;
	padding:15px 34px 12px;
	border:2px solid var(--yellow);
	transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
	/* taglio diagonale sugli angoli: la firma del Cobra */
	clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.btn-yellow {background:var(--yellow); color:#000;}
.btn-yellow:hover {background:var(--yellow-soft); transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,223,0,.25);}
.btn-ghost {color:var(--yellow);}
.btn-ghost:hover {background:rgba(255,223,0,.12); transform:translateY(-2px);}

/* ═══ Topbar ═══ */
.topbar {background:var(--yellow); position:relative; z-index:60;}
.topbar-inner {
	max-width:1200px; margin:0 auto; padding:6px 24px;
	display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.slogan {
	font-family:var(--font-display);
	font-size:16px; letter-spacing:.08em;
	color:#000;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.slogan span {color:#fff; background:#000; padding:0 6px; margin:0 2px; border-radius:4px;}
.topbar-social {display:flex; gap:4px;}
.topbar-social a {
	color:#000; font-size:15px; width:28px; height:28px;
	display:flex; align-items:center; justify-content:center; border-radius:50%;
	transition:background .2s ease, color .2s ease;
}
.topbar-social a:hover {background:#000; color:var(--yellow);}

/* ═══ Header / navigazione ═══ */
#siteHeader {position:fixed; top:0; left:0; right:0; z-index:50;}
.navbar {
	background:rgba(10,10,12,.82);
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
	border-bottom:1px solid var(--line);
	transition:background .3s ease;
}
body.scrolled .navbar {background:rgba(10,10,12,.96); box-shadow:0 10px 30px rgba(0,0,0,.4);}
.navbar-inner {
	max-width:1200px; margin:0 auto; padding:0 24px;
	height:var(--header-h);
	display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand {display:flex; align-items:center; gap:12px; flex-shrink:0;}
.brand-logo {width:46px; height:auto; border-radius:8px; transition:transform .3s ease;}
.brand:hover .brand-logo {transform:rotate(-6deg) scale(1.06);}
.brand-name {font-family:var(--font-display); font-size:26px; letter-spacing:.05em; line-height:1;}
.brand-name strong {color:var(--yellow); font-weight:400;}

.main-nav > ul {display:flex; align-items:center; gap:2px;}
.main-nav > ul > li {position:relative;}
.main-nav > ul > li > a {
	display:flex; align-items:center; gap:5px;
	font-family:var(--font-display);
	font-size:18px; letter-spacing:.07em;
	padding:10px 13px;
	color:var(--text);
	transition:color .2s ease;
	position:relative;
}
.main-nav > ul > li > a::after {
	content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px;
	background:var(--yellow); transform:scaleX(0); transform-origin:left;
	transition:transform .25s ease;
}
.main-nav > ul > li > a:hover {color:var(--yellow);}
.main-nav > ul > li > a:hover::after, .main-nav > ul > li.open > a::after {transform:scaleX(1);}
.main-nav .icon-down-open {font-size:11px; opacity:.6;}

.sub-nav {
	position:absolute; top:100%; inset-inline-start:0; min-width:210px;
	background:var(--surface-2);
	border:1px solid var(--line);
	border-top:3px solid var(--yellow);
	box-shadow:var(--shadow);
	padding:8px 0;
	opacity:0; visibility:hidden; transform:translateY(12px);
	transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.main-nav li:hover > .sub-nav, .main-nav li.open > .sub-nav {opacity:1; visibility:visible; transform:translateY(0);}
/* I sottomenu costruiti dai dati possono essere lunghi (una voce per stagione:
   oggi sono 18). Si scorrono invece di sfondare la finestra. */
.sub-nav {max-height:min(70vh,520px); overflow-y:auto; overscroll-behavior:contain;}
.sub-nav::-webkit-scrollbar {width:6px;}
.sub-nav::-webkit-scrollbar-thumb {background:rgba(255,255,255,.18); border-radius:3px;}
.sub-nav a {
	display:block; padding:9px 18px;
	font-size:15px; font-weight:600; color:var(--muted);
	transition:color .15s ease, background .15s ease, padding-inline-start .15s ease;
}
.sub-nav a:hover {color:var(--yellow); background:rgba(255,223,0,.06); padding-inline-start:24px;}

.nav-toggle {display:none; flex-direction:column; gap:5px; padding:8px;}
.nav-toggle span {display:block; width:26px; height:2px; background:var(--text); transition:transform .3s ease, opacity .3s ease;}
body.menu-open .nav-toggle span:nth-child(1) {transform:translateY(7px) rotate(45deg);}
body.menu-open .nav-toggle span:nth-child(2) {opacity:0;}
body.menu-open .nav-toggle span:nth-child(3) {transform:translateY(-7px) rotate(-45deg);}

/* ═══ Menu mobile ═══ */
.mobile-menu {
	position:fixed; inset:0; z-index:40;
	background:rgba(10,10,12,.98);
	padding:130px 32px 40px;
	overflow-y:auto;
	opacity:0; visibility:hidden; transform:translateY(-14px);
	transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
body.menu-open .mobile-menu {opacity:1; visibility:visible; transform:translateY(0);}
.mobile-menu > nav > ul > li {border-bottom:1px solid var(--line);}
.mobile-menu > nav > ul > li > a {
	display:block; padding:14px 0;
	font-family:var(--font-display); font-size:26px; letter-spacing:.06em;
}
.mobile-menu > nav > ul > li > a:hover {color:var(--yellow);}
.mobile-menu ul ul {padding:0 0 12px 18px;}
.mobile-menu ul ul a {display:block; padding:6px 0; color:var(--muted); font-size:16px; font-weight:600;}
.mobile-menu ul ul a:hover {color:var(--yellow);}
.mobile-menu-social {display:flex; gap:10px; margin-top:28px;}
.mobile-menu-social a {
	width:44px; height:44px; border:1px solid var(--line); border-radius:50%;
	display:flex; align-items:center; justify-content:center; font-size:18px;
	transition:border-color .2s ease, color .2s ease;
}
.mobile-menu-social a:hover {border-color:var(--yellow); color:var(--yellow);}

/* ═══ Hero ═══ */
.hero {
	position:relative;
	min-height:92vh;
	display:flex; align-items:center;
	padding:calc(var(--header-h) + 90px) 0 140px;
	clip-path:polygon(0 0, 100% 0, 100% calc(100% - 70px), 0 100%);
}
.hero-bg {
	position:absolute; inset:0;
	background-size:cover; background-position:center 30%;
	filter:saturate(.9);
	animation:heroZoom 18s ease-out both;
}
@keyframes heroZoom {from {transform:scale(1.12);} to {transform:scale(1);}}
.hero-scrim {
	position:absolute; inset:0;
	background:
		linear-gradient(90deg, rgba(10,10,12,.94) 0%, rgba(10,10,12,.72) 45%, rgba(10,10,12,.25) 100%),
		linear-gradient(0deg, var(--bg) 0%, rgba(10,10,12,.1) 45%);
}
.hero-content {position:relative; max-width:1200px; margin:0 auto; padding:0 24px; width:100%;}
.hero-eyebrow {
	display:flex; align-items:center; gap:12px;
	font-family:var(--font-display); font-size:17px; letter-spacing:.22em;
	text-transform:uppercase; color:var(--yellow);
	margin-bottom:14px;
}
.stripe-chip {display:inline-block; width:52px; height:12px; background:var(--stripe);}
.hero-title {
	font-family:var(--font-display); font-weight:400;
	font-size:clamp(64px, 11vw, 148px);
	line-height:.88; letter-spacing:.015em;
	text-transform:uppercase;
}
.hero-title span {display:block;}
.hero-title .yellow {
	color:var(--yellow);
	text-shadow:0 10px 40px rgba(255,223,0,.25);
}
.hero-subtitle {margin:22px 0 30px; font-size:19px; color:#d6d6d2; max-width:520px; font-weight:400;}
.hero-cta {display:flex; gap:14px; flex-wrap:wrap;}

.next-match {
	position:absolute; bottom:110px; inset-inline-end:24px; z-index:5;
	width:340px;
	background:rgba(16,16,20,.86);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
	border:1px solid var(--line);
	border-top:4px solid var(--yellow);
	padding:18px 22px 20px;
	box-shadow:var(--shadow);
}
.next-match-label {font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow);}
.next-match-teams {font-family:var(--font-display); font-size:27px; letter-spacing:.03em; margin:8px 0 2px; line-height:1.1;}
.next-match-teams .vs {color:var(--yellow); font-size:18px; margin:0 6px;}
.next-match-info {font-size:13px; color:var(--muted);}
.countdown {display:flex; gap:10px; margin-top:14px;}
.countdown div {
	flex:1; text-align:center;
	background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
	padding:8px 2px 6px;
}
.countdown b {display:block; font-family:var(--font-display); font-size:26px; line-height:1; color:var(--yellow); font-weight:400;}
.countdown span {font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}

/* ═══ Ticker ═══ */
.ticker {
	background:var(--yellow);
	overflow:hidden;
	/* la rotazione allarga il RIQUADRO oltre lo schermo: senza max-width la home
	   scorre di lato sul telefono. La striscia resta storta, ma non sfonda. */
	max-width:100%;
	padding:10px 0;
	margin-top:-1px;
	transform:rotate(-1.2deg) scale(1.02);
	box-shadow:0 10px 40px rgba(255,223,0,.15);
}
.ticker-track {
	display:flex; align-items:center; gap:34px;
	width:max-content;
	animation:tickerScroll 26s linear infinite;
}
.ticker span {
	font-family:var(--font-display); font-size:21px; letter-spacing:.08em;
	color:#000; white-space:nowrap;
}
.ticker span b {color:var(--yellow); background:#000; padding:0 7px; margin:0 2px; border-radius:4px; font-weight:400;}
.ticker i {color:#000; font-size:15px;}
@keyframes tickerScroll {from {transform:translateX(0);} to {transform:translateX(-50%);}}
[dir="rtl"] .ticker-track {animation-name:tickerScrollRtl;}
@keyframes tickerScrollRtl {from {transform:translateX(0);} to {transform:translateX(50%);}}

/* ═══ Sezioni ═══ */
.section {padding:96px 0;}
.section-alt {background:var(--bg-2);}
.section-head {position:relative; margin-bottom:44px;}
.eyebrow {
	font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
	color:var(--yellow); margin-bottom:6px;
}
.section-head h2 {
	font-family:var(--font-display); font-weight:400;
	font-size:clamp(38px, 5vw, 56px);
	line-height:1; letter-spacing:.02em; text-transform:uppercase;
	padding-bottom:14px;
}
.section-head h2::after {content:""; display:block; width:64px; height:10px; background:var(--stripe); margin-top:12px;}
.section-link {
	position:absolute; inset-inline-end:0; bottom:16px;
	font-weight:700; font-size:15px; color:var(--yellow);
	display:flex; align-items:center; gap:4px;
	transition:gap .2s ease;
}
.section-link:hover {gap:9px;}
.section-link i {font-size:12px;}
[dir="rtl"] .section-link i {transform:scaleX(-1);}

/* ═══ Match center ═══ */
.match-grid {display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.match-card {
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:26px 30px;
	position:relative; overflow:hidden;
	transition:transform .25s ease, border-color .25s ease;
}
.match-card::before {content:""; position:absolute; top:0; inset-inline-start:0; width:100%; height:5px; background:var(--stripe); opacity:.85;}
.match-card:hover {transform:translateY(-4px); border-color:rgba(255,223,0,.35);}
.match-tag {font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px;}
.match-card.next .match-tag {color:var(--yellow);}
.match-row {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.match-team {font-family:var(--font-display); font-size:29px; letter-spacing:.02em; line-height:1.05;}
.match-team.cobra {color:var(--yellow);}
.match-score {
	font-family:var(--font-display); font-size:38px; line-height:1;
	background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
	padding:10px 16px 6px; white-space:nowrap;
}
.match-score.vs {color:var(--yellow); font-size:26px; padding:13px 18px 9px;}
.match-note {font-size:14px; color:var(--muted);}
.match-note i {color:var(--yellow); margin-inline-end:4px;}
.match-state {
	margin-top:10px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
	color:var(--muted);
}
.match-state.yellow {color:var(--yellow);}

/* ═══ News ═══ */
.news-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:26px;}
.news-card {
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	overflow:hidden;
	transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.news-card:hover {transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(255,223,0,.3);}
.news-card figure {position:relative; aspect-ratio:16/10; overflow:hidden;}
.news-card figure img {width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.news-card:hover figure img {transform:scale(1.07);}
.news-body {padding:20px 24px 24px;}
.news-body time {
	display:inline-block;
	font-size:12px; font-weight:800; letter-spacing:.1em;
	color:#000; background:var(--yellow);
	padding:3px 10px; border-radius:5px;
	margin-bottom:12px;
}
.news-body h3 {
	font-family:var(--font-display); font-weight:400;
	font-size:26px; line-height:1.08; letter-spacing:.02em;
	margin-bottom:8px;
	transition:color .2s ease;
}
.news-card:hover h3 {color:var(--yellow);}
.news-body p {font-size:14.5px; color:var(--muted); margin-bottom:14px;}
.news-more {font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--yellow);}
.news-more i {font-size:10px;}

/* ═══ Classifica + statistiche ═══ */
.standings-grid {display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:start;}
.standings-table {font-size:15px;}
.standings-table th {
	font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
	color:var(--muted); text-align:center; padding:10px 8px;
	border-bottom:2px solid var(--line);
}
.standings-table th.team {text-align:start;}
.standings-table td {padding:12px 8px; text-align:center; border-bottom:1px solid var(--line); font-weight:600;}
.standings-table td.team {text-align:start; font-weight:700;}
.standings-table td.pts {color:var(--yellow); font-weight:800; font-size:16px;}
.standings-table .pos {
	display:inline-flex; align-items:center; justify-content:center;
	width:26px; height:26px; border-radius:50%;
	font-size:13px; font-weight:800; color:var(--muted);
}
.standings-table .pos.first {background:var(--yellow); color:#000;}
.standings-table .cobra-row {background:rgba(255,223,0,.07);}
.standings-table .cobra-row td.team {color:var(--yellow);}
.standings-table .cobra-row td.team i {font-size:11px;}
.standings-legend {margin-top:14px; font-size:13px; color:var(--muted);}
.standings-legend .dot {display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--yellow); margin-inline-end:4px;}
.standings-legend a {color:var(--yellow); font-weight:700;}
.standings-legend a:hover {text-decoration:underline;}

.stats-box {
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:22px 26px;
	margin-bottom:22px;
}
.stats-box h3 {
	font-family:var(--font-display); font-weight:400;
	font-size:23px; letter-spacing:.04em;
	margin-bottom:16px;
}
.stats-box h3 i {color:var(--yellow); font-size:17px; margin-inline-end:4px;}
.stat-row {display:flex; align-items:center; gap:12px; padding:7px 0;}
.stat-rank {width:20px; font-size:12px; font-weight:800; color:var(--muted); text-align:center; flex-shrink:0;}
.stat-name {width:150px; font-size:14.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0;}
.stat-bar {flex:1; height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden;}
.stat-bar b {
	display:block; height:100%; width:0;
	background:linear-gradient(90deg, var(--yellow), var(--yellow-soft));
	border-radius:99px;
	transition:width 1s cubic-bezier(.2,.7,.3,1);
}
.stat-value {width:28px; text-align:end; font-family:var(--font-display); font-size:19px; color:var(--yellow); flex-shrink:0;}

/* ═══ Agenda ═══ */
.agenda {
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:26px 28px 22px;
}
.agenda-head {display:flex; align-items:center; justify-content:center; gap:22px; margin-bottom:20px;}
.agenda-head p {font-family:var(--font-display); font-size:30px; letter-spacing:.05em; min-width:230px; text-align:center;}
.agenda-nav {color:var(--muted); font-size:24px; transition:color .2s ease, transform .2s ease;}
.agenda-nav:hover {color:var(--yellow); transform:scale(1.15);}
.agenda-grid {display:grid; grid-template-columns:repeat(7, 1fr); gap:6px;}
.agenda-dayname {
	font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
	color:var(--muted); text-align:center; padding:6px 0;
}
.agenda-day {
	min-height:74px;
	background:var(--surface-2);
	border:1px solid transparent;
	border-radius:8px;
	padding:6px 8px;
	font-size:12px;
	transition:border-color .2s ease;
}
.agenda-day .num {font-weight:800; color:var(--muted); font-size:12px;}
.agenda-day.empty {background:transparent;}
.agenda-day.today {border-color:var(--yellow); box-shadow:0 0 0 1px var(--yellow) inset;}
.agenda-day.today .num {color:var(--yellow);}
.agenda-day.has-events:hover {border-color:rgba(255,223,0,.5); cursor:default;}
.agenda-event {
	display:flex; align-items:center; gap:4px;
	margin-top:4px;
	color:#d8d8d2; line-height:1.25; font-weight:600; font-size:11px;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.agenda-event i {color:var(--yellow); font-size:10px; flex-shrink:0;}
.agenda-legend {
	display:flex; flex-wrap:wrap; gap:18px; justify-content:center;
	margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
	font-size:12.5px; font-weight:600; color:var(--muted);
}
.agenda-legend i {color:var(--yellow); margin-inline-end:3px;}

/* ═══ Hall of Fame ═══ */
.hof-scroller {
	display:flex; gap:22px;
	overflow-x:auto;
	padding:6px max(24px, calc((100vw - 1200px) / 2 + 24px)) 22px;
	scroll-snap-type:x mandatory;
	scrollbar-width:thin;
	scrollbar-color:var(--yellow) var(--surface);
}
.hof-card {
	flex:0 0 210px; scroll-snap-align:start;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	overflow:hidden;
	position:relative;
	transition:transform .28s ease, border-color .28s ease;
}
.hof-card:hover {transform:translateY(-6px); border-color:rgba(255,223,0,.4);}
.hof-rank {
	position:absolute; top:10px; inset-inline-start:12px; z-index:2;
	font-family:var(--font-display); font-size:34px; line-height:1;
	color:var(--yellow);
	text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.hof-card figure {aspect-ratio:5/6; overflow:hidden;}
.hof-card figure img {
	width:100%; height:100%; object-fit:cover;
	filter:grayscale(1) contrast(1.05);
	transition:filter .4s ease, transform .4s ease;
}
.hof-card:hover figure img {filter:grayscale(0); transform:scale(1.05);}
.hof-body {padding:14px 16px 16px; border-top:3px solid var(--yellow);}
.hof-body h3 {font-family:var(--font-display); font-weight:400; font-size:21px; letter-spacing:.03em; line-height:1.05;}
.hof-body p {font-size:13px; color:var(--muted); margin-top:3px;}
.hof-body p i {color:var(--yellow); font-size:11px;}

/* I tre numeri della figurina (stagioni, presenze, gol) piu' il punteggio: le
   etichette ci sono perche' senza, tre numeri in fila non dicono nulla. */
.hof-stats {display:flex; gap:6px; margin-top:10px; list-style:none;}
.hof-stats li {flex:1; text-align:center; background:rgba(255,255,255,.04); border-radius:8px; padding:6px 2px;}
.hof-stats b {display:block; font-family:var(--font-display); font-weight:400; font-size:19px; color:var(--yellow); line-height:1;}
.hof-stats span {display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-top:3px;}
.hof-points {font-size:13px; color:var(--muted); margin-top:9px; text-align:center;}
.hof-points i {color:var(--yellow); font-size:11px;}
.hof-card figure.no-photo {display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.04);}
.hof-card figure.no-photo i {font-size:52px; color:rgba(255,255,255,.15);}

/* Sotto il titolo del riquadro: a quale periodo si riferiscono i numeri */
.stats-scope {font-size:11.5px; color:var(--muted); margin:-6px 0 12px; letter-spacing:.02em;}

/* ═══ Gallery ═══ */
.gallery-grid {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-auto-rows:180px;
	gap:14px;
}
.gallery-item {border-radius:10px; overflow:hidden; position:relative;}
.gallery-item::after {
	content:"+";
	position:absolute; inset:0;
	display:flex; align-items:center; justify-content:center;
	font-family:var(--font-display); font-size:44px; color:var(--yellow);
	background:rgba(10,10,12,.55);
	opacity:0; transition:opacity .25s ease;
}
.gallery-item:hover::after {opacity:1;}
.gallery-item img {width:100%; height:100%; object-fit:cover; transition:transform .45s ease;}
.gallery-item:hover img {transform:scale(1.08);}
.gallery-item:nth-child(1) {grid-column:span 2; grid-row:span 2;}
.gallery-item:nth-child(4) {grid-row:span 2;}

/* ═══ Footer ═══ */
#siteFooter {background:#070709; margin-top:40px;}
.footer-stripe {height:12px; background:var(--stripe);}
.footer-inner {
	max-width:1200px; margin:0 auto; padding:64px 24px 40px;
	display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr .8fr; gap:38px;
}
.footer-brand {display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.footer-brand img {width:52px; border-radius:8px;}
.footer-brand span {font-family:var(--font-display); font-size:24px; letter-spacing:.05em;}
.footer-brand strong {color:var(--yellow); font-weight:400;}
.footer-about p {font-size:14px; color:var(--muted); max-width:320px;}
.footer-hashtag {
	margin-top:14px !important;
	font-family:var(--font-display); font-size:16px !important; letter-spacing:.06em;
	color:var(--yellow) !important;
}
.footer-hashtag span {color:#000; background:var(--yellow); padding:0 5px; border-radius:3px;}
.footer-col h4 {
	font-family:var(--font-display); font-weight:400;
	font-size:19px; letter-spacing:.08em; text-transform:uppercase;
	color:var(--yellow);
	margin-bottom:14px;
}
.footer-col ul li {margin-bottom:8px;}
.footer-col ul a {font-size:14px; color:var(--muted); transition:color .2s ease, padding-inline-start .2s ease;}
.footer-col ul a:hover {color:var(--yellow); padding-inline-start:5px;}
.footer-social {display:flex; flex-wrap:wrap; gap:8px;}
.footer-social a {
	width:40px; height:40px;
	border:1px solid var(--line); border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	font-size:16px; color:var(--muted);
	transition:all .2s ease;
}
.footer-social a:hover {border-color:var(--yellow); color:#000; background:var(--yellow); transform:translateY(-3px);}
.footer-bottom {
	border-top:1px solid var(--line);
	max-width:1200px; margin:0 auto; padding:20px 24px;
	display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
	font-size:13px; color:var(--muted);
}
.footer-bottom a {color:var(--muted);}
.footer-bottom a:hover {color:var(--yellow);}

/* ═══ Animazioni di ingresso ═══ */
.reveal {opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in {opacity:1; transform:translateY(0);}
.reveal-line {
	display:block;
	clip-path:inset(0 100% 0 0);
	transition:clip-path .9s cubic-bezier(.2,.7,.2,1);
}
[dir="rtl"] .reveal-line {clip-path:inset(0 0 0 100%);}
.reveal-line.in {clip-path:inset(0 0 0 0);}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {animation:none !important; transition:none !important;}
	.reveal, .reveal-line {opacity:1; transform:none; clip-path:none;}
	html {scroll-behavior:auto;}
}

/* ═══ Responsive ═══ */
@media (max-width: 1120px) {
	.main-nav > ul > li > a {font-size:16px; padding:10px 9px;}
	.standings-grid {grid-template-columns:1fr; gap:56px;}
	.next-match {position:relative; bottom:auto; inset-inline-end:auto; width:auto; max-width:520px; margin:44px 24px 0;}
	.hero {clip-path:polygon(0 0, 100% 0, 100% calc(100% - 36px), 0 100%); padding-bottom:90px; display:block;}
	.hero-content {padding-top:40px;}
}
@media (max-width: 900px) {
	.main-nav {display:none;}
	.nav-toggle {display:flex;}
	.match-grid {grid-template-columns:1fr;}
	.news-grid {grid-template-columns:1fr; max-width:520px; margin:0 auto;}
	.gallery-grid {grid-template-columns:repeat(2, 1fr); grid-auto-rows:150px;}
	.footer-inner {grid-template-columns:1fr 1fr; gap:32px;}
	.section {padding:70px 0;}
	.topbar-inner {justify-content:center;}
	.topbar-social {display:none;}
}
@media (max-width: 640px) {
	.hero-title {font-size:clamp(56px, 17vw, 84px);}
	.hero-subtitle {font-size:17px;}
	.agenda {padding:18px 12px 16px;}
	.agenda-day {min-height:56px; padding:4px 5px;}
	.agenda-event {display:none;}
	.agenda-day .dots {display:flex; gap:3px; margin-top:4px; flex-wrap:wrap;}
	.agenda-day .dots i {color:var(--yellow); font-size:9px;}
	.agenda-head p {font-size:24px; min-width:170px;}
	.stat-name {width:110px;}
	.footer-inner {grid-template-columns:1fr;}
	.footer-bottom {justify-content:center; text-align:center;}
	.section-link {position:static; margin-top:10px;}
	.gallery-grid {grid-auto-rows:130px;}
}
@media (min-width: 641px) {
	.agenda-day .dots {display:none;}
}

/* Dati "tecnici" isolati dal bidi nei contesti RTL */
[dir="rtl"] time, [dir="rtl"] .match-score, [dir="rtl"] .countdown b {direction:ltr; unicode-bidi:isolate;}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINE INTERNE
   Riusano il linguaggio della home (container, eyebrow, news-card, btn): qui
   c'e' solo cio' che la home non aveva. Tutto in proprieta' logiche, cosi' il
   layout RTL non ha bisogno di eccezioni.
   ═══════════════════════════════════════════════════════════════════════════ */

/* L'header e' fisso: le pagine interne devono partire sotto, come fa l'hero
   della home (che usa la stessa variabile). */
main {overflow-x:hidden;}   /* nessuna pagina deve scorrere di lato (v. ticker ruotato) */
.page {padding:calc(var(--header-h) + 46px) 0 96px;}

.page-head {margin-bottom:28px;}
.page-head h1 {font-family:var(--font-display); font-weight:400; font-size:clamp(38px,6vw,64px); line-height:.95; letter-spacing:.01em;}
.page-head h1::after {content:""; display:block; width:74px; height:12px; background:var(--stripe); margin-top:14px;}
.page-sub {color:var(--muted); margin-top:14px; max-width:62ch; line-height:1.6;}

/* La briciola di pane: dove sono e come torno indietro */
.crumbs {font-size:12.5px; color:var(--muted); margin-bottom:22px; letter-spacing:.03em;}
.crumbs a {color:var(--muted);}
.crumbs a:hover {color:var(--yellow);}
.crumbs i {font-size:9px; margin:0 4px; opacity:.5;}

/* Le categorie come chip: una riga che scorre sugli schermi stretti */
.chips {display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px;}
.chip {
	display:inline-block; padding:7px 14px; border-radius:999px;
	border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03);
	font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
	transition:all .2s;
}
.chip:hover {border-color:rgba(255,223,0,.5); color:var(--fg);}
.chip.on {background:var(--yellow); border-color:var(--yellow); color:#0a0a0c; font-weight:600;}

.results {font-size:12.5px; color:var(--muted); margin-bottom:16px; letter-spacing:.03em;}
.empty {color:var(--muted); padding:40px 0; text-align:center;}

/* Paginazione */
.pager {display:flex; align-items:center; justify-content:center; gap:16px; margin-top:44px; flex-wrap:wrap;}
.pager span {font-size:13px; color:var(--muted); letter-spacing:.03em;}

/* ── L'ARTICOLO ── */
.article {max-width:860px;}
.article-head {margin-bottom:26px;}
.article-meta {display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.article-meta time {font-size:12.5px; color:var(--muted); letter-spacing:.04em;}
.article-head h1 {font-family:var(--font-display); font-weight:400; font-size:clamp(32px,5.2vw,54px); line-height:1; letter-spacing:.01em;}
.article-sub {margin-top:14px; font-size:19px; line-height:1.5; color:var(--muted);}

.article-cover {margin:0 0 32px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08);}
.article-cover img {width:100%; display:block;}

/* Il corpo arriva dall'editor del pannello: si veste qui, e si tiene a bada
   (immagini e iframe che sfondano il contenitore, tabelle che allargano). */
.article-body {font-size:17px; line-height:1.75;}
.article-body p {margin-bottom:1.15em;}
.article-body a {color:var(--yellow); text-decoration:underline;}
.article-body h2, .article-body h3 {font-family:var(--font-display); font-weight:400; letter-spacing:.02em; margin:1.6em 0 .5em; line-height:1.1;}
.article-body h2 {font-size:30px;}
.article-body h3 {font-size:24px;}
.article-body ul, .article-body ol {margin:0 0 1.15em; padding-inline-start:1.4em;}
.article-body li {margin-bottom:.35em;}
.article-body img, .article-body iframe, .article-body video {max-width:100%; height:auto; border-radius:10px; margin:.6em 0;}
.article-body blockquote {
	margin:1.4em 0; padding:2px 0 2px 18px;
	border-inline-start:4px solid var(--yellow); color:var(--muted); font-style:italic;
}
.article-body table {width:100%; border-collapse:collapse; margin-bottom:1.15em; display:block; overflow-x:auto;}
.article-body td, .article-body th {border:1px solid rgba(255,255,255,.12); padding:8px 10px; text-align:start;}

.article-galleryTitle {font-family:var(--font-display); font-weight:400; font-size:28px; letter-spacing:.02em; margin:44px 0 18px;}

/* Precedente / successivo */
.article-nav {display:flex; gap:14px; margin-top:52px; flex-wrap:wrap;}
.article-nav a {
	flex:1 1 240px; padding:16px 18px; border-radius:12px;
	border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); transition:all .2s;
}
.article-nav a:hover {border-color:rgba(255,223,0,.45); background:rgba(255,255,255,.05);}
.article-nav span {display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);}
.article-nav b {display:block; margin-top:5px; font-weight:600; font-size:15px; line-height:1.3;}
.article-nav .next {text-align:end;}
.article-back {margin-top:34px; text-align:center;}

@media (max-width:640px) {
	/* Sul telefono sopra l'header c'e' anche la striscia dello slogan: la parte
	   fissa misura ~115px, non i 76 di --header-h. Con soli 26px di aria l'occhiello
	   della pagina finiva NASCOSTO sotto l'header — su tutte le pagine interne. */
	.page {padding:calc(var(--header-h) + 54px) 0 64px;}
	.article-body {font-size:16px;}
	.article-nav .next {text-align:start;}
}

/* La pagina 404 */
.notFound {text-align:center; padding:40px 0 56px;}
.notFound-code {font-family:var(--font-display); font-size:clamp(90px,18vw,190px); line-height:.85; color:var(--yellow); letter-spacing:.02em;}
.notFound h1 {font-family:var(--font-display); font-weight:400; font-size:clamp(30px,5vw,52px); line-height:1; margin-top:6px;}
.notFound .page-sub {margin:16px auto 0;}
.notFound-cta {display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px;}

/* ── LA ROSA (e vecchie glorie, ex, hall of fame) ── */

.roster-group {margin-bottom:52px;}
.roster-role {
	font-family:var(--font-display); font-weight:400; font-size:26px; letter-spacing:.05em;
	text-transform:uppercase; margin-bottom:18px; display:flex; align-items:center; gap:12px;
}
.roster-role::after {content:""; flex:1; height:1px; background:var(--line);}

.roster-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:18px;}

.player-card {
	position:relative; background:var(--surface); border:1px solid var(--line);
	border-radius:14px; overflow:hidden; transition:transform .25s ease, border-color .25s ease;
}
.player-card:hover {transform:translateY(-5px); border-color:rgba(255,223,0,.4);}
.player-card figure {aspect-ratio:5/6; overflow:hidden; background:rgba(255,255,255,.04);}
.player-card figure img {width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .3s ease, transform .4s ease;}
.player-card:hover figure img {filter:grayscale(0); transform:scale(1.04);}
.player-card figure.no-photo {display:flex; align-items:center; justify-content:center;}
.player-card figure.no-photo i {font-size:56px; color:rgba(255,255,255,.15);}

/* Il numero di maglia: sta sulla foto, come su una figurina */
.player-number {
	position:absolute; top:10px; inset-inline-start:10px;
	min-width:34px; height:34px; padding:0 7px; border-radius:8px;
	background:var(--yellow); color:#0a0a0c;
	font-family:var(--font-display); font-size:20px; line-height:34px; text-align:center;
}

.player-body {padding:13px 15px 16px; border-top:3px solid var(--yellow);}
.player-body h3 {font-family:var(--font-display); font-weight:400; font-size:19px; line-height:1.05; letter-spacing:.03em;}
.player-body h3 b {display:block; font-weight:400; color:var(--yellow);}
.player-role {font-size:12.5px; color:var(--muted); margin-top:4px;}
.player-born {font-size:11.5px; color:var(--muted); opacity:.75; margin-top:3px;}
.player-social {display:flex; gap:10px; margin-top:10px;}
.player-social a {color:var(--muted); font-size:15px; transition:color .2s;}
.player-social a:hover {color:var(--yellow);}
.player-card .hof-stats {margin-top:11px;}
.player-card .hof-points {margin-top:8px; font-size:12px;}

@media (max-width:520px) {
	.roster-grid {grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
	.player-body {padding:11px 12px 13px;}
}

/* ── CALENDARIO E CLASSIFICA ── */

/* L'archivio: una scheda per stagione */
.season-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
.season-card {
	display:flex; align-items:center; gap:10px; padding:18px 18px;
	background:var(--surface); border:1px solid var(--line); border-radius:12px;
	transition:transform .2s ease, border-color .2s ease;
}
.season-card:hover {transform:translateY(-3px); border-color:rgba(255,223,0,.45);}
.season-card b {font-family:var(--font-display); font-weight:400; font-size:26px; letter-spacing:.02em; color:var(--yellow); line-height:1;}
.season-card span {flex:1; font-size:12.5px; color:var(--muted);}
.season-card i {font-size:12px; color:var(--muted);}

/* Le giornate: colonne che si adattano, ogni turno una scheda */
.rounds {columns:2; column-gap:18px;}
.round {break-inside:avoid; margin-bottom:18px; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.round h2 {
	font-family:var(--font-display); font-weight:400; font-size:19px; letter-spacing:.05em;
	padding:11px 16px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--line);
	display:flex; align-items:baseline; gap:9px;
}
.round h2 span {font-family:var(--font-body); font-size:12px; color:var(--muted); letter-spacing:.02em;}
.round ul {list-style:none;}
.round li.match {
	display:grid; grid-template-columns:1fr 76px 1fr; align-items:center; gap:8px;
	padding:9px 14px; border-bottom:1px solid rgba(255,255,255,.05); font-size:13.5px;
}
.round li.match:last-child {border-bottom:0;}
.round li.match.cobra {background:rgba(255,223,0,.05);}
.round li.match .t {color:var(--muted); line-height:1.25;}
.round li.match .t.away {text-align:end;}
.round li.match .t.mine {color:var(--fg); font-weight:600;}
.round li.match .score {
	text-align:center; font-family:var(--font-display); font-size:17px; letter-spacing:.04em;
	background:rgba(255,255,255,.06); border-radius:6px; padding:3px 0;
}
.round li.match .score.todo {font-family:var(--font-body); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); background:transparent;}
.round li.match .scorers {grid-column:1/-1; font-size:11.5px; color:var(--muted); margin-top:2px;}
.round li.match .scorers i {color:var(--yellow); font-size:10px;}

/* La classifica completa: su schermi stretti scorre invece di stringersi */
.table-wrap {overflow-x:auto;}
.standings-table.full {min-width:640px;}

/* Colonne di contorno (gol fatti/subiti): sul telefono si tolgono, cosi' la
   classifica ci sta senza doverla trascinare di lato. La classe era gia' nel
   markup della classifica ma nessuno l'aveva mai definita. */
@media (max-width:640px) {
	.hide-s {display:none;}
	/* le etichette delle figurine: 9.5px su uno schermo da mano sono illeggibili */
	.hof-stats span {font-size:11px; letter-spacing:.04em;}
}
/* Sotto i 520px resta l'essenziale: posizione, squadra, punti, giocate, DR. */
@media (max-width:520px) {
	.hide-xs {display:none;}
	.standings-table {font-size:14px;}
	.standings-table td, .standings-table th {padding-inline:5px;}
	/* con cinque colonne il min-width da desktop non ha piu' senso, e sarebbe
	   l'unica ragione per cui la classifica va ancora trascinata di lato */
	.standings-table.full {min-width:0;}
}

@media (max-width:900px) {
	.rounds {columns:1;}
}

/* ── CONVOCAZIONI ── */

.callup-list {display:flex; flex-direction:column; gap:10px;}
.callup {
	display:grid; grid-template-columns:96px 1fr auto 16px; align-items:center; gap:14px;
	padding:14px 18px; background:var(--surface); border:1px solid var(--line); border-radius:12px;
	transition:transform .2s ease, border-color .2s ease;
}
.callup:hover {transform:translateX(3px); border-color:rgba(255,223,0,.45);}
.callup .when {font-family:var(--font-display); font-size:17px; color:var(--yellow); letter-spacing:.03em;}
.callup .what b {display:block; font-weight:600; font-size:15.5px; line-height:1.25;}
.callup .what i {display:block; font-style:normal; font-size:12.5px; color:var(--muted); margin-top:2px;}
.callup .how-many {font-size:12px; color:var(--muted); white-space:nowrap;}
.callup > i {font-size:12px; color:var(--muted);}

/* Il tabellino della partita, in cima alla convocazione */
.callup-match {
	display:grid; grid-template-columns:1fr 100px 1fr; align-items:center; gap:12px;
	padding:16px 18px; margin-bottom:28px;
	background:var(--surface); border:1px solid var(--line); border-radius:12px;
}
.callup-match .t {color:var(--muted); font-size:15px;}
.callup-match .t:last-child {text-align:end;}
.callup-match .t.mine {color:var(--fg); font-weight:600;}
.callup-match .score {
	text-align:center; font-family:var(--font-display); font-size:22px; letter-spacing:.04em;
	background:rgba(255,255,255,.06); border-radius:8px; padding:5px 0;
}
.callup-match .score.todo {font-family:var(--font-body); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); background:transparent;}

/* I convocati: la distinta */
.called-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:12px;}
.called {text-align:center;}
.called img, .called .no-photo {
	width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px;
	background:rgba(255,255,255,.04); filter:grayscale(1); transition:filter .25s ease;
}
.called:hover img {filter:grayscale(0);}
.called .no-photo {display:flex; align-items:center; justify-content:center;}
.called .no-photo i {font-size:32px; color:rgba(255,255,255,.15);}
.called b {display:block; margin-top:7px; font-size:13.5px; font-weight:600; line-height:1.2;}
.called b .n {
	display:inline-block; font-style:normal; min-width:19px; margin-inline-end:5px; padding:0 4px;
	background:var(--yellow); color:#0a0a0c; border-radius:5px; font-size:11.5px; text-align:center;
}
.called span {display:block; font-size:11.5px; color:var(--muted);}
.muted {color:var(--muted); font-weight:400;}

@media (max-width:640px) {
	.callup {grid-template-columns:74px 1fr 16px; gap:10px; padding:12px 14px;}
	.callup .how-many {display:none;}
	.called-grid {grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:9px;}
}

/* ── GALLERY ── */

.album-list {display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:18px;}
.album-card {
	background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
	transition:transform .25s ease, border-color .25s ease;
}
.album-card:hover {transform:translateY(-5px); border-color:rgba(255,223,0,.45);}
.album-card figure {aspect-ratio:4/3; overflow:hidden; background:rgba(255,255,255,.04);}
.album-card figure img {width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.album-card:hover figure img {transform:scale(1.05);}
.album-card figure.no-photo {display:flex; align-items:center; justify-content:center;}
.album-card figure.no-photo i {font-size:44px; color:rgba(255,255,255,.15);}
.album-body {padding:14px 16px 16px; border-top:3px solid var(--yellow);}
.album-body time {font-size:11.5px; color:var(--muted); letter-spacing:.04em;}
.album-body h3 {font-family:var(--font-display); font-weight:400; font-size:20px; line-height:1.1; letter-spacing:.02em; margin-top:5px;}
.album-count {display:inline-block; margin-top:8px; font-size:12px; color:var(--muted);}
.album-count i {color:var(--yellow); font-size:11px; margin-inline-end:3px;}

.album-intro {margin-bottom:28px;}

/* Gli scatti dell'album */
.album-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px;}
.album-photo {position:relative; display:block; border-radius:10px; overflow:hidden; background:rgba(255,255,255,.04);}
.album-photo img {width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .35s ease, filter .35s ease;}
.album-photo:hover img {transform:scale(1.06);}
.album-photo span {
	position:absolute; inset-inline:0; bottom:0; padding:16px 10px 8px;
	background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
	font-size:11.5px; line-height:1.3; color:#fff;
	opacity:0; transition:opacity .25s ease;
}
.album-photo:hover span {opacity:1;}

/* Il visore a tutto schermo */
body.noscroll {overflow:hidden;}
.lightbox {
	position:fixed; inset:0; z-index:200; display:none;
	align-items:center; justify-content:center;
	background:rgba(6,6,8,.95); padding:56px 64px;
}
.lightbox.on {display:flex;}
.lightbox figure {max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:12px;}
.lightbox img {max-width:100%; max-height:78vh; object-fit:contain; border-radius:6px;}
.lightbox figcaption {font-size:13.5px; color:var(--muted); text-align:center; max-width:70ch;}
.lb-close, .lb-nav {
	position:absolute; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
	color:#fff; width:44px; height:44px; border-radius:50%; cursor:pointer;
	display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s;
}
.lb-close:hover, .lb-nav:hover {background:rgba(255,223,0,.18); border-color:var(--yellow);}
.lb-close {top:18px; inset-inline-end:18px;}
.lb-nav.prev {inset-inline-start:16px;}
.lb-nav.next {inset-inline-end:16px;}
.lb-count {position:absolute; bottom:18px; inset-inline:0; text-align:center; font-size:12.5px; color:var(--muted); letter-spacing:.06em;}

@media (max-width:640px) {
	.album-grid {grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px;}
	.album-photo span {opacity:1; font-size:10.5px; padding:12px 7px 6px;}
	.lightbox {padding:56px 12px;}
	.lb-nav {width:38px; height:38px;}
}

/* ── COBRASOC ── */

.cobrasoc-intro {
	max-width:74ch; margin:0 0 34px; padding:20px 22px;
	background:var(--surface); border:1px solid var(--line); border-inline-start:4px solid var(--yellow);
	border-radius:12px; color:var(--muted); line-height:1.7; font-size:16px;
}

.initiative {margin-bottom:52px; padding-bottom:44px; border-bottom:1px solid var(--line);}
.initiative:last-of-type {border-bottom:0;}
.initiative header {margin-bottom:16px;}
.initiative time {font-size:12px; color:var(--muted); letter-spacing:.05em;}
.initiative h2 {font-family:var(--font-display); font-weight:400; font-size:clamp(26px,3.6vw,36px); line-height:1.05; letter-spacing:.02em; margin-top:5px;}
.initiative .article-body {margin-bottom:20px;}

/* ── APPUNTAMENTI ── */

.events-group {margin-bottom:44px;}
.events {display:flex; flex-direction:column; gap:10px;}
.event {
	display:grid; grid-template-columns:66px 1fr 16px; align-items:center; gap:16px;
	padding:14px 18px; background:var(--surface); border:1px solid var(--line); border-radius:12px;
	transition:transform .2s ease, border-color .2s ease;
}
.event:hover {transform:translateX(3px); border-color:rgba(255,223,0,.45);}
.event.soon {border-color:rgba(255,223,0,.35); background:rgba(255,223,0,.04);}
.event .date {text-align:center; line-height:1;}
.event .date b {display:block; font-family:var(--font-display); font-size:30px; color:var(--yellow);}
.event .date i {display:block; font-style:normal; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; margin-top:2px;}
.event .date u {display:block; text-decoration:none; font-size:10.5px; color:var(--muted); margin-top:2px;}
.event .what b {display:block; font-weight:600; font-size:16px; line-height:1.25;}
.event .what i {display:block; font-style:normal; font-size:13px; color:var(--yellow); margin-top:2px;}
.event .what em {display:block; font-style:normal; font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.45;}
.event > i {font-size:12px; color:var(--muted);}

@media (max-width:640px) {
	.event {grid-template-columns:54px 1fr 14px; gap:12px; padding:12px 14px;}
	.event .date b {font-size:24px;}
	.cobrasoc-intro {padding:16px 16px; font-size:15px;}
}

/* ── CONTATTI ── */

.contact-cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-bottom:52px;}
.contact-card {padding:20px 22px; background:var(--surface); border:1px solid var(--line); border-radius:12px;}
.contact-card h2 {font-family:var(--font-display); font-weight:400; font-size:20px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:12px;}
.contact-card ul {list-style:none; display:flex; flex-direction:column; gap:9px;}
.contact-card li {font-size:14.5px; color:var(--muted); display:flex; align-items:baseline; gap:8px;}
.contact-card li i {color:var(--yellow); font-size:13px;}
.contact-card a {color:var(--fg);}
.contact-card a:hover {color:var(--yellow);}
.contact-social {display:flex; gap:14px;}
.contact-social a {font-size:20px; color:var(--muted); transition:color .2s;}
.contact-social a:hover {color:var(--yellow);}

.pitch {margin-bottom:44px;}
.pitch-body {display:grid; grid-template-columns:minmax(240px,1fr) 2fr; gap:20px; align-items:start;}
.pitch-name {font-family:var(--font-display); font-weight:400; font-size:22px; letter-spacing:.02em; line-height:1.15;}
.pitch-address {margin-top:8px; font-size:14px; color:var(--muted); line-height:1.5;}
.pitch-address i {color:var(--yellow); font-size:12px; margin-inline-end:4px;}
.pitch-info p + p {margin-top:14px;}
.pitch-photo {border-radius:12px; overflow:hidden; border:1px solid var(--line);}
.pitch-photo img {width:100%; display:block;}

@media (max-width:760px) {
	.pitch-body {grid-template-columns:1fr;}
}

/* ── PAGINE LEGALI (privacy, cookie, termini) ──
   Testo lungo da leggere davvero: misura stretta, righe alte, e la tabella dei
   cookie che sul telefono si apre in schede (data-label) invece di sfondare. */
.legal {max-width:820px;}
.legal .page-head {margin-bottom:26px;}
.legal-updated {margin-top:10px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;}
.legal-note {font-size:14px; color:var(--muted); border-inline-start:3px solid var(--accent); padding-inline-start:12px; margin-top:12px;}

.legal-toc {background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin-bottom:34px;}
.legal-toc-title {font-family:var(--font-display); font-weight:400; font-size:16px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:10px;}
.legal-toc ol {list-style:decimal; margin:0; padding-inline-start:20px; display:grid; grid-template-columns:repeat(2,1fr); gap:6px 24px;}
.legal-toc li {font-size:14.5px;}
.legal-toc a {color:var(--muted); text-decoration:none;}
.legal-toc a:hover {color:var(--accent);}

.legal-section {margin-bottom:34px; scroll-margin-top:110px;}
.legal-section h2 {font-family:var(--font-display); font-weight:400; font-size:24px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--line);}
.legal-section p {font-size:15.5px; line-height:1.75; color:var(--text); margin-bottom:12px;}
.legal-section a {color:var(--accent);}
.legal-list {list-style:none; display:flex; flex-direction:column; gap:9px; margin:4px 0 14px;}
.legal-list li {font-size:15.5px; line-height:1.7; color:var(--muted); padding-inline-start:18px; position:relative;}
.legal-list li::before {content:""; position:absolute; inset-inline-start:0; top:11px; width:7px; height:7px; background:var(--accent); border-radius:2px;}
.legal-section code {font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px; background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:1px 5px;}

.legal-table-wrap {overflow-x:auto; margin:6px 0 14px;}
.legal-table {width:100%; border-collapse:collapse; font-size:14px;}
.legal-table th {font-family:var(--font-display); font-weight:400; font-size:14px; letter-spacing:.06em; text-transform:uppercase; text-align:start; color:var(--accent); padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap;}
.legal-table td {padding:11px 12px; border-bottom:1px solid var(--line); color:var(--muted); line-height:1.6; vertical-align:top;}
.legal-table tr:last-child td {border-bottom:0;}

.legal-related {background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 22px;}
.legal-related p {font-size:14.5px; color:var(--muted);}
.legal-related a {color:var(--accent);}

@media (max-width:700px) {
	.legal-toc ol {grid-template-columns:1fr;}
	/* la tabella diventa un elenco di schede: l'intestazione la porta ogni cella */
	.legal-table thead {display:none;}
	.legal-table, .legal-table tbody, .legal-table tr, .legal-table td {display:block; width:100%;}
	.legal-table tr {border:1px solid var(--line); border-radius:10px; margin-bottom:12px; padding:6px 0;}
	.legal-table td {border-bottom:0; padding:7px 14px;}
	.legal-table td::before {content:attr(data-label); display:block; font-family:var(--font-display); font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); margin-bottom:2px;}
}

/* dati societari nel footer (bms_company): riga di servizio, sotto il copyright */
.footer-company {font-size:12.5px; color:var(--muted); opacity:.75; margin-top:4px;}

/* la firma di chi ha fatto il sito: presente ma discreta, sotto i link legali */
.footer-credits {font-size:12.5px; color:var(--muted); opacity:.7; margin-top:6px;}
.footer-credits a {color:var(--muted); text-decoration:none; border-bottom:1px solid rgba(255,223,0,.35);}
.footer-credits a:hover {color:var(--yellow); border-bottom-color:var(--yellow);}
/* Sullo stretto le quattro righe del footer vanno incolonnate e centrate: il
   flex a capo appaiava i legali e la firma sulla stessa riga, strette. */
@media (max-width:640px) {
	.footer-bottom {flex-direction:column; text-align:center; gap:8px;}
	.footer-credits {margin-top:2px;}
}