.zerodigital-hero-subpage {
	padding: clamp(var(--wp--preset--spacing--lg, 2rem), 4vw, var(--wp--preset--spacing--2xl, 3.5rem)) var(--zd-section-gutter, var(--wp--preset--spacing--md, 1.5rem));
	background-color: var(--wp--preset--color--background, #fff);
}

.zerodigital-hero-subpage__breadcrumb {
	/* Same width cap as the copy inner below, so the breadcrumb's left edge
	 * lines up with the heading instead of sitting in a narrower centred box. */
	max-width: var(--zd-content-max, calc(var(--wp--style--global--wide-size, 1600px) - 2 * var(--wp--preset--spacing--md, 1.5rem)));
	margin: 0 auto var(--wp--preset--spacing--sm, 1rem);
	/* A breadcrumb is a path — an index into the site — so it belongs in the
	 * utility face with the rest of the spec layer. */
	font-family: var(--zd-mono);
	font-size: var(--zd-spec-size, 0.72rem);
	text-transform: uppercase;
	letter-spacing: var(--zd-spec-tracking, 0.14em);
}

.zerodigital-hero-subpage__inner {
	display: grid;
	gap: var(--wp--preset--spacing--lg, 2rem);
	align-items: center;
	max-width: var(--zd-content-max, calc(var(--wp--style--global--wide-size, 1600px) - 2 * var(--wp--preset--spacing--md, 1.5rem)));
	margin-inline: auto;
	grid-template-columns: 1fr;
}

.zerodigital-hero-subpage__inner:has(.zerodigital-hero-subpage__media) {
	grid-template-columns: 1.2fr 1fr;
}

/* ---- Height ------------------------------------------------------------
 * Unlike the Home Hero, this one has no min-height of its own — it is as tall
 * as its copy plus padding, which is right for most interior pages and is what
 * 'default' must keep doing exactly. So the growth rules are scoped away from
 * it: a subpage hero that never asked for a height keeps today's box.
 *
 * 'plus' gets its own step rather than the Home Hero's. A subpage hero runs
 * around 16rem; sending it straight to 36rem is not a step up, it is a
 * different block.
 *
 * --zd-hero-viewport is the theme's — the screen minus the header, so 'max'
 * ends at the fold rather than one header-height below it. */
.zerodigital-hero-subpage[data-height="plus"] {
	--zd-hero-min-h: clamp(22rem, 48vh, 32rem);
}

.zerodigital-hero-subpage[data-height="max"] {
	--zd-hero-min-h: var(--zd-hero-viewport, calc(100vh - var(--zd-header-height, 4.75rem)));
}

/* Flex column only once a height is asked for. The section is otherwise a
 * plain block box, and switching every existing subpage hero to flex to serve
 * an option none of them use is a change with no upside and a long tail. */
.zerodigital-hero-subpage:not([data-height="default"]) {
	display: flex;
	flex-direction: column;
	min-height: var(--zd-hero-min-h);
}

/* Both children cap themselves with max-width and centre with an auto inline
 * margin, which is what a block box wants. As a FLEX item that same auto margin
 * beats stretch and shrink-wraps the element to its content — the copy column
 * collapsed to 130px of a 474px hero, and the breadcrumb slid to the middle.
 * Restating the width makes the auto margins centre a full-width box that its
 * own max-width still caps, which is what they did as block boxes. */
.zerodigital-hero-subpage:not([data-height="default"]) .zerodigital-hero-subpage__breadcrumb,
.zerodigital-hero-subpage:not([data-height="default"]) .zerodigital-hero-subpage__inner {
	width: 100%;
}

/* The breadcrumb stays at the top where a path belongs; the copy takes the
 * space that opened up beneath it and centres in that, so the section grows
 * around the content rather than pushing it down. */
.zerodigital-hero-subpage:not([data-height="default"]) .zerodigital-hero-subpage__inner {
	flex: 1;
	align-content: center;
}

/* data-align-y sets align-items below, which positions items WITHIN the grid
 * row — it cannot move the row itself inside a box that is now taller than it.
 * align-content is the property that can, so a grown hero sets both to the
 * same value and the control keeps meaning one thing. */
.zerodigital-hero-subpage:not([data-height="default"])[data-align-y="top"] .zerodigital-hero-subpage__inner {
	align-content: start;
}

.zerodigital-hero-subpage:not([data-height="default"])[data-align-y="bottom"] .zerodigital-hero-subpage__inner {
	align-content: end;
}

/* ---- Content alignment (Section 6b) ------------------------------------
 * Y aligns the copy against the (optional) side image; X aligns the copy text
 * and its button. Defaults (left / middle) reproduce the original layout. */
.zerodigital-hero-subpage[data-align-y="top"] .zerodigital-hero-subpage__inner {
	align-items: start;
}

.zerodigital-hero-subpage[data-align-y="bottom"] .zerodigital-hero-subpage__inner {
	align-items: end;
}

/* Centred copy earns a wider measure and its own cap. Without one the heading
 * runs the full wide-size while the 45ch subtext sits in a narrow column
 * beneath it — the copy reads as squashed into the middle of the section
 * rather than composed. Capping the copy and widening the subtext lets the two
 * share a sensible width. Left/right alignment keeps the tighter default,
 * which is correct alongside the optional media column. */
.zerodigital-hero-subpage[data-align-x="center"] .zerodigital-hero-subpage__copy {
	text-align: center;
	max-width: 60rem;
	margin-inline: auto;
}

.zerodigital-hero-subpage[data-align-x="center"] .zerodigital-hero-subpage__subtext {
	max-width: 80ch;
	margin-inline: auto;
}

.zerodigital-hero-subpage[data-align-x="right"] .zerodigital-hero-subpage__copy {
	text-align: right;
}

.zerodigital-hero-subpage[data-align-x="right"] .zerodigital-hero-subpage__subtext {
	margin-inline-start: auto;
}

.zerodigital-hero-subpage__heading {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem);
	line-height: 1.08;
	text-wrap: balance;
	margin: 0 0 var(--wp--preset--spacing--xs, 0.75rem);
}

