/**
 * cmp-steps — CMP How It Works (Steps)
 * Layout for the asymmetric header + diagonal 4-step build pipeline.
 * Reuses theme design tokens from tokens.css (does NOT redefine them) and the
 * shared cmp- utility classes from main.css (.cmp-section, .cmp-container,
 * .cmp-section-pad, .cmp-eyebrow, .cmp-spec, .cmp-hairline, .cmp-h2, .cmp-h3,
 * .cmp-btn, .cmp-reveal). Mobile-first; breakpoints at 768px and 1024px.
 */

/* ── Header — single column on mobile, asymmetric 12-col grid at desktop ──── */
.cmp-steps__header {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	align-items: end;
	gap: 1.5rem;
}

.cmp-steps__header-lead {
	grid-column: 1 / -1;
}

.cmp-steps__header-meta {
	grid-column: 1 / -1;
}

.cmp-steps__eyebrow {
	margin-bottom: 1rem;
}

.cmp-steps__heading {
	max-width: 15ch;
	color: var(--ink);
}

.cmp-steps__spec {
	margin-bottom: 0.25rem;
	color: var(--muted);
}

.cmp-steps__count {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.cmp-steps__count-suffix {
	color: var(--muted);
}

/* ── Divider rules ───────────────────────────────────────────────────────── */
.cmp-steps__rule {
	margin-top: 1.5rem;
}

/* ── Pipeline ────────────────────────────────────────────────────────────── */
.cmp-steps__pipeline {
	position: relative;
	margin-top: 2.5rem;
}

.cmp-steps__list {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 1.5rem;
	row-gap: 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── Single step card ────────────────────────────────────────────────────── */
.cmp-step {
	position: relative;
	margin: 0;
}

.cmp-step__head {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

.cmp-step__num {
	font-family: var(--font-mono);
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 0.8;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	transition: color 0.3s ease;
}

.cmp-step__node {
	position: relative;
	top: -0.5rem;
	display: grid;
	place-items: center;
	height: 2.25rem;
	width: 2.25rem;
	flex-shrink: 0;
	border-radius: var(--r-pill, 999px);
	border: 1px solid var(--amber-tint-border);
	background: var(--card);
	color: var(--amber-text);
	box-shadow: var(--shadow-rest);
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cmp-step__node svg {
	display: block;
}

/* group-hover analogues */
.cmp-step:hover .cmp-step__num {
	color: var(--amber-text);
}

.cmp-step:hover .cmp-step__node {
	background: var(--amber);
	color: var(--on-amber);
	border-color: var(--amber);
}

.cmp-step__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

.cmp-step__tag {
	border-radius: var(--r-xs);
	background: var(--amber-tint);
	padding: 0.125rem 0.375rem;
	color: var(--amber-text);
}

.cmp-step__ref {
	color: var(--muted);
}

.cmp-step__rule {
	opacity: 0.7;
	margin-top: 0.625rem;
}

.cmp-step__title {
	margin-top: 0.75rem;
	font-family: var(--font-display);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
}

.cmp-step__body {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--body);
}

/* ── Embedded CTA ────────────────────────────────────────────────────────── */
.cmp-steps__cta {
	margin-top: 2.5rem;
}

.cmp-steps__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.cmp-steps__cta-icon {
	display: inline-flex;
	align-items: center;
}

.cmp-steps__cta-icon svg {
	display: block;
}

/* ── Diagonal cascade modifiers (desktop only) ───────────────────────────── */
.cmp-step--drop-0 {
	margin-top: 0;
}
.cmp-step--drop-1 {
	margin-top: 0;
}
.cmp-step--drop-2 {
	margin-top: 0;
}
.cmp-step--drop-3 {
	margin-top: 0;
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
	.cmp-steps__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Desktop ─────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
	.cmp-steps__header-lead {
		grid-column: span 7;
	}

	.cmp-steps__header-meta {
		grid-column: span 5;
		justify-self: end;
		text-align: right;
	}

	.cmp-steps__list {
		grid-template-columns: repeat(var(--cmp-cols, 4), 1fr);
	}

	.cmp-step--drop-1 {
		margin-top: 1.75rem;
	}
	.cmp-step--drop-2 {
		margin-top: 3.5rem;
	}
	.cmp-step--drop-3 {
		margin-top: 5.25rem;
	}
}

/* Cascade disabled — flatten every offset back to zero. */
.cmp-steps[data-cascade="0"] .cmp-step {
	margin-top: 0;
}