/**
 * core/list, Steps style (steps.php). Loaded only on pages that use it.
 *
 * Left-aligned (Jeffrey, 2026-10-02; was a centred walk with Sentinel
 * numerals in rings): each step hangs off a large numeral in the CN Postal
 * Service Outline cut, in Clay, set in a column to its left. A step's opening
 * bold phrase runs into its sentence. The numeral column narrows with the
 * viewport, so on phones the text keeps most of the width. The list's own
 * counter numbers the steps, so reordering or adding one renumbers itself.
 */

.wp-block-list.is-style-jsa-steps {
	--jsa-step-numeral: var(--wp--preset--font-size--xx-large);
	--jsa-step-column: clamp(3.5rem, 2rem + 4vw, 6rem);
	counter-reset: jsa-step;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--flow-gap);
	max-width: 40rem;
	padding: 0;
}

.is-style-jsa-steps > li {
	counter-increment: jsa-step;
	position: relative;
	min-height: calc(var(--jsa-step-numeral) * 0.85);
	margin: 0;
	padding-left: var(--jsa-step-column);
	text-wrap: pretty;
}

.is-style-jsa-steps > li::before {
	content: counter(jsa-step);
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--wp--preset--font-family--wordmark-outline);
	font-size: var(--jsa-step-numeral);
	font-weight: 400;
	line-height: 0.85;
	color: var(--wp--preset--color--secondary);
}