/* plinth/stepper */

/* The line's fill, 0–1: registered so scroll timelines can animate it and
   both axes can read it. Full unless something animates it. */
@property --st-fill {
	syntax: "<number>";
	inherits: false;
	initial-value: 1;
}

.b-stepper {
	container-type: inline-size;
	--st-pop-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Same as the Hero. */
	/* Header highlight (eyebrow marker, heading emphasis): follows the
	   section background, as Icon List. */
	--st-header-highlight: var(--wp--preset--color--accent);
	/* The steps' colours follow the surface they sit on (the panel, or the
	   section with no panel): a b-stepper--on-{slug} modifier from
	   render.php. --st-surface is that colour; --st-ink the text on it;
	   --st-highlight lit numbers and the line's fill; --st-on-highlight the
	   digit on a lit number. */
	--st-surface: var(--wp--preset--color--secondary);
	--st-ink: var(--wp--preset--color--base);
	--st-highlight: var(--wp--preset--color--accent);
	--st-on-highlight: var(--wp--preset--color--base);
	/* Unlit numbers and the line's track: solid washes of the ink, so the
	   line passing behind a number never shows through it. */
	--st-faint: color-mix(in srgb, var(--st-ink) 16%, var(--st-surface));
	--st-faint-digit: color-mix(in srgb, var(--st-ink) 55%, var(--st-surface));
	--st-faint-label: color-mix(in srgb, var(--st-ink) 62%, var(--st-surface));
	--st-number: 2.5rem;
	/* No padding-block here — the editor's Padding control owns it. */

	/* ---- Section background (native Color panel) ------------------------------
	   Same rules as Icon List: dark backgrounds get light text by default,
	   highlights turn Mint on Forest and follow the text on Magenta. */
	&:is(.has-primary-background-color, .has-secondary-background-color, .has-accent-background-color) {
		color: var(--wp--preset--color--base);
	}

	&.has-primary-background-color {
		--st-header-highlight: var(--wp--preset--color--tint);
	}

	&.has-accent-background-color {
		--st-header-highlight: currentColor;
	}

	/* ---- Step surface ----------------------------------------------------------
	   As the Feature Panel: light surfaces get Deep Forest text; the
	   highlight is Magenta, Mint on Forest and Deep Forest on Magenta. */
	&.b-stepper--on-primary {
		--st-surface: var(--wp--preset--color--primary);
		--st-highlight: var(--wp--preset--color--tint);
		--st-on-highlight: var(--wp--preset--color--secondary);
	}

	&.b-stepper--on-accent {
		--st-surface: var(--wp--preset--color--accent);
		--st-highlight: var(--wp--preset--color--secondary);
	}

	&:is(.b-stepper--on-tint, .b-stepper--on-neutral, .b-stepper--on-base) {
		--st-ink: var(--wp--preset--color--secondary);
	}

	&.b-stepper--on-tint { --st-surface: var(--wp--preset--color--tint); }
	&.b-stepper--on-neutral { --st-surface: var(--wp--preset--color--neutral); }
	&.b-stepper--on-base { --st-surface: var(--wp--preset--color--base); }

	/* The inner is the layout container, so the queries below see the
	   content width. */
	& .b-stepper__inner {
		container: stepper / inline-size;
		max-width: var(--block-max-width);
		margin-inline: auto;
		padding-inline: var(--block-gutter);
	}

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

	& .b-stepper__header {
		display: grid;
		gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xl);
		margin-block-end: var(--wp--preset--spacing--lg);
	}

	/* Eyebrow: .plinth-eyebrow (base.css). */
	& .b-stepper__eyebrow .plinth-eyebrow__marker > span {
		background: var(--st-header-highlight);
	}

	& .b-stepper__heading {
		margin: 0;
		color: inherit;
		font-size: var(--wp--preset--font-size--xxxl);
		text-wrap: balance;

		& :is(em, i) {
			color: var(--st-header-highlight);
		}
	}

	& .b-stepper__intro {
		max-inline-size: 36rem;
		margin: 0;
		font-size: var(--wp--preset--font-size--lg);
		line-height: 1.4;
		text-wrap: pretty;
	}

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

	& .b-stepper__panel {
		padding: var(--wp--preset--spacing--lg) clamp(var(--wp--preset--spacing--md), 6cqi, var(--wp--preset--spacing--lg));
		border-radius: var(--wp--custom--radius--card-lg);
		background: var(--st-surface);
		color: var(--st-ink);
	}

	/* No panel: the steps line up with the header's edges. */
	&.b-stepper--bare .b-stepper__panel {
		padding: 0;
		border-radius: 0;
		background: none;
	}

	/* ---- Steps: stacked (narrow) ----------------------------------------------------
	   A vertical line down the left, as the Timeline: each step's top edge
	   runs through its number's centre and its label's first line, and each
	   step draws the line down to the next number. */

	& .b-stepper__track {
		position: relative;
	}

	/* view.js / the scroll timeline measure progress from this marker,
	   level with the numbers' centres in the row layout. */
	& .b-stepper__progress {
		position: absolute;
		inset-block-start: calc(var(--st-number) / 2);
		inset-inline-start: 0;
		inline-size: 1px;
		block-size: 1px;
		pointer-events: none;
	}

	& .b-stepper__steps {
		--st-axis: y;
		display: grid;
		margin: 0;
		padding: calc(var(--st-number) / 2) 0 0;
		list-style: none;
	}

	& .b-stepper__step {
		position: relative;
		display: grid;
		justify-items: start;
		align-content: start;
		gap: var(--wp--preset--spacing--xxs);
		margin: 0;
		padding-block-end: var(--wp--preset--spacing--md);
		padding-inline-start: calc(var(--st-number) + var(--wp--preset--spacing--sm));

		&:last-child {
			padding-block-end: 0;
		}
	}

	/* The line from this number to the next: the track, with the highlight
	   filling it (--st-fill). */
	& .b-stepper__line {
		position: absolute;
		inset-block: 0;
		inset-inline-start: calc(var(--st-number) / 2 - 1px);
		inline-size: 2px;
		background: var(--st-faint);

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background: var(--st-highlight);
			transform-origin: top;
			scale: 1 var(--st-fill);
		}
	}

	& .b-stepper__step:last-child .b-stepper__line {
		display: none;
	}

	& .b-stepper__number {
		position: absolute;
		z-index: 1;
		inset-block-start: calc(var(--st-number) / -2);
		inset-inline-start: 0;
		display: grid;
		place-items: center;
		inline-size: var(--st-number);
		aspect-ratio: 1;
		border-radius: 50%;
		background: var(--st-highlight);
		color: var(--st-on-highlight);
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--xl);
		font-variant-numeric: lining-nums;
		line-height: 1;
	}

	/* Body type, as the design. The first line's middle sits on the step's
	   top edge, level with the number. */
	& .b-stepper__label {
		margin: -0.65em 0 0;
		color: var(--st-ink);
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--lg);
		font-weight: 500; /* Medium, as the Testimonials name. */
		line-height: 1.3;
		letter-spacing: normal;
		text-wrap: balance;
	}

	& .b-stepper__text {
		max-inline-size: 18rem;
		margin: 0;
		color: color-mix(in srgb, var(--st-ink) 72%, var(--st-surface));
		font-size: var(--wp--preset--font-size--md);
		line-height: 1.45;
		text-wrap: pretty;
	}

	& .b-stepper__placeholder {
		margin: 0;
		padding: var(--wp--preset--spacing--md);
		border: 1px dashed currentColor;
		border-radius: var(--wp--custom--radius--card-sm);
	}

	/* ---- Steps: in a row (wide) -------------------------------------------------------
	   Equal columns across the panel, each number centred over its label,
	   and each step's line running from its number's centre to the next
	   (one column across). */
	@container stepper (min-width: 46rem) {
		& .b-stepper__track {
			--st-number: 3rem;
		}

		& .b-stepper__steps {
			--st-axis: x;
			grid-template-columns: repeat(var(--n), minmax(0, 1fr));
			padding: 0;
		}

		& .b-stepper__step {
			justify-items: center;
			gap: var(--wp--preset--spacing--xs);
			padding: calc(var(--st-number) + var(--wp--preset--spacing--sm)) var(--wp--preset--spacing--xs) 0;
			text-align: center;
		}

		& .b-stepper__line {
			inset-block: calc(var(--st-number) / 2 - 1px) auto;
			inset-inline: 50% -50%;
			inline-size: auto;
			block-size: 2px;

			&::after {
				transform-origin: left;
				scale: var(--st-fill) 1;
			}
		}

		& .b-stepper__number {
			inset-block-start: 0;
			inset-inline-start: calc(50% - var(--st-number) / 2);
		}

		& .b-stepper__label {
			margin: 0;
		}
	}

	/* A roomier panel once the row has space. */
	@container stepper (min-width: 64rem) {
		& .b-stepper__panel {
			padding-block: calc(var(--wp--preset--spacing--lg) * 1.25);
		}

		& .b-stepper__text {
			font-size: var(--wp--preset--font-size--lg);
			line-height: 1.4;
		}
	}

	/* Split header, as Icon List: eyebrow across the top, heading on the
	   left, intro on the right, starting level with the heading. */
	@container stepper (min-width: 48rem) {
		& .b-stepper__header {
			grid-template-columns: 1fr 1fr;

			& .b-stepper__eyebrow {
				grid-column: 1 / -1;
			}

			& .b-stepper__intro {
				grid-column: 2;
				align-self: start;
				padding-block-start: var(--wp--preset--spacing--xs);
			}
		}
	}

	/* ---- Scroll progress ---------------------------------------------------------------
	   Row: one timeline for the whole row, from the progress marker. It runs
	   while the marker travels from 85% to 40% down the screen; step i's
	   number lights (with a small pop) at i / (n − 1) of the way, and its
	   line fills between its number and the next one's.
	   Stacked: as the Timeline, a reading line 60% down the screen lights
	   each number as it passes and fills the line down to the next.
	   Scrolling back reverses both. CSS scroll timelines where supported;
	   elsewhere view.js adds .is-scrubbed and sets --st-fill / .is-reached.
	   Reduced motion, no JS and the editor show every step lit. */

	@media (prefers-reduced-motion: no-preference) {
		@supports (animation-timeline: view()) and (timeline-scope: none) {
			& .b-stepper__track {
				timeline-scope: --b-stepper;
			}

			& .b-stepper__progress {
				view-timeline: --b-stepper block;
				view-timeline-inset: 40% 15%;
			}

			& .b-stepper__step {
				/* Share of the run each number's pop takes. */
				--st-pop: 8%;
				--st-start: calc(var(--i) / (var(--n) - 1) * (100% - var(--st-pop)));
				--st-next: calc((var(--i) + 1) / (var(--n) - 1) * (100% - var(--st-pop)));

				view-timeline: --b-stepper-step block;
				view-timeline-inset: 0% 40%;
			}

			& .b-stepper__line::after {
				animation: b-stepper-fill linear both;
				animation-timeline: --b-stepper-step;
				animation-range: entry-crossing 0% entry-crossing 100%;
			}

			& .b-stepper__number {
				animation: b-stepper-number linear both;
				animation-timeline: --b-stepper-step;
				animation-range: entry-crossing 0% entry-crossing 4rem;
			}

			& .b-stepper__label {
				animation: b-stepper-label linear both;
				animation-timeline: --b-stepper-step;
				animation-range: entry-crossing 0% entry-crossing 4rem;
			}

			@container stepper (min-width: 46rem) {
				& .b-stepper__line::after {
					animation-timeline: --b-stepper;
					animation-range: cover calc(var(--st-start) + var(--st-pop)) cover var(--st-next);
				}

				& :is(.b-stepper__number, .b-stepper__label) {
					animation-timeline: --b-stepper;
					animation-range: cover var(--st-start) cover calc(var(--st-start) + var(--st-pop));
				}
			}
		}
	}

	&.is-scrubbed {
		& .b-stepper__line::after {
			--st-fill: var(--st-js-fill, 0);
		}

		& :is(.b-stepper__number, .b-stepper__label) {
			transition:
				background-color var(--wp--custom--transition--base),
				color var(--wp--custom--transition--base),
				scale 0.4s var(--st-pop-ease);
		}

		& .b-stepper__step:not(.is-reached) {
			& .b-stepper__number {
				background: var(--st-faint);
				color: var(--st-faint-digit);
				scale: 0.85;
			}

			& .b-stepper__label {
				color: var(--st-faint-label);
			}
		}
	}
}

@keyframes b-stepper-fill {
	from { --st-fill: 0; }
	to { --st-fill: 1; }
}

@keyframes b-stepper-number {
	from {
		background-color: var(--st-faint);
		color: var(--st-faint-digit);
		scale: 0.85;
	}

	60% {
		background-color: var(--st-highlight);
		color: var(--st-on-highlight);
		scale: 1.12;
	}

	to {
		background-color: var(--st-highlight);
		color: var(--st-on-highlight);
		scale: 1;
	}
}

@keyframes b-stepper-label {
	from { color: var(--st-faint-label); }
	to { color: var(--st-ink); }
}