/* Success stories hero — patterns/success-stories-hero.php.
 *
 * No Figma node exists for this page (#944, #945 — see the pattern's own
 * docblock): every value below either matches patterns/newsroom-hero.php's
 * own values (its "no Figma node — matched newsroom-hero.php" is called out
 * per rule) or is a plain design-system rung with no comp behind it. A single
 * left-aligned copy column on the page ground: H1, lede, body paragraph with
 * two inline links. No media layer — same as newsroom-hero, no artwork or
 * scrim to carry. */

.infinitus-section--success-stories-hero {
	/* No Figma node — matched newsroom-hero.php's own values. The theme header
	   is position:fixed, so the hero's top padding has to clear it before the
	   section rhythm starts; bottom is section-md, the page's own rhythm
	   between the hero and the section under it. */
	padding-block-start: calc(var(--navbar-height) + var(--wp--preset--spacing--section-md));
	padding-block-end: var(--wp--preset--spacing--section-md);
}

.infinitus-section--success-stories-hero .container {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	/* No Figma node — matched newsroom-hero.php's own H1-to-lede gap
	   (Spacing/24). One gap for the whole column: title, lede and body all
	   sit 24px apart, same as the model pattern's single-gap column. */
	gap: var(--wp--preset--spacing--sp-6);
	text-align: left;
}

/* The group carries only core's `is-layout-flow` class — this column's flex
   behavior is this file, not a block `layout` attribute — so core's flow
   block-gap fallback (`:where(.is-layout-flow) > * { margin-block: 24px 0 }`)
   still stacks a margin on top of the `gap` above. Zero it so `gap` alone sets
   the rhythm. Same trap as newsroom-hero.css / resources-hub-hero.css. */
.infinitus-section--success-stories-hero .container > * {
	margin-block: 0;
}

.success-stories-hero__title {
	/* No Figma node — matched newsroom-hero.php's own H1: plain Light 72px,
	   no text-transform. Per direct feedback (2026-09-03) the headline is
	   sentence-case in markup ("Success stories"), departing from
	   production's own all-caps stored copy — see the pattern's docblock. */
	color: var(--wp--preset--color--gray-900);
	font-size: var(--fs-h1);
	font-weight: 300;
	line-height: var(--lh-h1);
	margin: 0;
}

.success-stories-hero__lede {
	/* No Figma node — matched newsroom-hero.php's own lede rung exactly
	   (--fs-body-xl / gray-600). No max-width: the model's own 923px measure
	   is that comp's own line-length target and has no equivalent here, so
	   the lede is left to wrap at the container's own width rather than
	   inventing a number. */
	color: var(--wp--preset--color--gray-600);
	font-size: var(--fs-body-xl);
	line-height: var(--lh-body-xl);
}

.success-stories-hero__body {
	/* ⚑ DESIGN QA — judgment call, no comp to cite. data-hero.md calls this
	   paragraph "regular size" against the lede's "large paragraph": one rung
	   down the same ladder from the lede's --fs-body-xl, i.e. --fs-body-lg.
	   Same colour as the lede — nothing suggests it should read lighter. */
	color: var(--wp--preset--color--gray-600);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
}

/* The body paragraph's two inline links. Production hardcoded
   style="color:#0B94F5" plus an ACF-only `link-default` class on the second
   link (see the pattern's docblock); #0B94F5 is this theme's own
   --wp--preset--color--cerulean-400, applied here as a token instead so the
   colour stays editable design-system-wide rather than baked into content.
   `strong` needs no rule — it inherits the paragraph's own colour and only
   adds weight, which is the browser default for the tag. */
.success-stories-hero__body a {
	color: var(--wp--preset--color--cerulean-400);
}

/* `.underline` carries the underline itself — nothing in the theme's base
   link styles paints one on inline body copy, so the class still has to do
   that work, same as the "underline" token elsewhere in production's own
   content model. */
.success-stories-hero__body a.underline {
	text-decoration: underline;
}

.success-stories-hero__body a:hover,
.success-stories-hero__body a:focus-visible {
	color: var(--wp--preset--color--cerulean-325);
}

.success-stories-hero__body a:focus-visible {
	outline: 2px solid var(--wp--preset--color--cerulean-400);
	outline-offset: 2px;
}