.steps-heading { text-align: center; }
.steps-eyebrow { display: block; text-align: center; margin-bottom: 1rem; }
.steps-description {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}
.steps-heading + .steps-description { margin-top: 1rem; }

.steps-grid { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 3.5rem; }

.steps-grid--cols-2 .step-item { flex: 0 0 50%; }
.steps-grid--cols-3 .step-item { flex: 0 0 33.3333%; }
.steps-grid--cols-4 .step-item { flex: 0 0 25%; }
.steps-grid--cols-5 .step-item { flex: 0 0 20%; }

.step-item {
	position: relative;
	text-align: center;
	padding: 0 1.2rem;
}

/* Connecting line through the centre of the number circle, drawn from each
   item to the next in its row. Hidden on the last item of every row (via
   :nth-child, one rule per column count) and on the true last item. */
.step-item::after {
	content: '';
	position: absolute;
	top: 24px;
	left: 50%;
	width: 100%;
	height: 1px;
	background: var(--line);
	z-index: 0;
}
.steps-grid--cols-2 .step-item:nth-child(2n)::after,
.steps-grid--cols-3 .step-item:nth-child(3n)::after,
.steps-grid--cols-4 .step-item:nth-child(4n)::after,
.steps-grid--cols-5 .step-item:nth-child(5n)::after,
.step-item:last-child::after {
	display: none;
}

.step-number {
	position: relative;
	z-index: 1;
	width: 48px;
	height: 48px;
	margin: 0 auto 1.4rem;
	border-radius: 50%;
	background: var(--teal);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 400;
	font-size: 1.15rem;
}

.step-title { margin-bottom: 0.6rem; }
.step-description { font-size: 0.92rem; color: #4a4439; line-height: 1.6; }

.steps-cta { text-align: center; margin-top: 3.5rem; }

/* ===== Theme ===== */
.steps.theme-dark { background: var(--bark); color: var(--stone); }
.steps.theme-dark .steps-description,
.steps.theme-dark .step-description { color: rgba(237, 230, 216, 0.78); }
.steps.theme-dark .step-item::after,
.steps.theme-dark .steps-grid--vertical::before { background: rgba(237, 230, 216, 0.16); }

/* ===== Text alignment (independent of orientation) ===== */
.steps-grid--align-left .step-item { text-align: left; }
.steps-grid--align-right .step-item { text-align: right; }

/* ===== Orientation: vertical (always single column) =====
   Reuses the exact same step-item card, just stacked top to bottom with a
   continuous vertical connecting line instead of a horizontal one per row. */
.steps-grid--vertical {
	position: relative;
	flex-direction: column;
	align-items: center;
}
.steps-grid--vertical::before {
	content: '';
	position: absolute;
	top: 24px;
	bottom: 24px;
	left: 50%;
	width: 1px;
	background: var(--line);
	z-index: 0;
}
.steps-grid--vertical .step-item {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 100%;
	max-width: 560px;
	padding: 0;
}
.steps-grid--vertical .step-item:not(:last-child) { margin-bottom: 2.4rem; }
.steps-grid--vertical .step-item::after { display: none; }

/* Non-standard 980px/560px breakpoints matched deliberately — every other
   module in this theme switches at those two widths, so Steps follows the
   same tiers to stay visually consistent with everything else on the page. */
@media (max-width: 980px) {
	.steps-grid--cols-3 .step-item,
	.steps-grid--cols-4 .step-item,
	.steps-grid--cols-5 .step-item {
		flex: 0 0 50%;
		margin-bottom: 2.4rem;
	}

	.steps-grid--cols-3 .step-item:nth-child(2n)::after,
	.steps-grid--cols-4 .step-item:nth-child(2n)::after,
	.steps-grid--cols-5 .step-item:nth-child(2n)::after {
		display: none;
	}
}

@media (max-width: 560px) {
	.steps-grid { margin-top: 2.4rem; }

	.steps-grid--cols-2 .step-item,
	.steps-grid--cols-3 .step-item,
	.steps-grid--cols-4 .step-item,
	.steps-grid--cols-5 .step-item {
		flex: 0 0 100%;
		margin-bottom: 2rem;
	}

	.step-item:last-child { margin-bottom: 0; }
	.step-item::after { display: none; }
}