/* =============================================================================
 * CMP Page Header widget (cmp-w-cmp-page-header)
 * Inner-page hero band: build-plate + grain background, optional breadcrumbs,
 * eyebrow + H1, optional intro lead, and an optional right-aligned aside.
 * Ported from PageHeader.tsx. Tokens come from the global tokens.css :root vars;
 * cmp-build-plate / cmp-grain / cmp-eyebrow / cmp-display-l / cmp-lead / cmp-spec
 * utilities come from the global main.css. cmp-page-header__* are widget-local.
 * Mobile-first; breakpoints at 768px and 1024px.
 * ========================================================================== */

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.cmp-page-header {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--border-hair);
}

/* The grid background + grain overlay are supplied by the global
 * .cmp-build-plate / .cmp-grain utilities toggled in render. These modifier
 * hooks stay for selector targeting / overrides. */
.cmp-page-header--plate {
	background-color: var(--canvas);
}

.cmp-page-header--grain::after {
	z-index: 0;
}

/* ── Inner container ─────────────────────────────────────────────────────── */
.cmp-page-header__inner {
	position: relative;
	z-index: 1;
	/* Default offset (fixed-header clearance) ≈ pt-28 pb-12; the responsive
	 * inner_padding control overrides this inline per device. */
	padding-block: 7rem 3rem;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.cmp-page-header__crumbs {
	margin-bottom: 1.75rem;
	color: var(--muted);
}

.cmp-page-header__crumbs-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.cmp-page-header__crumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--muted);
}

/* spec-sheet "/" divider between crumbs */
.cmp-page-header__crumb + .cmp-page-header__crumb::before {
	content: "/";
	color: var(--border-strong);
}

.cmp-page-header__crumb a {
	color: var(--ink);
	text-decoration: none;
	transition: color var(--dur-fast, 0.18s) var(--ease-standard, ease);
}

.cmp-page-header__crumb a:hover,
.cmp-page-header__crumb a:focus-visible {
	color: var(--amber-text);
}

.cmp-page-header__crumb [aria-current="page"] {
	color: var(--ink);
}

/* ── Grid (single column → 12-col asymmetric at lg) ──────────────────────── */
.cmp-page-header__grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: end;
	gap: 1.5rem 2rem;
}

/* ── Head column ─────────────────────────────────────────────────────────── */
.cmp-page-header__head {
	min-width: 0;
}

.cmp-page-header__eyebrow {
	margin-bottom: 1rem;
}

.cmp-page-header__title {
	max-width: 20ch;
	margin: 0;
	color: var(--ink);
}

/* keep max-width honored when the head column is centered/right aligned */
.cmp-page-header__head {
	text-align: left;
}

.cmp-page-header__title-mark {
	color: var(--amber);
}

.cmp-page-header__intro {
	margin-top: 1.25rem;
	margin-bottom: 0;
	color: var(--body);
}

/* ── Aside column ────────────────────────────────────────────────────────── */
.cmp-page-header__aside {
	min-width: 0;
	text-align: right;
}

.cmp-page-header__aside-label {
	display: block;
	margin: 0 0 0.75rem;
	color: var(--muted);
}

.cmp-page-header__specs {
	margin: 0;
	display: grid;
	gap: 0.75rem;
}

.cmp-page-header__spec-row {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.cmp-page-header__spec-label {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.cmp-page-header__spec-value {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--ink);
}

.cmp-page-header__aside-figure {
	margin: 0;
}

.cmp-page-header__aside-figure img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	border-radius: var(--r-md, 16px);
}

.cmp-page-header__aside-html {
	color: var(--body);
}

/* ── Children / extra-content slot ───────────────────────────────────────── */
.cmp-page-header__children {
	margin-top: var(--space-6, 32px);
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
	.cmp-page-header__grid {
		gap: 1.5rem 2.5rem;
	}
}

/* ── Desktop: 12-col asymmetric (8 / 4) ──────────────────────────────────── */
@media (min-width: 1024px) {
	.cmp-page-header__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.cmp-page-header__head {
		grid-column: span 8;
	}

	.cmp-page-header__aside {
		grid-column: span 4;
		justify-self: end;
	}
}