/*
 * seamlessmd/patient-journey — horizontal "continuum of care" timeline.
 *
 * Structure:
 *   section.seamlessmd-patient-journey
 *     div.__inner.seamlessmd-container
 *       header.__header      eyebrow + heading + description (centred)
 *       ol.__steps           equal-column grid, one column per step
 *         li.__step          plate + title + short description
 *       div.__cta-wrap       one centred outlined CTA
 *
 * Connectors are pseudo-elements on every step AFTER the first, sized
 * relative to the column rather than to hardcoded coordinates:
 *
 *   ::before  the hairline, spanning previous-plate-edge → this-plate-edge
 *   ::after   the arrowhead, tip landing on this step's plate edge
 *
 * With `inset-inline-end: calc(50% + plate/2 + inset)` the element's
 * inline-end edge lands just before this step's plate; an inline-size of
 * `calc(100% - plate - inset*2)` then makes its inline-start edge land just
 * after the previous step's plate. Adding or removing a step changes the
 * column width and every connector re-derives itself — no CSS edit needed.
 *
 * Cascade: this block name is new, so `assets/css/seamlessmd-theme.css`
 * carries no `.seamlessmd-patient-journey*` rule to fight. The one exception
 * is `.seamlessmd-btn*`, which theme.css loads AFTER this file — the CTA
 * rules below are therefore written at 0,2,0 so they win on specificity.
 */

