/* ─── What We Offer — detail pages ─────────────────────── */

/* Shared template for the five offering detail pages (CrossFit, Hyrox,
   BodyTone, Kids & Teens, Personal Training). One layout, five datasets.
   Editorial full-bleed bands matching the What We Offer listing page.
   Per-class accent is set on the page shell via --d-accent and surfaced
   through the .wwo-d-accent-text / class-type-* helpers. */


/* ─── Page shell + per-class accent ──────────────────────── */

.wwo-d											{	margin: 0 calc(-1 * var(--shell-pad)) 0;
													--d-accent: var(--color-brand);

	&.wwo-d--crossfit							{	--d-accent: var(--color-class-crossfit); }
	&.wwo-d--hyrox								{	--d-accent: var(--color-class-hyrox); }
	&.wwo-d--bodytone							{	--d-accent: var(--color-class-bodytone); }
	&.wwo-d--crossfit-teens						{	--d-accent: var(--color-class-teens); }
	&.wwo-d--open-gym							{	--d-accent: var(--color-class-open-gym); }
	&.wwo-d--tba								{	--d-accent: var(--color-class-tba); }

	/* Shared eyebrow → display-font treatment (matches the listing page) */
	.eyebrow									{	margin: 0 0 1.25em;
													font-family: var(--font-display); font-weight: 700;
													letter-spacing: var(--track-eyebrow);
	}

	.wwo-d-accent-text							{	color: var(--d-accent); }
}


/* ─── Shared display type ────────────────────────────────── */

.wwo-d-display									{	margin: 0;
													font-family: var(--font-display); font-weight: 700; line-height: 0.9;
													letter-spacing: -0.03em; text-transform: uppercase;

	span, b										{	display: block; }

	b											{	color: var(--d-accent); }

	&.wwo-d-display--hero						{	font-size: clamp(2.75rem, 8vw, 6.5rem); margin-bottom: 0.55em; }

	&.wwo-d-display--statement					{	font-size: clamp(2.5rem, 7vw, 5.5rem); }

	&.wwo-d-display--section					{	font-size: clamp(2rem, 5vw, 3.75rem); max-width: 16ch; }

	&.wwo-d-display--feature					{	font-size: clamp(1.75rem, 4.5vw, 3.25rem); margin: 0 0 0.5em; }

	&.wwo-d-display--on-brand					{	color: var(--color-ink-0); max-width: 18ch;

		b										{	color: var(--color-ink-0); }
	}
}

.wwo-d-lede										{	margin: 0 0 2em;
													max-width: 42ch;
													font-size: var(--fs-4); line-height: 1.5;
													color: var(--color-paper-mute);
}

.wwo-d-section-lede								{	margin: 1.25em 0 0;
													max-width: 54ch;
													font-size: var(--fs-4); line-height: 1.55; color: var(--color-paper-mute);
}

.wwo-d-section-head								{	margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.wwo-d-actions									{	display: flex; flex-wrap: wrap; gap: 0.65em; margin: 0; }


/* ─── Breadcrumb bar ─────────────────────────────────────── */

.wwo-d-crumbs									{	padding: 1.25rem var(--shell-pad) 0;
													background: transparent;
}


/* ─── Hero (split image / copy) ──────────────────────────── */

.wwo-d-hero										{	position: relative;
													display: flex;
													min-height: min(82vh, 880px);
													background: transparent;
													padding-top: clamp(0.5rem, 2vw, 1.25rem);

	> *											{	flex: 1 1 50%; min-width: 0; }

	.cfu-triple-plus--hero-tl					{	top: clamp(0.5rem, 2vw, 1.25rem); }

	.wwo-d-hero-copy							{	display: flex; flex-direction: column; justify-content: center;
													padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 5vw, var(--shell-pad)) clamp(2.5rem, 5vw, 4rem);
	}

	.wwo-d-hero-eyebrow							{	color: var(--d-accent); }

	.wwo-d-hero-media							{	margin: 0; min-height: 320px;

		img										{	width: 100%; height: 100%; min-height: inherit;
													object-fit: cover; display: block;
		}
	}

	@media screen and (max-width: 1100px)		{	flex-direction: column; min-height: 0;

		.wwo-d-hero-media						{	order: -1; min-height: 44vh; }
	}
}

