/* ─── Who We Are — staff profile pages ─────────────────── */

/* Shared template for the per-member profile pages. One layout, one dataset
   each. Editorial full-bleed bands matching the What We Offer detail pages.
   Per-person accent is set on the shell via --p-accent (optional 'accent' in
   the JSON maps to a class-type colour); defaults to brand red. */


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

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

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


/* ─── Display type (section overrides on shared .cfu-display) */

/* Base + --statement/--section/--on-brand live in global.css (.cfu-display).
   Only the per-person accent <b> and the slightly tighter hero margin differ. */

.wwa-p-display									{

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

	&.wwa-p-display--hero						{	margin-bottom: 0.5em; }
}

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

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

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

.wwa-p-actions									{	display: flex; flex-wrap: wrap; gap: 0.65em; margin: 0; }


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

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


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

.wwa-p-hero										{	position: relative;
													display: flex;
													min-height: min(78vh, 820px);
													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); }

	.wwa-p-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);
	}

	.wwa-p-hero-eyebrow							{	color: var(--p-accent); }

	.wwa-p-hero-media							{	margin: 0; min-height: 320px;

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

	.wwa-p-hero-media--placeholder				{	display: flex; align-items: center; justify-content: center;
													background: linear-gradient(135deg, var(--color-ink-1), var(--color-ink-2));

		span									{	font-family: var(--font-display); font-size: clamp(5rem, 18vw, 12rem);
													font-weight: 700; color: var(--color-paper-quiet); line-height: 1;
		}
	}

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

		.wwa-p-hero-media						{	order: -1; min-height: 46vh; }
	}
}

.wwa-p-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);

	.wwa-p-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);
	}

	.wwa-p-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 ────────────────────────────────────── */

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

	.wwa-p-intro-inner							{	max-width: var(--layout-wide); margin-inline: auto;
													display: grid; grid-template-columns: 0.9fr 1.1fr;
													gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
	}

	.wwa-p-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)		{

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


/* ─── Focus / what I coach (grid) ────────────────────────── */

.wwa-p-focus									{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													background: var(--color-ink-0);

	.wwa-p-focus-inner							{	max-width: var(--layout-wide); margin-inline: auto; }
}

.wwa-p-focus-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; }
}

.wwa-p-focus-item								{	border-top: 3px solid var(--p-accent); padding-top: 1.5em;

	.wwa-p-focus-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);
	}

	.wwa-p-focus-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);
	}

	.wwa-p-focus-body							{	margin: 0;
													font-size: var(--fs-5); line-height: 1.55; color: var(--color-paper-mute);
	}
}


/* ─── Credentials & experience (brand band) ──────────────── */

.wwa-p-creds									{	background: var(--color-brand); color: var(--color-ink-0);

	.wwa-p-band-inner							{	padding: clamp(3.5rem, 8vw, 6rem) var(--shell-pad);
													max-width: var(--layout-wide); margin-inline: auto;
	}

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

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

	.wwa-p-creds-lede							{	margin: 1.25em 0 0;
													max-width: 58ch;
													font-size: var(--fs-4); line-height: 1.55; color: rgba(5, 6, 6, 0.82);
	}
}

.wwa-p-creds-stats								{	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
													gap: clamp(1.5rem, 3vw, 2.5rem); margin: 0 0 2.5em;

	> div										{	border-top: 1px solid rgba(5, 6, 6, 0.25); padding-top: 1.25em; }

	.wwa-p-creds-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(--color-ink-0);
	}

	.wwa-p-creds-label							{	margin: 0;
													font-size: var(--fs-5); line-height: 1.5; color: rgba(5, 6, 6, 0.82);
	}

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

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

.wwa-p-creds-points								{	columns: 2; column-gap: 2.5em; max-width: 60em;

	li											{	break-inside: avoid; font-size: 12px; }

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


/* ─── Pull-quote ─────────────────────────────────────────── */

.wwa-p-quote									{	padding: clamp(4rem, 10vw, 7rem) var(--shell-pad);
													background: var(--color-ink-0);

	.wwa-p-quote-inner							{	max-width: 1100px; margin-inline: auto; }

	.wwa-p-quote-text							{	margin: 0;
													font-family: var(--font-display); font-size: clamp(1.75rem, 4.5vw, 3.5rem);
													font-weight: 500; line-height: 1.05; letter-spacing: var(--track-display);
													color: var(--color-paper);

		&::first-letter							{	color: var(--p-accent); }
	}

	.wwa-p-quote-cite							{	display: block; margin-top: 1.25em;
													font-family: var(--font-mono); font-size: 11px; font-style: normal;
													letter-spacing: var(--track-mono); text-transform: uppercase;
													color: var(--p-accent);
	}
}


/* ─── Back-to-team band ──────────────────────────────────── */

.wwa-p-back										{	padding: clamp(2.5rem, 5vw, 4rem) var(--shell-pad);
													background: var(--color-ink-1);
													border-top: 1px solid var(--color-rule);

	.wwa-p-back-inner							{	max-width: var(--layout-wide); margin-inline: auto;
													display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em 1.5em;
	}

	.eyebrow									{	margin: 0; color: var(--color-paper-low); }

	.wwa-p-back-link							{	display: inline-flex; align-items: center; gap: 0.5em;
													font-family: var(--font-display); font-size: clamp(1.5rem, 3.5vw, 2.5rem);
													font-weight: 600; letter-spacing: var(--track-display);
													text-decoration: none; color: var(--color-paper);
													transition: color var(--dur-base) var(--ease-out);

		.wwa-p-back-arrow						{	transition: transform var(--dur-base) var(--ease-out); }

		&:hover, &:focus-visible			{	color: var(--p-accent); outline: none;

			.wwa-p-back-arrow				{	transform: translateX(0.4em); }
		}
	}
}


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

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

	.wwa-p-actions								{	flex-direction: column; align-items: stretch;

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