/*
 * Process steps.
 *
 * Same rules as every component stylesheet: design-system `--btx-*` tokens
 * only, a fallback on every var(). See cta-button/style.css for the full note.
 *
 * Ink is measured in PHP against whatever background was picked and arrives as
 * `--btxc-steps-ink` / `--btxc-steps-quiet`. The defaults below are the paper
 * case — what a card with no background of its own sits on.
 */

@layer bertex-components {

	.btxc-steps {
		--btxc-steps-bg: transparent;
		--btxc-steps-ink: var(--btx-color-primary-1, #1a2744);
		--btxc-steps-quiet: var(--btx-color-primary-1-light-40, #2e4578);

		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xs, 0.75rem);

		background: var(--btxc-steps-bg);
		color: var(--btxc-steps-ink);

		font-family: var(--btx-font-body-family, system-ui, sans-serif);
	}

	/*
	 * Padding and an edge only once there is a surface to put them on — an
	 * unfilled card is a bare list, which is what it should be when it is
	 * dropped under something that already has its own frame.
	 */
	.btxc-steps--filled {
		padding: var(--btx-card-spacing, 1.75rem);
		border: 1px solid color-mix(in srgb, var(--btxc-steps-ink) 12%, transparent);
		border-radius: var(--btx-border-radius-lg, 0.75rem);
	}

	.btxc-steps__eyebrow {
		margin: 0;

		font-size: var(--btx-font-body-xs, 0.75rem);
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		line-height: var(--btx-line-height-body, 1.5);
		color: var(--btxc-steps-quiet);
	}

	.btxc-steps__heading {
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-s, 1.375rem);
		font-weight: 600;
		line-height: var(--btx-line-height-heading, 1.2);
		color: var(--btxc-steps-ink);
	}

	/* ── The steps ─────────────────────────────────────────────────────── */

	/*
	 * `list-style: none` and a counter, not a native marker.
	 *
	 * The numeral wants the heading face, a heavier weight and a fixed column
	 * so the text lines up whatever the count reaches — none of which a native
	 * marker will take. It stays an <ol> underneath, so the order is still real
	 * to anything not looking at the page; putting the number in the markup
	 * instead would have it announced twice.
	 */
	.btxc-steps__list {
		counter-reset: btxc-step;

		margin: var(--btx-spacing-xxs, 0.25rem) 0 0;
		padding: 0;
		list-style: none;

		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xs, 0.75rem);
	}

	.btxc-steps__step {
		counter-increment: btxc-step;

		display: grid;
		grid-template-columns: 1.5rem 1fr;
		gap: var(--btx-spacing-xs, 0.875rem);

		font-size: var(--btx-font-body-s, 0.9375rem);
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btxc-steps-quiet);
	}

	.btxc-steps__step::before {
		content: counter(btxc-step);

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-body-lg, 1.125rem);
		font-weight: 700;
		font-variant-numeric: tabular-nums;
		/* Pulls the numeral's cap height onto the first line of the text beside
		 * it, which sits low against 1.6 leading at this size. */
		line-height: 1.45;
		color: var(--btxc-steps-ink);
	}
}