.wwo-d-hero-meta								{	list-style: none; margin: 0 0 2em; padding: 1.15em 0;
													display: flex; flex-wrap: wrap; gap: 1.25em 2.5em;
													border-top: 1px solid var(--color-rule);
													border-bottom: 1px solid var(--color-rule);

	.wwo-d-hero-meta-label						{	display: block; margin-bottom: 0.4em;
													font-family: var(--font-mono); font-size: 10px; font-weight: 500;
													letter-spacing: 0.16em; text-transform: uppercase;
													color: var(--color-paper-low);
	}

	.wwo-d-hero-meta-value						{	display: block;
													font-family: var(--font-display); font-size: 1.125rem; font-weight: 700;
													text-transform: uppercase; letter-spacing: 0.02em;
													color: var(--color-paper);
	}
}


/* ─── Intro statement ────────────────────────────────────── */

.wwo-d-intro									{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													background: var(--color-ink-1);

	.wwo-d-intro-inner							{	max-width: 1440px; margin-inline: auto;
													display: grid; grid-template-columns: 0.9fr 1.1fr;
													gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
	}

	.wwo-d-intro-body p							{	margin: 0 0 1.15em;
													font-size: var(--fs-3); line-height: 1.5; color: var(--color-paper-mute);

		&:last-child							{	margin-bottom: 0; }
	}

	@media screen and (max-width: 900px)		{

		.wwo-d-intro-inner						{	grid-template-columns: 1fr; gap: 2rem; }
	}
}


/* ─── Core concepts grid ─────────────────────────────────── */

.wwo-d-concepts									{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													background: var(--color-ink-0);

	.wwo-d-concepts-inner						{	max-width: 1440px; margin-inline: auto; }
}

.wwo-d-concept-grid								{	list-style: none; margin: 0; padding: 0;
													display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
													gap: clamp(1.25rem, 3vw, 2.5rem);

	@media screen and (max-width: 1100px)		{	grid-template-columns: repeat(2, minmax(0, 1fr)); }

	@media screen and (max-width: 650px)		{	grid-template-columns: 1fr; }
}

.wwo-d-concept									{	border-top: 3px solid var(--d-accent); padding-top: 1.5em;

	.wwo-d-concept-num							{	margin: 0 0 0.6em;
													font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem);
													font-weight: 700; line-height: 1; letter-spacing: -0.04em;
													color: var(--color-paper-low);
	}

	.wwo-d-concept-title						{	margin: 0 0 0.65em;
													font-family: var(--font-display); font-size: 1rem; font-weight: 700;
													line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em;
													color: var(--color-paper);
	}

	.wwo-d-concept-body							{	margin: 0;
													font-size: var(--fs-5); line-height: 1.55; color: var(--color-paper-mute);
	}
}


/* ─── Mini-timetable (filtered from timetable.json) ──────── */

.wwo-d-schedule									{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													background: var(--color-ink-1);

	.wwo-d-schedule-inner						{	max-width: 1440px; margin-inline: auto; }
}

.wwo-d-schedule-grid							{	display: flex; flex-wrap: wrap;
													gap: clamp(1.25rem, 3vw, 2.5rem);
													margin-bottom: clamp(2rem, 4vw, 3rem);
}

