/*
 * am-steps — a numbered process (e.g. how the workshop runs: 1 → 2 → 3).
 *
 * Use on an <ol class="am-steps"> with <li class="am-steps__item"> children, each
 * holding a title + text. The number badge is a CSS counter — no manual numbering.
 *   am-steps > am-steps__item > (am-steps__title, am-steps__text)
 */

.am-steps {
	list-style: none;
	counter-reset: am-step;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--am-space-500);
}

.am-steps__item {
	counter-increment: am-step;
	position: relative;
	margin: 0;
	padding-inline-start: var(--am-space-800);
}

.am-steps__item::before {
	content: counter(am-step);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--am-space-600);
	height: var(--am-space-600);
	background-color: var(--am-color-accent);
	color: var(--am-color-on-accent);
	border-radius: var(--am-radius-full);
	font-family: var(--am-font-sans);
	font-weight: var(--am-weight-bold);
	line-height: 1;
}

.am-steps__title {
	margin-block: 0 var(--am-space-200);
	font-family: var(--am-font-sans);
	font-weight: var(--am-weight-bold);
	font-size: var(--am-font-size-400);
}

.am-steps__text {
	margin-block: 0;
	color: var(--am-color-text);
}