/*
 * seamlessmd/outcomes — proven-outcomes panel.
 *
 * Structure:
 *   section.seamlessmd-outcomes
 *     div.__inner.seamlessmd-container
 *       div.__panel            rounded panel; ~72/28 two-column grid
 *         div.__content        header + metric cards (padded)
 *         div.__media          full-bleed image (no padding)
 *           img.__image
 *
 * The media column carries no padding, so the image reaches the panel edge and
 * the panel's `overflow: hidden` clips it to the shared corner radius. Grid
 * column numbers follow the writing mode, so the media lands on the
 * reading-end side in both directions with no mirroring rule.
 *
 * No metric value, label, icon or image is expressed here — the per-metric
 * accent arrives as an inline custom property from `render.php`, and the
 * direction arrow's colour comes from the direction modifier class.
 *
 * The direction arrows are VERTICAL. There is deliberately no
 * `[dir="rtl"] … scaleX(-1)` rule for them: mirroring an up/down arrow would
 * either do nothing or corrupt its meaning.
 *
 * Cascade: this block name is new, so `assets/css/seamlessmd-theme.css`
 * carries no `.seamlessmd-outcomes*` rule to outrank. The section sits at an
 * odd `nth-of-type` index on Home, so the theme's alternating
 * `main > section:nth-of-type(even)` tint does not apply and the pale surface
 * declared below is what shows — no global CSS change was needed.
 */

.seamlessmd-outcomes {
	/* The palette has no pale-blue panel or metric-card token, so these are
	 * block-local. `--accent` is a fallback only — every built-in icon ships
	 * its own and overrides it per card. */
	--seamlessmd-outcomes-surface: #f4f7ff;
	--seamlessmd-outcomes-panel: #eef3fe;
	--seamlessmd-outcomes-card: #ffffff;
	--seamlessmd-outcomes-card-border: #e3eafa;
	--seamlessmd-outcomes-eyebrow: #3f63c7;
	--seamlessmd-outcomes-value: #123a96;
	--seamlessmd-outcomes-label: #33447a;
	--seamlessmd-outcomes-accent: #2f5bc4;
	--seamlessmd-outcomes-increase: #16a06b;
	--seamlessmd-outcomes-decrease: #6b5ce7;
	--seamlessmd-outcomes-radius: 24px;

	/* Tighter vertical rhythm — design review flagged excess whitespace above
	 * this section (paired with the evidence-journeys strip immediately above,
	 * both were topping out at ~68px). New values top out at ~32px so the
	 * two blocks flow together without a dead band between them. */
	padding-block: clamp(1.25rem, 2.4vw, 2rem);
	background: var(--seamlessmd-outcomes-surface);
}

/* ---------- Panel ---------- */

.seamlessmd-outcomes__panel {
	display: grid;
	/* The reference proportions: content 72%, media 28%. */
	grid-template-columns: minmax(0, 72fr) minmax(0, 28fr);
	align-items: stretch;
	/* Clips the bled image to the rounded corners. Nothing else reaches this
	 * boundary, so no card or label is ever cut. */
	overflow: hidden;
	border-radius: var(--seamlessmd-outcomes-radius);
	background: var(--seamlessmd-outcomes-panel);
}

@media (min-width: 1200px) {
	/* Desktop only, and a minimum — never a fixed height. Reference density
	 * puts eyebrow-through-metrics at ~240px of vertical rhythm, so 16rem
	 * is the practical floor. Higher values (was 24rem) inflated the panel
	 * past the content and produced dead space above and below the metrics. */
	.seamlessmd-outcomes__panel {
		min-block-size: 16rem;
	}
}

.seamlessmd-outcomes--no-media .seamlessmd-outcomes__panel {
	/* No image configured: the content takes the whole panel. */
	grid-template-columns: minmax(0, 1fr);
}

.seamlessmd-outcomes__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Tighter internal rhythm — was ~34px gap + 48px padding which left a lot
	 * of empty space around header + metrics. New values top out at ~20px gap
	 * + 28px padding, matching the reference density. */
	gap: clamp(0.9rem, 1.6vw, 1.25rem);
	min-inline-size: 0;
	padding: clamp(1.15rem, 2vw, 1.75rem);
}

/* ---------- Header ---------- */

