/* Success stories — Featured case study. patterns/success-stories-featured.php.
 *
 * REVISED PER DIRECT FEEDBACK (2026-09-03) — see the pattern's own docblock.
 * Replaces the old full-bleed dark-band + scrim + absolutely-positioned photo
 * (clinical-evidence-featured's idiom) with a contained, light-ground media +
 * copy row, matching production's own layout. Geometry (498/604 column
 * split, 137px gap, sm radius) is media-copy-row.css's own measured values,
 * reused rather than re-guessed; button geometry/colour is
 * success-stories-grid.css's own two-CTA pair, reused verbatim so this page's
 * two CTA rows cannot drift from each other. */

.infinitus-section--success-stories-featured {
	/* No token names "gap between a standalone label and the module it
	   introduces" — sp-8 (32px), unchanged from the original build. */
	--ssf-label-gap: var(--wp--preset--spacing--sp-8);

	--ssf-media-width: 498px;
	--ssf-copy-width: 604px;
	--ssf-row-gap: 137px;
	--ssf-photo-radius: var(--wp--custom--radius--sm);

	/* Where the three photographed people sit in the frame — picked by eye
	   (2400×2000 source), unchanged from the original build. Biased above
	   vertical centre to keep headsets/faces in frame rather than the desk
	   clutter lower in the shot. */
	--ssf-media-focus-x: 58%;
	--ssf-media-focus-y: 38%;

	--ssf-eyebrow-tracking: 0.012em;
}

.infinitus-section--success-stories-featured .success-stories-featured__label-row {
	margin-block-end: var(--ssf-label-gap);
}

/* Styled as this theme's decided-once eyebrow-tag convention (Neutral 500,
   uppercase, --fs-h6) — unchanged from the original build. */
.infinitus-section--success-stories-featured .success-stories-featured__label {
	font-size: var(--fs-h6);
	font-weight: 500;
	letter-spacing: var(--ssf-eyebrow-tracking);
	line-height: var(--lh-h6);
	margin: 0;
	text-transform: uppercase;
}

/* ROW — no base flex-direction rule: default `row` puts the photo (first in
   the DOM) on the left, same as media-copy-row.css. Column widths are the
   block's own inline flex-basis; core's own
   `.wp-block-columns...>.wp-block-column[style*=flex-basis]{flex-grow:0}`
   selector consumes that, and default flex-shrink:1 on both columns lets the
   row scale down smoothly between 1024 and 1440. */
.infinitus-section--success-stories-featured .success-stories-featured__row {
	gap: var(--ssf-row-gap);
	margin-block-end: 0; /* core gives .wp-block-columns its own 1.75em bottom margin */
}

.infinitus-section--success-stories-featured .success-stories-featured__media,
.infinitus-section--success-stories-featured .success-stories-featured__copy {
	min-width: 0;
}

.infinitus-section--success-stories-featured .success-stories-featured__photo {
	margin: 0;
}

.infinitus-section--success-stories-featured .success-stories-featured__photo img {
	aspect-ratio: 498 / 440;
	border-radius: var(--ssf-photo-radius);
	display: block;
	height: auto;
	object-fit: cover;
	object-position: var(--ssf-media-focus-x) var(--ssf-media-focus-y);
	width: 100%;
}

/* COPY — owl selector for flow rhythm; the group carries no `layout`
   attribute (section-patterns.md), so blockGap is inert here. */
.infinitus-section--success-stories-featured .success-stories-featured__copy > * {
	margin-block: 0;
}

.infinitus-section--success-stories-featured .success-stories-featured__copy > * + * {
	margin-block-start: var(--wp--preset--spacing--sp-4);
}

.infinitus-section--success-stories-featured .success-stories-featured__copy > .success-stories-featured__body {
	margin-block-start: var(--wp--preset--spacing--sp-4);
}

.infinitus-section--success-stories-featured .success-stories-featured__copy > .success-stories-featured__actions {
	margin-block-start: var(--wp--preset--spacing--sp-8);
}

.infinitus-section--success-stories-featured .success-stories-featured__title {
	font-size: var(--fs-h3);
	font-weight: 300;
	letter-spacing: 0;
	line-height: var(--lh-h3);
}

/* --fs-body-xl (DS Desktop/Body Default), the section-patterns.md
   decided-once default. Colour is a palette preset on the block. */
