/**
 * Generic light-background page hero — two variants, confirmed directly
 * from Design Refrance: `.ct-hero` (Careers/Contact — centered, both
 * borders, own side padding) and `.doc-hero` (Disclaimer/Contributor
 * Guidelines — left-aligned, bottom border only, no side padding — the
 * calling template's own shell supplies that instead).
 */

.content-hero {
	border-bottom: 1px solid var(--color-line);
}

.content-hero--center {
	padding: 44px 56px 36px;
	border-top: 1px solid var(--color-line);
	text-align: center;
}

.content-hero--left {
	padding: 44px 0 34px;
	margin-bottom: 40px;
}

.content-hero .ch-kick {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	padding-bottom: 14px;
	border-bottom: 2px solid var(--color-line);
	margin-bottom: 24px;
	display: inline-block;
}

/* Disclaimer/Contributor Guidelines' title (72px) reads as cramped with
   the reference's own literal 24px/18px gaps above/below it — widened on
   request, a disclosed deliberate deviation from the reference's literal
   value (same kind of call already made for this page's H2/H3 size).
   Scoped to --left only so Careers/Contact's --center kicker is untouched. */
.content-hero--left .ch-kick {
	margin-bottom: 32px;
}

.content-hero .ch-title {
	font-family: var(--font-secondary);
	font-weight: 900;
	line-height: .98;
	letter-spacing: -2px;
	color: var(--color-ink);
	/* Without this, the stock WordPress boilerplate `h1 { margin: 0.67em 0; }`
	   still present in style.css (never fully stripped from the original _s
	   scaffold) wins by specificity and silently adds ~51px above AND below
	   the title — confirmed via computed-style inspection showing exactly
	   0.67em of the 76px font-size. Design Refrance has no such margin. */
	margin: 0;
}

.content-hero--center .ch-title {
	font-size: 76px;
}

.content-hero--left .ch-title {
	font-size: 72px;
}

.content-hero--center .ch-sub {
	font-family: var(--font-primary);
	font-size: 17px;
	color: var(--color-ink-mid);
	margin: 18px auto 0;
	max-width: 620px;
	line-height: 1.6;
}

.content-hero--left .ch-sub {
	font-family: var(--font-secondary);
	font-style: italic;
	font-size: 20px;
	color: var(--color-ink-mid);
	/* Widened from the reference's literal 18px alongside .ch-kick's
	   margin-bottom above — same "more breathing room around the title"
	   request, disclosed deviation. */
	margin-top: 28px;
	/* Same stock-boilerplate bug as .ch-title above (`p { margin-bottom:
	   1.5em; }` still in style.css, never fully stripped from the
	   original _s scaffold) — at this element's own 20px font-size, that's
	   an unwanted 30px tacked onto the intended 26px gap to the meta row
	   below (.ch-meta's own margin-top), confirmed via computed-style
	   inspection. The --center variant above already avoided this by
	   using the `margin` shorthand (which zeroes bottom); this one only
	   set margin-top, missing it. */
	margin-bottom: 0;
	/* Design Refrance's own value here is 640px — a deliberately short
	   line-length for the italic subhead. Widened on request (looked
	   narrow next to the much wider paragraph column below it); a
	   disclosed, deliberate deviation from the reference's literal value. */
	max-width: 820px;
	line-height: 1.4;
}

/* Matches Design Refrance's `.doc-meta` (confirmed actually used in the
   richer "Disclaimer (Standalone)" reference — Last updated / Applies to
   / Governing law, each separated by a thin vertical divider). */
.ch-meta {
	display: flex;
	gap: 24px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 26px;
}

.ch-meta-m {
	font-size: 12px;
	letter-spacing: .4px;
	color: var(--color-ink-soft);
}

.ch-meta-m b {
	color: var(--color-ink);
	font-weight: 700;
}

.ch-meta-dv {
	width: 1px;
	height: 14px;
	background: var(--color-line-mid);
}

@media (max-width: 768px) {
	.content-hero--center {
		padding: 28px 16px 24px;
	}

	.content-hero--left {
		padding: 28px 0 22px;
		margin-bottom: 26px;
	}

	.content-hero .ch-title {
		font-size: 44px;
		letter-spacing: -1px;
	}

	.content-hero--center .ch-sub,
	.content-hero--left .ch-sub {
		font-size: 17px;
	}
}