/* ==========================================================================
   THE GAROE Group — homepage.css
   Page-specific styles for the homepage. Enqueued via is_front_page().

   Resets, fonts, header, footer, .container and root tokens come from the theme
   (style.css / main.css) and are not repeated here. The prototype-only variant
   toggle bar (.variant-bar / .vbtn / .vsep) has been dropped; the audience copy
   switch (.cf / .cs / .cfi / .csi + body.sport-variant) is kept so the markup's
   dual copy continues to resolve.

   Shorthand prototype tokens reconciled: --carbon* → --color-carbon*,
   --gold → --color-gold, --muted → --color-muted, --rule / --gold-dim →
   --color-line-dark, --off-white → --color-paper-text.
   ========================================================================== */

/* ── AUDIENCE COPY SWITCHING ──
   Default state shows the football-specific copy (.cf / .cfi). Set
   body.sport-variant (e.g. via a real toggle later) to reveal the
   sport-agnostic copy (.cs / .csi) instead. */
.cf  { display: block;  }
.cs  { display: none;   }
.cfi { display: inline; }
.csi { display: none;   }
body.sport-variant .cf  { display: none;             }
body.sport-variant .cs  { display: block;            }
body.sport-variant .cfi { display: none   !important; }
body.sport-variant .csi { display: inline !important; }

/* ════════════════════════ HERO ════════════════════════ */
.hero {
	background: var(--color-carbon);
	height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	text-align: center;
}
.hero-grid {
	background-image:
		linear-gradient(rgba(200, 169, 110, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(200, 169, 110, 0.03) 1px, transparent 1px);
	background-size: 60px 60px;
	position: absolute;
	inset: 0;
}
.hero-vignette {
	background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 25%, rgba(10, 10, 10, 0.80) 100%);
	position: absolute;
	inset: 0;
}
.hero-video-note {
	background: rgba(200, 169, 110, 0.06);
	border: 1px solid var(--color-line-dark);
	bottom: 24px;
	color: #5a5850;
	font-family: var(--font-mono);
	font-size: 9px;
	left: 50%;
	letter-spacing: 0.14em;
	padding: 7px 14px;
	position: absolute;
	text-transform: uppercase;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 2;
}
.hero-content {
	max-width: 800px;
	padding: 0 40px;
	position: relative;
	z-index: 2;
}
.hero-eyebrow {
	color: var(--color-gold);
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.26em;
	margin-bottom: 20px;
	opacity: 0.75;
	text-transform: uppercase;
}
.hero-title {
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 58px;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.08;
	margin-bottom: 20px;
}
.hero-sub {
	color: rgba(240, 236, 228, 0.60);
	font-size: 15px;
	line-height: 1.65;
	margin: 0 auto 36px;
	max-width: 480px;
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; }

/* ── BUTTONS ── */
.btn-primary {
	background: var(--color-gold);
	border: none;
	color: var(--color-carbon);
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	padding: 14px 32px;
	text-transform: uppercase;
	transition: background 0.15s;
}
.btn-primary:hover { background: var(--color-gold-light); }
.btn-outline {
	background: transparent;
	border: 1px solid rgba(200, 169, 110, 0.55);
	color: var(--color-gold);
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	padding: 14px 32px;
	text-transform: uppercase;
	transition: border-color 0.15s;
}
.btn-outline:hover { border-color: var(--color-gold); }

/* ════════════════════════ SECTION UTILITIES ════════════════════════ */
.sec-eyebrow {
	color: var(--color-gold);
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	margin-bottom: 12px;
	opacity: 0.75;
	text-transform: uppercase;
}
.sec-heading {
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 36px;
	font-weight: 400;
	line-height: 1.18;
	margin-bottom: 14px;
}
.sec-body { color: var(--color-muted); font-size: 14px; line-height: 1.72; }