.wwo-d-schedule-day								{	flex: 1 1 150px; max-width: 260px;
													border-top: 3px solid var(--d-accent); padding-top: 1.25em;

	.wwo-d-schedule-day-name					{	margin: 0 0 0.5em;
													font-family: var(--font-display); font-size: 1rem; font-weight: 700;
													line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em;
													color: var(--color-paper);
	}

	.wwo-d-schedule-sessions li					{	display: flex; flex-direction: column; gap: 0.35em;
													padding: 0.95em 0;
													border-bottom: 1px solid var(--color-rule);
		&:last-child							{	border-bottom: none; }
	}

	.wwo-d-schedule-sessions time				{	font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
													line-height: 1; letter-spacing: -0.01em; color: var(--color-paper);
	}

	.wwo-d-schedule-sessions span				{	font-family: var(--font-mono); font-size: 10px; font-weight: 500;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													line-height: 1.3; color: var(--color-paper-quiet);

		b										{	color: var(--color-paper-low); }
	}

	@media screen and (max-width: 650px)		{	flex-basis: 100%; max-width: none; }
}

.wwo-d-schedule-actions							{	margin: 0; }


/* ─── Feature split bands ────────────────────────────────── */

.wwo-d-feature									{	display: flex;
													min-height: min(70vh, 760px);
													background: var(--color-ink-0);

	> *											{	flex: 1 1 50%; min-width: 0; }

	&.wwo-d-feature--alt						{	background: var(--color-ink-2); }

	&.wwo-d-feature--flip .wwo-d-feature-media	{	order: 2; }

	.wwo-d-feature-media						{	margin: 0; min-height: 300px;

		img										{	width: 100%; height: 100%; min-height: inherit;
													object-fit: cover; display: block;
		}
	}

	.wwo-d-feature-copy							{	display: flex; flex-direction: column; justify-content: center;
													padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, var(--shell-pad));
	}

	.wwo-d-feature-index						{	display: flex; align-items: baseline; gap: 0.85em;
													margin: 0 0 1.5em;
													font-family: var(--font-mono); font-size: 11px; font-weight: 500;
													letter-spacing: 0.14em; text-transform: uppercase;
													color: var(--color-paper-low);

		span:first-child						{	color: var(--color-paper); font-weight: 700; }
	}

	.wwo-d-feature-body							{	margin: 0 0 1.5em;
													max-width: 48ch;
													font-size: var(--fs-4); line-height: 1.6; color: var(--color-paper-mute);
	}

	.wwo-d-feature-points.u-points				{	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
													gap: 0.5em 1.5em;
	}

	@media screen and (max-width: 1100px)		{	flex-direction: column; min-height: 0;

		&.wwo-d-feature--flip .wwo-d-feature-media	{	order: 0; }

		.wwo-d-feature-media					{	min-height: 42vh; }
	}

	@media screen and (max-width: 650px)		{

		.wwo-d-feature-points.u-points			{	grid-template-columns: 1fr; }
	}
}


/* ─── At a glance ────────────────────────────────────────── */

.wwo-d-glance									{	padding: clamp(3rem, 7vw, 5.5rem) var(--shell-pad);
													background: var(--color-ink-1);

	.wwo-d-glance-inner							{	max-width: 1440px; margin-inline: auto; }

	.wwo-d-glance-head							{	margin-bottom: clamp(2rem, 4vw, 3rem); }

	.wwo-d-glance-title							{	margin: 0; max-width: 24ch;
													font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem);
													font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
													color: var(--color-paper);
	}
}

.wwo-d-glance-grid								{	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
													gap: clamp(1.5rem, 3vw, 2.5rem); margin: 0;

	> div										{	border-top: 1px solid var(--color-rule-strong); padding-top: 1.25em; }

	.wwo-d-glance-stat							{	margin: 0 0 0.35em;
													font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.5rem);
													font-weight: 700; line-height: 0.95; letter-spacing: -0.03em;
													color: var(--d-accent);
	}

	.wwo-d-glance-label							{	margin: 0;
													font-size: var(--fs-5); line-height: 1.5; color: var(--color-paper-mute);
	}

	@media screen and (max-width: 1100px)		{	grid-template-columns: repeat(2, minmax(0, 1fr)); }

	@media screen and (max-width: 650px)		{	grid-template-columns: 1fr; }
}


/* ─── Why we're different (brand band) ───────────────────── */