.zerodigital-hero-subpage__subtext {
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 var(--wp--preset--spacing--md, 1.25rem);
	max-width: 45ch;
}

/* ---- Feature pills ------------------------------------------------------
 * Hairline tags in the utility face, matching the Home Hero's exactly —
 * --zd-tag-radius rather than a 999px chip, which is the shape the trust strip
 * and the team credentials were both deliberately moved off. See the Home
 * Hero's copy of this rule for why the tag has its own shape role rather than
 * borrowing the button's.
 *
 * Uncapped: short tags with no measure to respect, bounded by the copy column
 * they sit in. */
.zerodigital-hero-subpage__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2xs, 0.5rem);
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--md, 1.25rem);
	padding: 0;
}

.zerodigital-hero-subpage__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.7rem;
	border: var(--zd-border, 1px solid #e3e8ee);
	border-radius: var(--zd-tag-radius, var(--wp--custom--radius--sm, 0.5rem));
	background: transparent;
	font-family: var(--zd-mono);
	font-size: var(--zd-spec-size, 0.72rem);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--zd-spec-tracking, 0.14em);
	color: var(--wp--preset--color--muted, #5b6572);
}

/* currentColor rather than the accent, which stays reserved for the spec tick
 * and genuine state. */
.zerodigital-hero-subpage__pill .zd-icon {
	flex: none;
	inline-size: 0.9rem;
	block-size: 0.9rem;
}

/* A flex row, so the copy's inherited text-align can't move it — the same
 * exception the Home Hero's CTA row and trust strip need. Left needs no rule:
 * unlike the Home Hero's copy-only box, this copy column is never centred by
 * default, so flex-start already is the base state. */
.zerodigital-hero-subpage[data-align-x="center"] .zerodigital-hero-subpage__pills {
	justify-content: center;
}

.zerodigital-hero-subpage[data-align-x="right"] .zerodigital-hero-subpage__pills {
	justify-content: flex-end;
}

/* --zd-border is a single :root token, not re-tokenised for dark sections, so a
 * tag on a dark background colour would keep a near-white hairline at full
 * opacity — legible, but louder than the hairline it is meant to be. The
 * theme already flips the label text; the colour here carries the icon, which
 * draws on currentColor. */
.zerodigital-hero-subpage.zd-bg-dark .zerodigital-hero-subpage__pill {
	border-color: rgba(255, 255, 255, 0.28);
	color: rgba(255, 255, 255, 0.82);
}