.infinitus-section--success-stories-featured .success-stories-featured__body {
	font-size: var(--fs-body-xl);
	line-height: var(--lh-body-xl);
}

.infinitus-section--success-stories-featured .success-stories-featured__actions {
	/* core/buttons renders as flex, but the class only lands at render time
	   and is absent from the saved markup, so declare it rather than inherit
	   it. */
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sp-4);
}

/* BUTTONS — reused verbatim (geometry + colour) from
   success-stories-grid.css's own two-CTA pair: LG geometry shared with
   .btn.btn-lg, dark-fill primary + gray-900-outline secondary, pill radius.
   Kept as a page-local copy rather than a shared selector because the two
   sections' class hooks are independent — see that file's own header note on
   why button geometry lives with the section, not a shared idiom file. */
.infinitus-section--success-stories-featured .success-stories-featured__button .wp-block-button__link {
	border: var(--btn-border-width) solid var(--wp--preset--color--gray-900);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--fs-body-lg);
	font-weight: 400;
	line-height: var(--lh-body-lg);
	padding: var(--btn-padding-block-lg) var(--btn-padding-inline-lg);
	transition:
		background-color var(--wp--custom--duration--base) var(--wp--custom--easing--out),
		color var(--wp--custom--duration--base) var(--wp--custom--easing--out);
}

/* !important required, not cosmetic: WP's has-…-background-color / has-…-
   color preset classes carry !important in the global stylesheet. */
.infinitus-section--success-stories-featured .success-stories-featured__button .wp-block-button__link:hover,
.infinitus-section--success-stories-featured .success-stories-featured__button .wp-block-button__link:focus-visible {
	background-color: transparent !important;
	color: var(--wp--preset--color--gray-900) !important;
}

.infinitus-section--success-stories-featured .success-stories-featured__button .wp-block-button__link:active {
	background-color: var(--wp--preset--color--gray-900) !important;
	box-shadow: var(--btn-shadow-active);
	color: var(--wp--preset--color--white) !important;
}

.infinitus-section--success-stories-featured .success-stories-featured__button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--cerulean-400);
	outline-offset: 2px;
}

/* OUTLINE — "Download pdf". No background preset on the block, so the
   transparent ground is declared here; hover/active are the primary's states
   swapped. */
.infinitus-section--success-stories-featured .success-stories-featured__button--outline .wp-block-button__link {
	background-color: transparent;
}

.infinitus-section--success-stories-featured .success-stories-featured__button--outline .wp-block-button__link:hover,
.infinitus-section--success-stories-featured .success-stories-featured__button--outline .wp-block-button__link:focus-visible,
.infinitus-section--success-stories-featured .success-stories-featured__button--outline .wp-block-button__link:active {
	background-color: var(--wp--preset--color--gray-900) !important;
	color: var(--wp--preset--color--white) !important;
}

/* TABLET — the split holds (media-copy-row.css's own precedent): 768–1024.98
   keeps the two-column row and only mobile stacks. The .wp-block-columns /
   .wp-block-column hops out-specify core's own `flex-wrap: wrap !important;
   flex-basis: 100% !important` stacking rule, which otherwise fires below
   782. */
@media (min-width: 768px) and (max-width: 1024.98px) {
	.infinitus-section--success-stories-featured .wp-block-columns.success-stories-featured__row {
		flex-wrap: nowrap !important;
		gap: var(--wp--preset--spacing--sp-8);
		justify-content: space-between;
	}

	.infinitus-section--success-stories-featured
		.success-stories-featured__row
		> .wp-block-column.success-stories-featured__media {
		flex-basis: 40.19% !important;
		width: auto;
	}

	.infinitus-section--success-stories-featured
		.success-stories-featured__row
		> .wp-block-column.success-stories-featured__copy {
		flex-basis: 48.75% !important;
		width: auto;
	}
}

/* MOBILE — photo is first in the DOM, so plain flex-direction: column stacks
   it above the copy with no reordering needed. */
@media (max-width: 767.98px) {
	.infinitus-section--success-stories-featured .success-stories-featured__row {
		flex-direction: column;
		gap: var(--wp--preset--spacing--sp-8);
	}

	.infinitus-section--success-stories-featured .success-stories-featured__media,
	.infinitus-section--success-stories-featured .success-stories-featured__copy {
		flex-basis: auto !important;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.infinitus-section--success-stories-featured .success-stories-featured__button .wp-block-button__link {
		transition: none;
	}
}