.wwo-d-difference								{	background: var(--color-brand); color: var(--color-ink-0);

	.wwo-d-band-inner							{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													max-width: 1440px; margin-inline: auto;
	}

	.eyebrow									{	color: var(--color-ink-0); }

	.cfu-triple-plus							{	margin-bottom: 1.5em; }

	.wwo-d-difference-lede						{	margin: 0;
													max-width: 58ch;
													font-size: var(--fs-4); line-height: 1.55; color: rgba(5, 6, 6, 0.82);
	}
}

.wwo-d-difference-grid							{	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
													gap: clamp(1.25rem, 3vw, 2.5rem);

	@media screen and (max-width: 1100px)		{	grid-template-columns: repeat(2, minmax(0, 1fr)); }

	@media screen and (max-width: 650px)		{	grid-template-columns: 1fr; }
}

.wwo-d-difference-point							{	border-top: 3px solid var(--color-ink-0); padding-top: 1.5em;

	.wwo-d-difference-num						{	margin: 0 0 0.5em;
													font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem);
													font-weight: 700; line-height: 1; letter-spacing: -0.04em;
													color: var(--color-ink-0); opacity: 0.35;
	}

	.wwo-d-difference-title						{	margin: 0 0 0.65em;
													font-family: var(--font-display); font-size: 1rem; font-weight: 700;
													line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em;
													color: var(--color-ink-0);
	}

	.wwo-d-difference-body						{	margin: 0;
													font-size: var(--fs-5); line-height: 1.55; color: rgba(5, 6, 6, 0.82);
	}
}


/* ─── Showcase (cinematic photo breakout) ────────────────── */

.wwo-d-showcase									{	position: relative;
													display: flex; align-items: flex-end;
													min-height: min(78vh, 820px);
													overflow: hidden; isolation: isolate;
													background: var(--color-ink-0);

	.wwo-d-showcase-media						{	position: absolute; inset: 0; margin: 0; z-index: 0;

		img										{	width: 100%; height: 100%;
													object-fit: cover; object-position: center 30%;
													display: block; filter: grayscale(0.15) contrast(1.05);
		}
	}

	.wwo-d-showcase-scrim						{	position: absolute; inset: 0; z-index: 1; pointer-events: none;
													background: linear-gradient(0deg, rgba(5, 6, 6, 0.85) 0%, rgba(5, 6, 6, 0.25) 55%, rgba(5, 6, 6, 0.5) 100%);
	}

	.wwo-d-showcase-content						{	position: relative; z-index: 2;
													width: 100%; max-width: 720px;
													padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, var(--shell-pad));
	}

	.wwo-d-showcase-body						{	margin: 1.5em 0 0;
													max-width: 50ch;
													font-size: var(--fs-3); line-height: 1.5; color: var(--color-paper);
	}

	@media screen and (max-width: 650px)		{	min-height: min(68vh, 640px); }
}


/* ─── Who it's for ───────────────────────────────────────── */

.wwo-d-audience									{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													background: var(--color-ink-1);

	.wwo-d-audience-inner						{	max-width: 1440px; margin-inline: auto; }
}

.wwo-d-audience-grid							{	list-style: none; margin: 0; padding: 0;
													display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
													gap: clamp(1.25rem, 3vw, 2.5rem);

	@media screen and (max-width: 900px)		{	grid-template-columns: 1fr; }
}

.wwo-d-audience-card							{	padding: clamp(1.5rem, 3vw, 2.25rem);
													background: var(--color-ink-2);
													border-top: 3px solid var(--d-accent);

	.wwo-d-audience-title						{	margin: 0 0 0.65em;
													font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
													line-height: 1.15; letter-spacing: -0.01em; color: var(--color-paper);
	}

	.wwo-d-audience-body						{	margin: 0;
													font-size: var(--fs-4); line-height: 1.55; color: var(--color-paper-mute);
	}
}


/* Related offerings use the shared .cfu-offerings component (global.css). */


/* ─── Mobile (shared) ────────────────────────────────────── */

@media screen and (max-width: 650px)			{

	.wwo-d-actions								{	flex-direction: column; align-items: stretch;

		.btn									{	width: 100%; justify-content: center; }
	}
}