/* ════════════════════════ LEGACY PANEL ════════════════════════ */
.legacy-panel {
	background: var(--color-carbon-2);
	border-top: 1px solid var(--color-line-dark);
	padding: 80px 0;
}
.legacy-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
}
.legacy-text .sec-eyebrow { margin-bottom: 14px; }
.legacy-text h2 {
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.15;
	margin-bottom: 20px;
}
.legacy-text p {
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1.75;
	margin-bottom: 32px;
	max-width: 440px;
}
.legacy-proof {
	border-left: 2px solid var(--color-gold);
	margin-bottom: 32px;
	padding: 16px 20px;
}
.legacy-proof-type {
	color: rgba(200, 169, 110, 0.55);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	margin-bottom: 6px;
	text-transform: uppercase;
}
.legacy-proof-milestone {
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 4px;
}
.legacy-proof-name {
	color: var(--color-gold);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.legacy-proof-club {
	color: var(--color-muted);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	margin-top: 2px;
	text-transform: uppercase;
}
.legacy-link {
	color: var(--color-gold);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}
.legacy-link:hover { text-decoration: underline; }

/* Photo zone */
.legacy-photo {
	background: #0e0d0b;
	border: 1px solid var(--color-line-dark);
	aspect-ratio: 4/3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	position: relative;
	overflow: hidden;
}
.legacy-photo-icon {
	width: 40px;
	height: 40px;
	border: 1px solid rgba(200, 169, 110, 0.25);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.legacy-photo-icon svg { opacity: 0.3; }
.legacy-photo-label {
	color: rgba(200, 169, 110, 0.35);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
}
.legacy-photo-sub {
	color: rgba(200, 169, 110, 0.2);
	font-family: var(--font-mono);
	font-size: 8px;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
}

/* ════════════════════════ ACADEMY PANEL ════════════════════════ */
.academy-panel {
	background: #0c0b09;
	border-top: 1px solid var(--color-line-dark);
	padding: 80px 0;
}
.academy-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: start;
	margin-bottom: 56px;
}
.academy-text h2 {
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.15;
	margin-bottom: 16px;
}
.academy-text p {
	color: var(--color-muted);
	font-size: 14px;
	line-height: 1.75;
	margin-bottom: 24px;
}
.academy-link {
	color: var(--color-gold);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}
.academy-link:hover { text-decoration: underline; }

.academy-meta { padding-top: 8px; }
.academy-meta-row {
	border-bottom: 1px solid var(--color-line-dark);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 10px 0;
}
.academy-meta-row:last-child { border-bottom: none; }
.academy-meta-lbl {
	color: rgba(200, 169, 110, 0.38);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.academy-meta-val {
	color: rgba(240, 236, 228, 0.70);
	font-family: var(--font-mono);
	font-size: 11px;
	text-align: right;
}

/* Progression strip */
.progression-strip {
	border: 1px solid var(--color-line-dark);
	padding: 32px 0 28px;
	position: relative;
	overflow-x: auto;
}
.progression-inner {
	display: flex;
	align-items: flex-end;
	min-width: 900px;
	padding: 0 32px;
	gap: 0;
}
.prog-stage {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}
/* Connecting line between stages */
.prog-stage::before {
	content: '';
	position: absolute;
	top: 22px;
	left: -50%;
	right: 50%;
	height: 1px;
	background: var(--color-line-dark);
	z-index: 0;
}
.prog-stage:first-child::before { display: none; }

/* Divider before first-team section */
.prog-stage.ft-divider::before {
	background: linear-gradient(to right, var(--color-line-dark), rgba(200, 169, 110, 0.45));
}

.prog-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #333;
	border: 1px solid #444;
	margin-bottom: 10px;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}
.prog-stage.active .prog-dot,
.prog-stage.milestone .prog-dot {
	background: #7a5a20;
	border-color: var(--color-gold);
	width: 10px;
	height: 10px;
}
.prog-stage.milestone .prog-dot {
	background: var(--color-gold);
	box-shadow: 0 0 8px rgba(200, 169, 110, 0.4);
}

.prog-kit {
	width: 36px;
	height: 42px;
	margin-bottom: 8px;
	position: relative;
	flex-shrink: 0;
}
/* Kit shape drawn in CSS */
.kit-shape {
	width: 100%;
	height: 100%;
}

.prog-label {
	font-family: var(--font-mono);
	font-size: 8px;
	letter-spacing: 0.1em;
	color: var(--color-muted);
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
}
.prog-stage.active .prog-label { color: rgba(200, 169, 110, 0.7); }
.prog-stage.milestone .prog-label { color: var(--color-gold); font-weight: 600; }

.progression-caption {
	color: var(--color-muted);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	margin-top: 16px;
	padding: 0 32px;
	text-transform: uppercase;
}
.progression-caption span { color: rgba(200, 169, 110, 0.55); }

/* Kit SVGs — different colours per age group */
.kit-u8  { color: #f0f0f0; }
.kit-u9  { color: #2563eb; }
.kit-u10 { color: #7c3aed; }
.kit-u11 { color: #f59e0b; }
.kit-u12 { color: #f0f0f0; }
.kit-u13 { color: #1d4ed8; }
.kit-u14 { color: #f0f0f0; }
.kit-u15 { color: #dc2626; }
.kit-u16 { color: #f0f0f0; }
.kit-u18 { color: #111; }
.kit-u21 { color: #1d4ed8; }
.kit-debut { color: #f0f0f0; }
.kit-100  { color: #b06a2c; }
.kit-200  { color: #a0a0a8; }
.kit-300  { color: var(--color-gold); }

/* ════════════════════════ TIERS ════════════════════════ */
.tiers {
	background: #0c0c0c;
	border-top: 1px solid var(--color-line-dark);
	padding: 80px 0;
}
.tiers-layout {
	align-items: start;
	display: grid;
	gap: 72px;
	grid-template-columns: 300px 1fr;
}
.tiers-left h2 {
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 400;
	line-height: 1.18;
	margin-bottom: 14px;
}
.tiers-left p { color: var(--color-muted); font-size: 13px; line-height: 1.72; margin-bottom: 28px; }
.tiers-bridge {
	border-top: 1px solid var(--color-line-dark);
	color: rgba(240, 236, 228, 0.5);
	font-family: var(--font-display);
	font-size: 14px;
	font-style: italic;
	line-height: 1.7;
	margin-bottom: 28px;
	padding-top: 20px;
}
.tiers-cta {
	color: var(--color-gold);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.tier-timeline { display: flex; flex-direction: column; }
.tier-node     { display: flex; }
.tier-spine { align-items: center; display: flex; flex-direction: column; flex-shrink: 0; width: 24px; }
.tier-dot { border: 2px solid transparent; border-radius: 50%; flex-shrink: 0; height: 12px; margin-top: 3px; width: 12px; }
.dot-cu { background: #7a3d14; border-color: #b06a2c; }
.dot-si { background: #555560; border-color: #a0a0a8; }
.dot-go { background: #7a5a20; border-color: var(--color-gold); }
.dot-bk { background: #1e1e1e; border-color: #484848; }
.tier-line { flex: 1; margin-top: 4px; min-height: 20px; width: 1px; }
.line-cu { background: linear-gradient(to bottom, #b06a2c, rgba(160, 160, 168, 0.35)); }
.line-si { background: linear-gradient(to bottom, #a0a0a8, rgba(200, 169, 110, 0.35)); }
.line-go { background: linear-gradient(to bottom, #c8a96e, rgba(60, 60, 60, 0.4)); }
.tier-content { flex: 1; padding: 0 0 36px 16px; }
.tier-content.last { padding-bottom: 0; }
.tier-label { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; margin-bottom: 5px; text-transform: uppercase; }
.lbl-cu { color: #b06a2c; } .lbl-si { color: #a0a0a8; } .lbl-go { color: #c8a96e; } .lbl-bk { color: #585850; }
.tier-title { color: var(--color-white); font-family: var(--font-display); font-size: 18px; line-height: 1.2; margin-bottom: 5px; }
.tier-desc  { color: var(--color-muted); font-size: 12px; line-height: 1.65; margin-bottom: 10px; }
.tier-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.tier-pill {
	background: rgba(200, 169, 110, 0.03);
	border: 1px solid rgba(200, 169, 110, 0.14);
	color: rgba(200, 169, 110, 0.40);
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.06em;
	padding: 3px 8px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ════════════════════════ PARTNER STRIP ════════════════════════ */
.partner-strip {
	background: var(--color-carbon);
	border-bottom: 1px solid var(--color-line-dark);
	border-top: 1px solid var(--color-line-dark);
	padding: 40px 0;
}
.partner-inner { align-items: center; display: flex; gap: 40px; }
.partner-label { color: rgba(200, 169, 110, 0.32); flex-shrink: 0; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; }
.partner-rule  { background: var(--color-line-dark); flex-shrink: 0; height: 32px; width: 1px; }
.partner-info  { align-items: center; display: flex; gap: 18px; }
.partner-crest { background: var(--color-white); border-radius: 50%; flex-shrink: 0; height: 52px; overflow: hidden; width: 52px; }
.partner-crest img { display: block; height: 100%; object-fit: cover; width: 100%; }
.partner-name   { color: var(--color-white); font-family: var(--font-display); font-size: 22px; line-height: 1; }
.partner-detail { color: var(--color-muted); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; margin-top: 5px; text-transform: uppercase; }

/* ════════════════════════ CTA ════════════════════════ */
.cta-section {
	background: var(--color-carbon-3);
	border-top: 1px solid var(--color-line-dark);
	padding: 96px 0;
	text-align: center;
}
.cta-section h2 {
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 44px;
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: 14px;
}
.cta-section h2 span { color: var(--color-gold); }
.cta-tagline {
	color: rgba(200, 169, 110, 0.5);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	margin-bottom: 20px;
	text-transform: uppercase;
}
.cta-section p {
	color: var(--color-muted);
	font-size: 15px;
	line-height: 1.75;
	margin: 0 auto 44px;
	max-width: 480px;
}
.cta-primary-wrap { margin-bottom: 20px; }
.cta-secondary-link {
	color: rgba(200, 169, 110, 0.55);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.15s;
}
.cta-secondary-link:hover { color: var(--color-gold); }

/* ════════════════════════ RESPONSIVE ════════════════════════ */
@media (max-width: 960px) {
	.legacy-inner, .academy-header, .tiers-layout { grid-template-columns: 1fr; gap: 40px; }
	.hero { height: auto; min-height: 420px; padding: 80px 0 100px; }
	.hero-title { font-size: 40px; }
	.cta-section h2 { font-size: 34px; }
}