.zerodigital-hero-subpage__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--zd-btn-min-h, 2.875rem);
	padding: var(--wp--preset--spacing--xs, 0.75rem) var(--wp--preset--spacing--md, 1.5rem);
	border-radius: var(--zd-btn-radius, var(--wp--custom--radius--md, 0.5rem));
	background: var(--wp--preset--color--primary, #1b3a5c);
	color: var(--wp--preset--color--background, #fff);
	text-decoration: none;
	font-weight: 600;
}

/* Feature media (both heroes and About) shares one treatment: the large radius
 * and a hairline, no shadow. One device, not two — the hairline is what holds
 * the edge where a bright photo meets a near-white page, and a drop shadow on
 * top of it was belt-and-braces that read as dated. */
.zerodigital-hero-subpage__media img {
	width: 100%;
	height: auto;
	border-radius: var(--zd-media-radius, var(--wp--custom--radius--lg, 0.75rem));
	border: var(--zd-border, 1px solid #e4e6e9);
	display: block;
}

@media (max-width: 782px) {
	.zerodigital-hero-subpage__inner:has(.zerodigital-hero-subpage__media) {
		grid-template-columns: 1fr;
	}
}

/* --- default skin --- */
.zerodigital-hero-subpage {
	background-color: var(--wp--preset--color--surface, #f5f7fa);
	border-bottom: var(--zd-border, 1px solid #e3e8ee);
}

.zerodigital-hero-subpage__breadcrumb {
	color: var(--wp--preset--color--muted, #5b6572);
	font-size: 0.85rem;
}

.zerodigital-hero-subpage__subtext {
	color: var(--wp--preset--color--muted, #5b6572);
}

.zerodigital-hero-subpage__cta {
	box-shadow: var(--zd-shadow-sm, 0 1px 3px rgba(16, 24, 40, 0.1));
	transition: background-color var(--zd-ease, 180ms ease), box-shadow var(--zd-ease, 180ms ease), transform var(--zd-ease, 180ms ease);
}

.zerodigital-hero-subpage__cta:hover {
	background: var(--wp--preset--color--secondary, #0a3339);
	/* Keep the label light — the global link:hover would otherwise tint it
	 * toward the accent, low-contrast on this dark hover fill. */
	color: var(--wp--preset--color--background, #fff);
	box-shadow: var(--zd-shadow-md, 0 4px 8px -2px rgba(16, 24, 40, 0.1));
	transform: translateY(-1px);
}

/* On a dark solid colour — usually the brand's primary or a shade of it — a
 * primary-filled button disappears. Invert it, as the CTA Banner does. The
 * breadcrumb is links, which the theme's text flip does not reach. */
.zerodigital-hero-subpage.zd-bg-dark .zerodigital-hero-subpage__cta {
	background: var(--wp--preset--color--background, #fff);
	color: var(--wp--preset--color--primary, #1b3a5c);
}

.zerodigital-hero-subpage.zd-bg-dark .zerodigital-hero-subpage__cta:hover {
	background: color-mix(in srgb, var(--wp--preset--color--background, #fff) 88%, var(--wp--preset--color--foreground, #16181b));
	color: var(--wp--preset--color--primary, #1b3a5c);
}

.zerodigital-hero-subpage.zd-bg-dark .zerodigital-hero-subpage__breadcrumb,
.zerodigital-hero-subpage.zd-bg-dark .zerodigital-hero-subpage__breadcrumb a {
	color: rgba(255, 255, 255, 0.82);
}


/* The accent lead-in bar is retired here too — the breadcrumb above already
 * marks the page's place, and the accent is reserved for the spec tick and
 * genuine state. That also removes the alignment gymnastics the bar needed:
 * it was a block box with a fixed width, so text-align couldn't move it and
 * each X alignment had to nudge its margins by hand. */
.zerodigital-hero-subpage__heading {
	letter-spacing: -0.02em;
}

/* Entrance order. The h1 is excluded for the same reason as the Home Hero's — it
 * is the page's Largest Contentful Paint candidate on most interior pages, and
 * an element at opacity 0 does not count as painted. Until 0.30.0 this block had
 * no entrance at all, so every interior page opened flat while its sections
 * animated below it. The animation itself is in the theme, on `.zd-hero-rise`. */
.zerodigital-hero-subpage__pills {
	--zd-motion-i: 0;
}

.zerodigital-hero-subpage__subtext {
	--zd-motion-i: 1;
}

.zerodigital-hero-subpage__cta {
	--zd-motion-i: 2;
}