/*
 * About Page — Story hero, founder narrative, craft split, values, team, CTA.
 *
 * Layout flow (top → bottom):
 *   full-bleed hero cover → centered story (max 680px) → image-left/text-right
 *   craft split → 3-col values grid → team grid (bg-surface) → closing CTA.
 *
 * Team avatars use border-radius: 50% — intentional exception to the square-
 * avatar convention used elsewhere (these are portraits, not initials marks).
 *
 * Tokens read:
 *   color.terracotta.500 / 300     — craft img placeholder, team avatar 1
 *   color.green.700 / 300          — hero img placeholder, team avatar 2
 *   color.neutral.400              — team avatar 3
 *   semantic.color.text.primary    — headings, craft text, values, team names
 *   semantic.color.text.muted      — story body, craft body, value body, roles
 *   semantic.color.text.inverse    — hero kicker + heading
 *   semantic.color.bg.surface      — team section + CTA section bg
 *   semantic.typography.display    — hero heading, story lead, craft heading,
 *                                    values heading/titles, team names (Cormorant)
 *   semantic.typography.body       — hero kicker, story body, craft kicker,
 *                                    craft text, team roles (Jost)
 *   space.1 – 11
 */

/* ── Hero ─────────────────────────────────────────────────────────────── */

.wpdl-about__hero.wp-block-cover {
	min-block-size: 23.75rem;
	margin-block: 0;
}

.wpdl-about__hero.wp-block-cover .wp-block-cover__background {
	background-color: rgb(20 22 16 / 28%);
	opacity: 1;
}

.wpdl-about__hero.wp-block-cover .wp-block-cover__image-background {
	background-color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-about__hero-content.wp-block-group {
	margin-block: 0;
}

.wpdl-about__hero-kicker {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--inverse);
	margin-block: 0 var(--wp--custom--space--4);
}

.wpdl-about__hero-heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.375rem, 0.6rem + 3.39vw, 2.75rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--inverse);
	margin-block: 0;
	line-height: 1.15;
}

/* ── Founder story ────────────────────────────────────────────────────── */

.wpdl-about__story.wp-block-group {
	max-inline-size: 42.5rem;
	margin-inline: auto;
	padding-block: var(--wp--custom--space--10);
	margin-block: 0;
}

.wpdl-about__story-lead {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(0.9375rem, 0.65rem + 1.34vw, 1.5rem);
	font-weight: 500;
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--7);
}

.wpdl-about__story-body {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.8;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
}

/* ── Craft split ──────────────────────────────────────────────────────── */

.wpdl-about__craft.wp-block-group {
	margin-block: 0 var(--wp--custom--space--10);
}

.wpdl-about__craft-inner.wp-block-group {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--wp--custom--space--9);
	align-items: center;
	margin-block: 0;
}

.wpdl-about__craft-img.wp-block-image {
	min-block-size: 22.5rem;
	overflow: hidden;
	margin-block: 0;
	background-color: var(--wp--custom--semantic--color--accent--primary);
}

.wpdl-about__craft-img.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wpdl-about__craft-body.wp-block-group {
	margin-block: 0;
}

.wpdl-about__craft-kicker {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--accent--primary);
	margin-block: 0 var(--wp--custom--space--4);
}

.wpdl-about__craft-heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.0625rem, 0.75rem + 1.34vw, 1.75rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--5);
}

.wpdl-about__craft-text {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.8125rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
}

/* ── Values ───────────────────────────────────────────────────────────── */

.wpdl-about__values.wp-block-group {
	padding-block: var(--wp--custom--space--9);
	margin-block: 0;
}

.wpdl-about__values-heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.125rem, 0.85rem + 1.19vw, 1.625rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--8);
}

.wpdl-about__values-grid.wp-block-group {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--custom--space--9);
	margin-block: 0;
}

.wpdl-about__value-item.wp-block-group {
	text-align: center;
	margin-block: 0;
}

.wpdl-about__value-title.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1rem, 0.8rem + 0.89vw, 1.1875rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--4);
}

.wpdl-about__value-body {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.75rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
}

/* ── Team ─────────────────────────────────────────────────────────────── */

.wpdl-about__team.wp-block-group {
	background-color: var(--wp--custom--semantic--color--surface--primary);
	padding-block: var(--wp--custom--space--9);
	margin-block: 0;
}

.wpdl-about__team-heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.125rem, 0.85rem + 1.19vw, 1.625rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--8);
}

.wpdl-about__team-grid.wp-block-group {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--custom--space--7);
	margin-block: 0;
}

.wpdl-about__team-member.wp-block-group {
	align-items: center;
	gap: var(--wp--custom--space--4);
	margin-block: 0;
}

.wpdl-about__team-avatar.wp-block-group {
	min-inline-size: 5rem;
	min-block-size: 5rem;
	flex: 0 0 5rem;
	border-radius: 50%;
	margin-block: 0;
}

/* Placeholder colours for team avatars */
.wpdl-about__team-grid > .wpdl-about__team-member:nth-child(1) .wpdl-about__team-avatar.wp-block-group { background-color: var(--wp--custom--semantic--color--accent--primary); }
.wpdl-about__team-grid > .wpdl-about__team-member:nth-child(2) .wpdl-about__team-avatar.wp-block-group { background-color: var(--wp--custom--semantic--color--brand--primary); }
.wpdl-about__team-grid > .wpdl-about__team-member:nth-child(3) .wpdl-about__team-avatar.wp-block-group { background-color: var(--wp--custom--semantic--color--text--muted); }

.wpdl-about__team-name {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0;
}

.wpdl-about__team-role {
	font-family: var(--wp--custom--semantic--typography--body--font-family);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--muted);
	margin-block: 0;
}

/* ── Closing CTA ──────────────────────────────────────────────────────── */

.wpdl-about__cta.wp-block-group {
	background-color: var(--wp--custom--semantic--color--surface--primary);
	padding-block: var(--wp--custom--space--9);
	text-align: center;
	margin-block: 0;
}

.wpdl-about__cta-heading.wp-block-heading {
	font-family: var(--wp--custom--semantic--typography--display--font-family);
	font-size: clamp(1.125rem, 0.8rem + 1.49vw, 1.75rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	margin-block: 0 var(--wp--custom--space--6);
}

/* ── Tablet (< 64em / 1024px) ────────────────────────────────────────── */

@media (width < 64em) {
	.wpdl-about__hero.wp-block-cover {
		min-block-size: 17.5rem;
	}

	.wpdl-about__craft-inner.wp-block-group {
		grid-template-columns: 1fr;
	}

	.wpdl-about__craft-img.wp-block-image {
		min-block-size: 13.75rem;
	}

	.wpdl-about__values-grid.wp-block-group {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--custom--space--7);
	}

	.wpdl-about__team-grid.wp-block-group {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Mobile (< 40em / 640px) ─────────────────────────────────────────── */

@media (width < 40em) {
	.wpdl-about__hero.wp-block-cover {
		min-block-size: 13.75rem;
	}

	.wpdl-about__craft-img.wp-block-image {
		min-block-size: 10rem;
	}

	.wpdl-about__team-grid.wp-block-group {
		grid-template-columns: 1fr;
	}

	.wpdl-about__story.wp-block-group {
		padding-block: var(--wp--custom--space--8);
	}
}