.seamlessmd-outcomes__eyebrow {
	margin: 0 0 var(--seamlessmd-space-3, 0.75rem);
	font-size: clamp(0.6875rem, 0.85vw, 0.8125rem);
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--seamlessmd-outcomes-eyebrow);
	overflow-wrap: break-word;
}

.seamlessmd-outcomes__heading {
	margin: 0 0 var(--seamlessmd-space-3, 0.75rem);
	font-size: clamp(1.6rem, 2.9vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--seamlessmd-text, #1e2a5c);
	overflow-wrap: break-word;
}

.seamlessmd-outcomes__description {
	margin: 0;
	max-inline-size: 44rem;
	font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
	line-height: 1.6;
	color: var(--seamlessmd-text-muted, #546b7f);
	overflow-wrap: break-word;
}

/* ---------- Metric cards ---------- */

.seamlessmd-outcomes__metrics {
	display: grid;
	/* Auto-fit rather than a hardcoded repeat(4, …): the item count is
	 * editor-driven, and cards reflow into balanced rows on their own. */
	grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
	gap: clamp(0.65rem, 1.2vw, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.seamlessmd-outcomes__metric {
	display: flex;
	flex-direction: column;
	/* Space between head and value so cards in a row stay visually aligned
	 * even when one label wraps to an extra line. No fixed card height. */
	justify-content: space-between;
	/* Roomier interior + wider gap between the label row and the value —
	 * design review flagged the previous card as under-scaled compared to
	 * the reference. */
	gap: clamp(1.1rem, 2vw, 1.75rem);
	min-inline-size: 0;
	padding: clamp(1.15rem, 1.8vw, 1.5rem);
	border: 1px solid var(--seamlessmd-outcomes-card-border);
	border-radius: 14px;
	background: var(--seamlessmd-outcomes-card);
	box-shadow: 0 1px 2px rgba(24, 39, 75, 0.03), 0 6px 16px rgba(24, 39, 75, 0.04);
}

.seamlessmd-outcomes__metric-head {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	min-inline-size: 0;
}

.seamlessmd-outcomes__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: 7px;
	/* Tinted plate derived from the card's own accent — one source of truth
	 * per metric, set inline by the renderer. */
	background: color-mix(in srgb, var(--seamlessmd-outcomes-accent) 14%, transparent);
	color: var(--seamlessmd-outcomes-accent);
}

.seamlessmd-outcomes__glyph {
	inline-size: 68%;
	block-size: 68%;
	display: block;
}

.seamlessmd-outcomes .seamlessmd-outcomes__icon-image {
	inline-size: 70%;
	block-size: 70%;
	max-inline-size: 70%;
	object-fit: contain;
	display: block;
}

.seamlessmd-outcomes__label {
	min-inline-size: 0;
	font-size: clamp(0.75rem, 0.9vw, 0.8125rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--seamlessmd-outcomes-label);
	/* Long or translated labels wrap instead of widening the track. */
	overflow-wrap: break-word;
}

/* ---------- Value + direction ---------- */

.seamlessmd-outcomes__value {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	min-inline-size: 0;
	/* Bigger, headline-scale metric number — the reference design leads with
	 * the value, so it needs to read as the primary content of the card. */
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--seamlessmd-outcomes-value);
}

.seamlessmd-outcomes__direction {
	display: inline-flex;
	align-items: center;
	margin-inline-start: 0.15rem;
}

.seamlessmd-outcomes__arrow {
	/* Scale with the enlarged value below it — sized to the value's cap
	 * height so the arrow reads as part of the number, not a footnote. */
	inline-size: 1.5rem;
	block-size: 1.5rem;
	display: block;
}

/* Direction is carried by the arrow's SHAPE first; colour is reinforcement,
 * and the hidden word below covers assistive technology. */
.seamlessmd-outcomes__direction--increase {
	color: var(--seamlessmd-outcomes-increase);
}

.seamlessmd-outcomes__direction--decrease {
	color: var(--seamlessmd-outcomes-decrease);
}

/* Visually hidden direction word, announced after the value. */
.seamlessmd-outcomes__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Media ---------- */

.seamlessmd-outcomes__media {
	min-inline-size: 0;
	/* Stretched by the grid, so the image fills the panel height naturally
	 * and leaves no gap beside the metrics. `position: relative` + absolute
	 * `__image` below stops the tall portrait photo from setting its own
	 * intrinsic height on the grid track — the panel height is then driven
	 * by the content column, and the image crops via `object-fit: cover`
	 * inside whatever track height the content produces. */
	position: relative;
	overflow: hidden;
}

.seamlessmd-outcomes .seamlessmd-outcomes__image {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	/* `cover` plus an explicit focal point — never a distorted aspect ratio.
	 * The focal point is CSS-defined rather than an editor field, because the
	 * project has no per-image object-position control to follow. */
	object-fit: cover;
	/* Physical, not logical, and deliberately so: it points at where the
	 * subject sits inside the photograph, which does not change when the page
	 * direction does. Tuned to `proven-outcomes.webp` — the nurse sits centre-
	 * right, so a slight rightward bias keeps her in frame while the bright,
	 * content-facing left edge is what the fade below dissolves. */
	object-position: 60% center;
	display: block;
}

/* AR serves a horizontally mirrored copy (`proven-outcomes-rtl.webp`) so the
 * nurse faces inward toward the content instead of out of the panel. The
 * subject now sits on the opposite side of the frame, so mirror the focal
 * point to keep her framed — the reflection of the 60% used above. */
[dir="rtl"] .seamlessmd-outcomes .seamlessmd-outcomes__image {
	object-position: 40% center;
}

/* Blend the photo into the panel: fade its content-facing (inline-start) edge
 * to transparent so the pale panel tint shows through and the image reads as
 * merged with the section, not a hard-edged cutout. The media lives on the
 * reading-end column, so in LTR its inline-start edge is the LEFT one (fade
 * `to right`) and in RTL the column flips, making the RIGHT edge the one that
 * meets the metrics (fade `to left`) — an explicit mirror, per house RTL
 * convention. Scoped to >=576px: the panel keeps its side-by-side split all the
 * way down to the phone breakpoint, so the horizontal edge fade stays correct
 * there too. Below 576px the panel stacks and the image needs a vertical fade
 * instead — that one lives in the mobile block at the end of this file. */
@media (min-width: 576px) {
	.seamlessmd-outcomes .seamlessmd-outcomes__image {
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
		        mask-image: linear-gradient(to right, transparent 0%, #000 42%);
	}

	[dir="rtl"] .seamlessmd-outcomes .seamlessmd-outcomes__image {
		-webkit-mask-image: linear-gradient(to left, transparent 0%, #000 42%);
		        mask-image: linear-gradient(to left, transparent 0%, #000 42%);
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
	/* Tablet landscape: the panel keeps its split while there is room, but
	 * the media narrows so the metrics keep readable cards. */
	.seamlessmd-outcomes__panel {
		grid-template-columns: minmax(0, 64fr) minmax(0, 36fr);
	}

	.seamlessmd-outcomes__metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991px) and (min-width: 576px) {
	/* Tablet: the panel deliberately keeps its split rather than stacking. Once
	 * the media dropped to its own full-width row it stopped reading as part of
	 * the composition and became a separate photograph pinned under a column of
	 * cards, which also made the section roughly 40% taller. Holding the split
	 * keeps the nurse anchored on the reading-end side with the 2x2 metric grid
	 * beside her, and keeps the edge fade above meaningful. The media column is
	 * a little narrower than the 36fr it gets at 1199px so the two metric
	 * columns keep comfortable cards. */
	.seamlessmd-outcomes__panel {
		grid-template-columns: minmax(0, 66fr) minmax(0, 34fr);
	}
}

@media (max-width: 575px) {
	/* Mobile: the panel stacks and the photograph is dropped entirely.
	 *
	 * Design review flagged the previous mobile treatment ("full-bleed
	 * photo at ~240px tall directly under the metrics") as poor design:
	 * the nurse portrait dominated the phone viewport, out of proportion
	 * to its purely decorative role on desktop. On a phone, screen space
	 * is dear and the four metric cards ARE the section — the photograph
	 * adds no information, just visual weight, and pushes the following
	 * section a full viewport out of reach.
	 *
	 * `display: none` on `.__media` removes it from layout entirely. The
	 * metric grid keeps its 2x2 layout from the 1199px rule; the panel
	 * collapses to a single column with just the copy + metric cards, so
	 * the section reads compactly and the phone user gets to the numbers
	 * without scrolling past a face-sized photo. */
	.seamlessmd-outcomes__panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.seamlessmd-outcomes__media {
		display: none;
	}
}