/* =============================================================
   MINI HOOPS PAGE  (/play/mini-hoops/)
   Orange-led, WBA-branded (no Ford partner). Self-contained —
   relies only on theme tokens (--wba-*, --gutter-*) and, optionally,
   .wba-fade-up from play-shared.css for scroll reveals.
   ============================================================= */

.mh-page { --mh-accent: var(--wba-orange, #F7931E); }

/* ---- Buttons ---- */
.mh-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 15px 28px;
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
	text-transform: lowercase; text-decoration: none;
	border-radius: 4px; border: 1px solid transparent;
	transition: background 0.18s, color 0.18s, transform 0.15s, border-color 0.18s;
}
.mh-btn svg { width: 15px; height: 15px; }
.mh-btn--primary { background: var(--mh-accent); color: #fff; }
.mh-btn--primary:hover { background: var(--wba-dark, #1A1A1A); transform: translateY(-2px); }
.mh-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.mh-btn--ghost:hover { background: #fff; color: var(--wba-dark, #1A1A1A); }
.mh-btn--lg { padding: 17px 34px; font-size: 0.82rem; }

/* =============================================================
   1. HERO
   ============================================================= */
.mh-hero {
	position: relative;
	min-height: 480px; height: 58vh;
	display: flex; align-items: center;
	background-size: cover; background-position: center;
}
.mh-hero__overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(105deg, rgba(26,26,26,0.92) 0%, rgba(26,26,26,0.72) 45%, rgba(26,26,26,0.40) 100%),
		radial-gradient(circle at 78% 50%, rgba(247,147,30,0.28), transparent 60%);
}
.mh-hero__inner {
	position: relative; z-index: 1;
	max-width: 1240px; width: 100%;
	margin: 0 auto; padding: 0 var(--gutter-d, 40px);
	color: #fff;
}
.mh-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
	color: #fff;
	padding: 9px 18px; margin-bottom: 12px;
	border: 1px solid rgba(247,147,30,0.6);
	background: rgba(247,147,30,0.14);
	border-radius: 999px;
}
.mh-hero__eyebrow svg { width: 14px; height: 14px; color: var(--mh-accent); }
.mh-hero__headline { margin: 0 0 18px; line-height: 1; }
.mh-hero__headline--logo { margin: 0 0 10px; }
.mh-hero__logo { display: block; width: auto; max-width: 340px; max-height: 190px; }
.mh-hero__word {
	display: block;
	font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -0.02em;
}
.mh-hero__qualifier {
	display: block; font-style: italic; font-weight: 300;
	font-size: clamp(2rem, 4.5vw, 3.2rem); color: var(--mh-accent);
}
.mh-hero__tagline {
	max-width: 600px; margin: 0 0 36px;
	font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,0.9);
}
.mh-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* =============================================================
   2. STICKY ANCHOR NAV
   ============================================================= */
.mh-anchors {
	position: sticky; top: 0; z-index: 40;
	background: var(--wba-white, #fff);
	border-top: 3px solid var(--mh-accent);
	border-bottom: 1px solid var(--wba-border, #E6E6E2);
}
.mh-anchors__inner {
	max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter-d, 40px);
	display: flex; align-items: center; gap: 26px; overflow-x: auto;
}
.mh-anchors__inner a {
	position: relative;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: lowercase;
	color: var(--wba-dark, #1A1A1A); text-decoration: none;
	padding: 18px 2px; white-space: nowrap;
}
.mh-anchors__inner a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--mh-accent); transform: scaleX(0); transform-origin: left;
	transition: transform 0.2s;
}
.mh-anchors__inner a:hover::after { transform: scaleX(1); }
.mh-anchors__inner a.is-cta {
	margin-left: auto;
	background: var(--mh-accent); color: #fff;
	padding: 9px 18px; border-radius: 4px;
}
.mh-anchors__inner a.is-cta::after { display: none; }
.mh-anchors__inner a.is-cta:hover { background: var(--wba-dark, #1A1A1A); }

/* =============================================================
   3. AT A GLANCE
   ============================================================= */
.mh-glance { background: var(--wba-white, #fff); padding: 90px var(--gutter-d, 40px); }
.mh-glance__inner { max-width: 1240px; margin: 0 auto; }
.mh-glance__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mh-glance__cell {
	display: flex; flex-direction: column;
	background: var(--wba-cream, #F8F8F6);
	border: 1px solid var(--wba-border, #E6E6E2);
	border-radius: 14px; padding: 28px 26px;
}
.mh-glance__icon { color: var(--mh-accent); margin-bottom: 16px; }
.mh-glance__icon svg { width: 26px; height: 26px; }
.mh-glance__label {
	font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--wba-muted, #888); margin-bottom: 6px;
}
.mh-glance__value { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--wba-dark, #1A1A1A); }
.mh-glance__detail { font-size: 0.86rem; line-height: 1.45; color: #555; margin-top: 6px; }

/* =============================================================
   4. ABOUT
   ============================================================= */
.mh-about { background: var(--wba-cream, #F8F8F6); padding: 100px var(--gutter-d, 40px); }
.mh-about__inner { max-width: 1240px; margin: 0 auto; }
.mh-about__head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.mh-about__eyebrow {
	display: inline-block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em;
	text-transform: uppercase; color: var(--mh-accent); margin-bottom: 14px;
}
.mh-about__headline {
	font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; line-height: 1.06;
	letter-spacing: -0.02em; color: var(--wba-dark, #1A1A1A); margin: 0 0 1.2rem;
}
.mh-about__headline em { font-style: italic; font-weight: 300; color: var(--mh-accent); }
.mh-about__body { font-size: 1.02rem; line-height: 1.7; color: #444; margin: 0 0 1rem; }
.mh-about__features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.mh-about__feature {
	background: var(--wba-white, #fff);
	border: 1px solid var(--wba-border, #E6E6E2);
	border-radius: 14px; padding: 30px 28px;
}
.mh-about__feature-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 12px;
	background: rgba(247,147,30,0.1); color: var(--mh-accent); margin-bottom: 18px;
}
.mh-about__feature-icon svg { width: 24px; height: 24px; }
.mh-about__feature-title { font-size: 1.15rem; font-weight: 800; color: var(--wba-dark, #1A1A1A); margin: 0 0 10px; }
.mh-about__feature-body { font-size: 0.92rem; line-height: 1.6; color: #555; margin: 0; }

/* =============================================================
   5. SESSIONS
   ============================================================= */
.mh-sessions { background: var(--wba-white, #fff); padding: 100px var(--gutter-d, 40px); }
.mh-sessions__inner { max-width: 900px; margin: 0 auto; }
.mh-sessions__head { text-align: center; margin-bottom: 40px; }
.mh-sessions__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--mh-accent); margin-bottom: 14px;
}
.mh-sessions__eyebrow svg { width: 14px; height: 14px; }
.mh-sessions__headline {
	font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em;
	color: var(--wba-dark, #1A1A1A); margin: 0;
}
.mh-sessions__headline em { font-style: italic; font-weight: 300; color: var(--mh-accent); }
.mh-sessions__card {
	background: var(--wba-cream, #F8F8F6);
	border: 1px solid var(--wba-border, #E6E6E2);
	border-radius: 16px; padding: 34px 34px 30px;
}
.mh-sessions__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 30px; margin: 0; }
.mh-sessions__facts dt {
	display: flex; align-items: center; gap: 7px;
	font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wba-muted, #888); margin-bottom: 6px;
}
.mh-sessions__facts dt svg { width: 14px; height: 14px; color: var(--mh-accent); }
.mh-sessions__facts dd { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--wba-dark, #1A1A1A); }

.mh-sessions__rounds { margin-top: 24px; border-top: 1px solid var(--wba-border, #E6E6E2); padding-top: 18px; }
.mh-sessions__rounds > summary {
	display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--mh-accent); transition: color 0.15s;
}
.mh-sessions__rounds > summary::-webkit-details-marker { display: none; }
.mh-sessions__rounds > summary svg { width: 14px; height: 14px; }
.mh-sessions__rounds > summary::after { content: "▾"; margin-left: 2px; font-size: 0.8rem; transition: transform 0.2s; }
.mh-sessions__rounds[open] > summary::after { transform: rotate(180deg); }
.mh-sessions__rounds > summary:hover { color: var(--wba-dark, #1A1A1A); }
.mh-sessions__rounds-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.mh-sessions__rounds-list li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	font-size: 0.85rem; padding: 5px 0; border-bottom: 1px solid var(--wba-border, #E6E6E2);
}
.mh-sessions__round-label { color: var(--wba-muted, #888); font-weight: 600; }
.mh-sessions__round-date { color: var(--wba-dark, #1A1A1A); font-weight: 500; }

/* =============================================================
   6. FEES
   ============================================================= */
.mh-fees { background: var(--wba-cream, #F8F8F6); padding: 100px var(--gutter-d, 40px); }
.mh-fees__inner { max-width: 960px; margin: 0 auto; }
.mh-fees__head { text-align: center; margin-bottom: 48px; }
.mh-fees__eyebrow {
	display: inline-block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em;
	text-transform: uppercase; color: var(--mh-accent); margin-bottom: 14px;
}
.mh-fees__headline {
	font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em;
	color: var(--wba-dark, #1A1A1A); margin: 0;
}
.mh-fees__headline em { font-style: italic; font-weight: 300; color: var(--mh-accent); }
.mh-fees__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mh-fees__card {
	background: var(--wba-white, #fff);
	border: 1px solid var(--wba-border, #E6E6E2);
	border-radius: 16px; padding: 34px 32px;
}
.mh-fees__badge {
	display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--mh-accent);
	background: rgba(247,147,30,0.1); border: 1px solid rgba(247,147,30,0.35);
	padding: 6px 12px; border-radius: 999px; margin-bottom: 20px;
}
.mh-fees__price { font-size: 3.2rem; font-weight: 800; line-height: 1; color: var(--wba-dark, #1A1A1A); letter-spacing: -0.03em; }
.mh-fees__currency { font-size: 1.6rem; font-weight: 700; vertical-align: super; margin-right: 2px; }
.mh-fees__unit { display: block; font-size: 0.86rem; color: var(--wba-muted, #888); margin: 6px 0 22px; }
.mh-fees__items { list-style: none; margin: 0 0 18px; padding: 0; }
.mh-fees__items li {
	position: relative; font-size: 0.92rem; line-height: 1.5; color: var(--wba-dark, #1A1A1A);
	padding: 8px 0 8px 24px; border-bottom: 1px solid var(--wba-border, #E6E6E2);
}
.mh-fees__items li:last-child { border-bottom: 0; }
.mh-fees__items li::before {
	content: ""; position: absolute; left: 3px; top: 15px;
	width: 7px; height: 7px; border-radius: 50%; background: var(--mh-accent);
}
.mh-fees__foot { font-size: 0.78rem; line-height: 1.5; color: var(--wba-muted, #888); margin: 0; }

/* =============================================================
   7. HOW WE PLAY — dark section
   ============================================================= */
.mh-values {
	position: relative; overflow: hidden;
	background: var(--wba-dark, #1A1A1A); color: #fff;
	padding: 110px var(--gutter-d, 40px);
}
.mh-values::before {
	content: ""; position: absolute; top: -20%; right: -10%; width: 60%; height: 140%;
	background: radial-gradient(circle at center, rgba(247,147,30,0.24), transparent 62%);
	pointer-events: none;
}
.mh-values__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; text-align: center; }
.mh-values__eyebrow {
	display: inline-block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em;
	text-transform: uppercase; color: var(--mh-accent); margin-bottom: 18px;
}
.mh-values__headline {
	font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; line-height: 1.08;
	letter-spacing: -0.02em; margin: 0 0 1.1rem;
}
.mh-values__headline em { font-style: italic; font-weight: 300; color: rgba(255,255,255,0.72); }
.mh-values__lede { max-width: 640px; margin: 0 auto 56px; font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,0.72); }
.mh-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; }
.mh-values__tile {
	background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
	border-top: 3px solid var(--mh-accent); border-radius: 13px; padding: 32px 28px 28px;
}
.mh-values__num { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--mh-accent); margin-bottom: 14px; }
.mh-values__tile h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 10px; color: #fff; }
.mh-values__tile p { font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,0.7); margin: 0; }

/* =============================================================
   8. REGISTER
   ============================================================= */
.mh-register { background: var(--wba-white, #fff); padding: 100px var(--gutter-d, 40px); text-align: center; }
.mh-register__inner { max-width: 720px; margin: 0 auto; }
.mh-register__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--mh-accent); margin-bottom: 16px;
}
.mh-register__eyebrow svg { width: 14px; height: 14px; }
.mh-register__headline {
	font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -0.02em;
	color: var(--wba-dark, #1A1A1A); margin: 0 0 1rem;
}
.mh-register__headline em { font-style: italic; font-weight: 300; color: var(--mh-accent); }
.mh-register__lede { font-size: 1.02rem; line-height: 1.65; color: #444; margin: 0 0 32px; }
.mh-register__ctas { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }
.mh-register__email {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.82rem; font-weight: 700; color: var(--wba-dark, #1A1A1A); text-decoration: none;
}
.mh-register__email svg { width: 15px; height: 15px; color: var(--mh-accent); }
.mh-register__email:hover { color: var(--mh-accent); }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 980px) {
	.mh-glance__grid { grid-template-columns: repeat(2, 1fr); }
	.mh-about__features { grid-template-columns: 1fr; }
	.mh-values__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.mh-hero { min-height: 440px; }
	.mh-hero__ctas .mh-btn { flex: 1 1 100%; justify-content: center; }
	.mh-fees__grid { grid-template-columns: 1fr; }
	.mh-sessions__facts { grid-template-columns: 1fr; }
	.mh-sessions__rounds-list { grid-template-columns: 1fr; }
	.mh-hero__logo { max-width: 260px; max-height: 150px; }
}
@media (max-width: 560px) {
	.mh-glance { padding: 64px var(--gutter-m, 20px); }
	.mh-about, .mh-sessions, .mh-fees, .mh-register { padding: 64px var(--gutter-m, 20px); }
	.mh-values { padding: 70px var(--gutter-m, 20px); }
	.mh-glance__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.mh-btn:hover { transform: none; }
}