.seamlessmd-patient-journey {
	/* Block-local tokens. The palette has no blue, so the accent mirrors the
	 * value the completed hero and logo strip already use; if a global blue
	 * token ever lands, these collapse into it. Teal reuses the existing
	 * brand primary rather than inventing a second green. */
	--seamlessmd-journey-blue: #1d4ed8;
	--seamlessmd-journey-blue-soft: #e8f1fe;
	--seamlessmd-journey-eyebrow: #3f63c7;
	--seamlessmd-journey-teal: var(--seamlessmd-primary, #2563eb);
	--seamlessmd-journey-teal-soft: var(--seamlessmd-primary-soft, #eff4ff);
	--seamlessmd-journey-line: #d4e0f6;
	--seamlessmd-journey-arrow: #a8c0e9;

	/* Plate diameter drives connector geometry as well as icon size, so it is
	 * a single token rather than three coordinated numbers. */
	--seamlessmd-journey-plate: clamp(52px, 5vw, 72px);
	--seamlessmd-journey-connector-inset: 10px;

	padding-block: clamp(2.5rem, 5.2vw, 4.5rem);
}

.seamlessmd-patient-journey__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

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

.seamlessmd-patient-journey__header {
	text-align: center;
	/* The reference keeps the description to roughly two lines; this cap is
	 * what produces that break at desktop without hard line breaks. */
	max-inline-size: 56rem;
}

.seamlessmd-patient-journey__eyebrow {
	margin: 0 0 var(--seamlessmd-space-3, 0.75rem);
	font-size: clamp(0.75rem, 0.95vw, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--seamlessmd-journey-eyebrow);
}

.seamlessmd-patient-journey__heading {
	margin: 0 0 var(--seamlessmd-space-4, 1rem);
	font-size: clamp(1.75rem, 3.1vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--seamlessmd-text, #1e2a5c);
}

.seamlessmd-patient-journey__description {
	margin: 0;
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	line-height: 1.6;
	color: var(--seamlessmd-text-muted, #546b7f);
}

/* ---------- Steps ---------- */

.seamlessmd-patient-journey__steps {
	display: grid;
	/* Column count comes from the repeater via render.php, so the grid is
	 * generic — never a hardcoded repeat(8, …). */
	grid-template-columns: repeat(var(--seamlessmd-journey-columns, 8), minmax(0, 1fr));
	/* Three shared rows — plate, title, description — so every step's title
	 * and description start on the same baseline even when one title wraps to
	 * two lines and its neighbours do not. Inner spacing stays on the child
	 * margins, so this gap must be zero. */
	grid-template-rows: auto auto auto;
	row-gap: 0;
	inline-size: 100%;
	margin: clamp(2rem, 3.4vw, 2.75rem) 0 0;
	padding: 0;
	list-style: none;
}

.seamlessmd-patient-journey__step {
	position: relative;
	/* Each step adopts the parent's three rows rather than stacking its own,
	 * which is what produces the cross-step alignment. Browsers without
	 * `subgrid` fall back to a normal single-cell grid: the step still lays
	 * out correctly, its description just sits directly under its own title. */
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	justify-items: center;
	align-content: start;
	text-align: center;
	/* Grid items default to `min-width: auto`; without this a long title
	 * could widen its track and push the row past the container. */
	min-inline-size: 0;
	padding-inline: 0.25rem;
}

/* Connector hairline — every step after the first reaches back to its
 * predecessor, which is what makes the row read as one journey. */
.seamlessmd-patient-journey__step + .seamlessmd-patient-journey__step::before {
	content: "";
	position: absolute;
	inset-block-start: calc(var(--seamlessmd-journey-plate) / 2);
	inset-inline-end: calc(50% + var(--seamlessmd-journey-plate) / 2 + var(--seamlessmd-journey-connector-inset));
	inline-size: calc(100% - var(--seamlessmd-journey-plate) - var(--seamlessmd-journey-connector-inset) * 2);
	block-size: 1px;
	background: var(--seamlessmd-journey-line);
}

/* Arrowhead — its tip sits exactly where the hairline ends, pointing at the
 * step it introduces. `clip-path` has no logical form, so the flip below is
 * the house RTL convention (cf. announcement-bar, case-study-card). */
.seamlessmd-patient-journey__step + .seamlessmd-patient-journey__step::after {
	content: "";
	position: absolute;
	inset-block-start: calc(var(--seamlessmd-journey-plate) / 2);
	inset-inline-end: calc(50% + var(--seamlessmd-journey-plate) / 2 + var(--seamlessmd-journey-connector-inset));
	inline-size: 7px;
	block-size: 7px;
	transform: translateY(-50%);
	background: var(--seamlessmd-journey-arrow);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

[dir="rtl"] .seamlessmd-patient-journey__step + .seamlessmd-patient-journey__step::after {
	transform: translateY(-50%) scaleX(-1);
}

/* ---------- Icon plate ---------- */

.seamlessmd-patient-journey__plate {
	display: grid;
	place-items: center;
	inline-size: var(--seamlessmd-journey-plate);
	block-size: var(--seamlessmd-journey-plate);
	border-radius: 50%;
	/* Sits above the connector so the hairline never shows through the
	 * plate's soft fill. */
	position: relative;
	z-index: 1;
	background: var(--seamlessmd-journey-plate-bg, var(--seamlessmd-journey-blue-soft));
	color: var(--seamlessmd-journey-icon, var(--seamlessmd-journey-blue));
}

/* Per-step accent. Blue is the main accent; teal is the deliberate
 * exception the design uses once or twice to break the row's rhythm. */
.seamlessmd-patient-journey__step--accent-blue {
	--seamlessmd-journey-plate-bg: var(--seamlessmd-journey-blue-soft);
	--seamlessmd-journey-icon: var(--seamlessmd-journey-blue);
}

.seamlessmd-patient-journey__step--accent-teal {
	--seamlessmd-journey-plate-bg: var(--seamlessmd-journey-teal-soft);
	--seamlessmd-journey-icon: var(--seamlessmd-journey-teal);
}

/* Built-in glyphs stroke with `currentColor`, so the accent above recolours
 * them without a second asset. */
.seamlessmd-patient-journey__glyph {
	inline-size: 44%;
	block-size: 44%;
	display: block;
}

/* Uploaded artwork replaces the glyph; `contain` keeps any aspect ratio
 * intact inside the round plate. */
.seamlessmd-patient-journey .seamlessmd-patient-journey__icon-image {
	inline-size: 46%;
	block-size: 46%;
	max-inline-size: 46%;
	object-fit: contain;
	display: block;
}

/* ---------- Step text ---------- */

.seamlessmd-patient-journey__title {
	display: block;
	margin-block-start: clamp(0.6rem, 1vw, 0.85rem);
	font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--seamlessmd-text, #1e2a5c);
	/* Titles may wrap naturally, but never mid-word; `balance` keeps a
	 * two-word wrap from leaving one orphan word on the second line. */
	overflow-wrap: break-word;
	text-wrap: balance;
}

.seamlessmd-patient-journey__step-description {
	display: block;
	margin-block-start: 0.35rem;
	font-size: clamp(0.75rem, 0.95vw, 0.875rem);
	line-height: 1.45;
	color: var(--seamlessmd-text-muted, #546b7f);
	overflow-wrap: break-word;
}

/* ---------- CTA ---------- */

.seamlessmd-patient-journey__cta-wrap {
	margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
}

/* Shared shape only (0,2,0 so it wins over theme.css's `.seamlessmd-btn` base,
 * which loads after this file). The reference CTA is a compact rounded
 * rectangle, not the site's default pill. Fill / border / text colour are set
 * PER style variant below so the editor's "CTA style" control (Outlined / Solid
 * / Text only) actually changes the button — previously this rule hard-coded
 * the outlined look and out-specified all three `--primary/secondary/ghost`
 * variants, so the control had no visible effect. */
.seamlessmd-patient-journey .seamlessmd-patient-journey__cta {
	gap: 0.6rem;
	border-radius: 12px;
	border: 1px solid transparent;
	font-size: clamp(0.875rem, 1.05vw, 0.9375rem);
	padding-block: 0.7rem;
	padding-inline: 1.5rem;
}

/* Outlined (secondary, default) — transparent fill, soft blue hairline. */
.seamlessmd-patient-journey .seamlessmd-patient-journey__cta.seamlessmd-btn--secondary {
	background: transparent;
	border-color: #d5e0f5;
	color: var(--seamlessmd-journey-blue);
}
.seamlessmd-patient-journey .seamlessmd-patient-journey__cta.seamlessmd-btn--secondary:hover,
.seamlessmd-patient-journey .seamlessmd-patient-journey__cta.seamlessmd-btn--secondary:focus-visible {
	background: var(--seamlessmd-journey-blue-soft);
	border-color: var(--seamlessmd-journey-arrow);
	color: var(--seamlessmd-journey-blue);
}

/* Solid (primary) — filled brand blue, white label + arrow (arrow uses
 * currentColor, so it turns white automatically). */
.seamlessmd-patient-journey .seamlessmd-patient-journey__cta.seamlessmd-btn--primary {
	background: var(--seamlessmd-journey-blue);
	border-color: var(--seamlessmd-journey-blue);
	color: #ffffff;
}
.seamlessmd-patient-journey .seamlessmd-patient-journey__cta.seamlessmd-btn--primary:hover,
.seamlessmd-patient-journey .seamlessmd-patient-journey__cta.seamlessmd-btn--primary:focus-visible {
	background: #1740b0;
	border-color: #1740b0;
	color: #ffffff;
}

/* Text only (ghost) — no fill or border; label + arrow, underlined on hover. */
.seamlessmd-patient-journey .seamlessmd-patient-journey__cta.seamlessmd-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--seamlessmd-journey-blue);
	padding-inline: 0.5rem;
}
.seamlessmd-patient-journey .seamlessmd-patient-journey__cta.seamlessmd-btn--ghost:hover,
.seamlessmd-patient-journey .seamlessmd-patient-journey__cta.seamlessmd-btn--ghost:focus-visible {
	background: transparent;
	border-color: transparent;
	color: #1740b0;
	text-decoration: underline;
}

/* Arrow glyph built from two borders so it inherits the CTA's colour.
 *
 * The borders are LOGICAL, so under RTL they already move to the top-left
 * corner on their own — the chevron's tip then points north-west and needs a
 * counter-clockwise quarter turn, not the clockwise one LTR uses. Adding a
 * `scaleX(-1)` on top of the logical flip double-corrects and lands the arrow
 * pointing straight down, so the RTL rule negates the angle instead. */
.seamlessmd-patient-journey__cta-arrow {
	inline-size: 6px;
	block-size: 6px;
	border-block-start: 1.5px solid currentColor;
	border-inline-end: 1.5px solid currentColor;
	transform: rotate(45deg);
}

[dir="rtl"] .seamlessmd-patient-journey__cta-arrow {
	transform: rotate(-45deg);
}

/* ---------- Tablet ----------
 *
 * Four steps per row keeps titles and descriptions readable. The connector
 * on the first item of each wrapped row would point at nothing, so it is
 * suppressed — `nth-child(4n + 1)` is the row's first cell at this count.
 */
@media (max-width: 1199px) {
	.seamlessmd-patient-journey__steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		/* Steps now occupy several wrapped rows, so the shared three-row
		 * template no longer applies and `row-gap` goes back to meaning the
		 * space BETWEEN steps. Cross-step baseline alignment is a desktop
		 * refinement only. */
		grid-template-rows: none;
		row-gap: clamp(1.75rem, 4vw, 2.5rem);
	}

	.seamlessmd-patient-journey__step {
		display: flex;
		flex-direction: column;
		align-items: center;
		grid-row: auto;
	}

	.seamlessmd-patient-journey__step:nth-child(4n + 1)::before,
	.seamlessmd-patient-journey__step:nth-child(4n + 1)::after {
		content: none;
	}
}

/* ---------- Mobile ----------
 *
 * Two columns, and they start at 575.98px rather than the 767px this block
 * used previously. Between 576 and 767px two columns handed each step a
 * 268–364px card carrying a 52px icon plate, so the connector hairline
 * stretched across mostly empty space and the row stopped reading as a
 * continuum. Four columns keeps the card at 136–184px through that band —
 * the same density the approved desktop layout already uses, with titles
 * wrapping to at most two lines exactly as they do there.
 *
 * 575.98 is the edge this project already uses (cf. hero-banner/style.css),
 * so the four-column band above runs unbroken from 576px to 1199px.
 *
 * Row-leading connector suppression still holds at both counts: the tablet
 * query kills it on `nth-child(4n + 1)` for the four-column band, and this
 * query restores those and kills `nth-child(odd)` for the two-column band.
 *
 * Desktop is untouched — both queries are `max-width`, so the 8-column rules
 * at 1200px and above never see either.
 */
@media (max-width: 575.98px) {
	/* Mobile: vertical timeline. Each step becomes one grid row —
	 *   [ icon plate ] [ title + description ] [ 01–08 marker ]
	 * — and a continuous 1px hairline runs down the inline-start column
	 * behind every plate, so the sequence reads as one journey from 01 to
	 * the last step. Structure decisions:
	 *
	 *   - `.__steps` becomes a flex column with zero gap; per-step block
	 *     padding sets the visual rhythm between rows and lets the
	 *     hairline meet seamlessly across step boundaries.
	 *   - `counter-reset`/`counter-increment` generates the "01"–"08"
	 *     markers via `::before` — no HTML change, so the render.php,
	 *     block.json, and editor.js are all untouched.
	 *   - `::after` carries the vertical hairline (was the desktop
	 *     arrowhead). It is absolutely positioned to
	 *     `inset-inline-start: plate-radius`, so under `dir="rtl"` it
	 *     mirrors to the right side without any RTL-specific rule.
	 *   - The `first-child::after` starts at the plate's centre (no line
	 *     ABOVE the first plate); the `last-child::after` ends at the
	 *     plate's centre (no line BELOW the last plate). Middle steps
	 *     draw the full column height so the two half-lines meet.
	 *
	 * Both `::before` and `::after` are overridden with the double-class
	 * trick (`.__step.__step`) so they beat the desktop `.__step +
	 * .__step::before/::after` rules on specificity — the desktop rules
	 * are still declared, they just get shadowed inside this query.
	 *
	 * Desktop (≥1200px) and the tablet band (≤1199px, 4 columns) both
	 * remain untouched: this query is `max-width: 575.98px` only. */
	.seamlessmd-patient-journey {
		padding-block: clamp(2rem, 8vw, 2.75rem);
	}

	.seamlessmd-patient-journey__header {
		max-inline-size: none;
	}

	.seamlessmd-patient-journey__heading {
		font-size: clamp(1.5rem, 6vw, 1.875rem);
	}

	.seamlessmd-patient-journey__description {
		font-size: clamp(0.9375rem, 3.6vw, 1rem);
	}

	.seamlessmd-patient-journey__steps {
		display: flex;
		flex-direction: column;
		row-gap: 0;
		grid-template-columns: none;
		grid-template-rows: none;
		counter-reset: seamlessmd-journey-step;
		margin-block-start: clamp(1.25rem, 5vw, 1.75rem);
		inline-size: 100%;
	}

	.seamlessmd-patient-journey__step {
		counter-increment: seamlessmd-journey-step;
		display: grid;
		grid-template-columns: var(--seamlessmd-journey-plate) minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		column-gap: 1rem;
		row-gap: 0.15rem;
		justify-items: start;
		align-items: start;
		text-align: start;
		padding-block: 0.75rem;
		padding-inline: 0;
		grid-row: auto;
	}

	.seamlessmd-patient-journey__plate {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
		z-index: 1;
	}

	.seamlessmd-patient-journey__title {
		grid-column: 2;
		grid-row: 1;
		margin-block-start: 0;
		align-self: end;
		padding-block-end: 0.15rem;
		text-align: start;
		text-wrap: initial;
	}

	.seamlessmd-patient-journey__step-description {
		grid-column: 2;
		grid-row: 2;
		margin-block-start: 0;
		align-self: start;
		text-align: start;
	}

	/* Number marker "01"–"08" via CSS counter — overrides the desktop
	 * `.__step + .__step::before` hairline with a static grid cell. */
	.seamlessmd-patient-journey__step.seamlessmd-patient-journey__step::before {
		content: counter(seamlessmd-journey-step, decimal-leading-zero);
		position: static;
		grid-column: 3;
		grid-row: 1;
		align-self: end;
		padding-block-end: 0.15rem;
		inset: auto;
		inline-size: auto;
		block-size: auto;
		background: transparent;
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		color: var(--seamlessmd-text-muted, #98a3b8);
		clip-path: none;
		transform: none;
	}

	/* Vertical connector line — replaces the desktop arrowhead. */
	.seamlessmd-patient-journey__step.seamlessmd-patient-journey__step::after {
		content: "";
		position: absolute;
		inset-inline-start: calc(var(--seamlessmd-journey-plate) / 2);
		margin-inline-start: -0.5px;
		inset-block-start: 0;
		inset-block-end: 0;
		inset-inline-end: auto;
		inline-size: 1px;
		block-size: auto;
		background: var(--seamlessmd-journey-line);
		clip-path: none;
		transform: none;
		z-index: 0;
	}

	/* First step: line starts at plate centre (no rail above the first plate). */
	.seamlessmd-patient-journey__step.seamlessmd-patient-journey__step:first-child::after {
		inset-block-start: calc(0.75rem + var(--seamlessmd-journey-plate) / 2);
	}

	/* Last step: line ends at plate centre (no rail below the last plate). */
	.seamlessmd-patient-journey__step.seamlessmd-patient-journey__step:last-child::after {
		inset-block-end: auto;
		block-size: calc(0.75rem + var(--seamlessmd-journey-plate) / 2);
	}

	/* CTA — full-width friendlier tap target on mobile. */
	.seamlessmd-patient-journey__cta-wrap {
		margin-block-start: clamp(1.5rem, 5vw, 2rem);
		inline-size: 100%;
		display: flex;
		justify-content: center;
	}

	.seamlessmd-patient-journey .seamlessmd-patient-journey__cta {
		min-block-size: 44px;
		padding-block: 0.85rem;
		padding-inline: 1.5rem;
	}
}