/**
 * Numbered steps: `grid gap-5 md:grid-cols-3` (or `md:2 lg:5`); a step is
 * `rounded-lg border border-border/60 bg-card p-6`, its border reddening
 * and a shadow appearing on hover; the number `text-sm font-medium` in the
 * dark red, the title `mt-3 text-lg font-bold`, the text `mt-3 text-sm
 * leading-relaxed`.
 */

.sba-c-steps .sba-c-steps-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The reset above outranks the frame's spacing under the header. */
.sba-c-steps .sba-c-section-header + .sba-c-steps-list {
	margin-top: 40px;
}

.sba-c-steps .sba-c-step {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 24px;
	border: 1px solid color-mix(in srgb, var(--sba-border) 60%, transparent);
	border-radius: var(--sba-radius);
	background-color: var(--sba-surface);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.sba-c-steps .sba-c-step:hover {
	border-color: hsl(var(--sba-red-hsl) / 0.4);
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.sba-c-steps .sba-c-step-number {
	color: var(--sba-red-dark);
	font-size: 14px;
	font-weight: 500;
	/* The prototype's number is an inline span in the card's 24px line. */
	line-height: 24px;
}

.sba-c-steps .sba-c-step-title {
	margin: 12px 0 0;
	color: var(--sba-charcoal);
	font-family: var(--sba-font-sans);
	font-size: 18px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
}

.sba-c-steps .sba-c-step-when {
	margin: 4px 0 0;
	color: var(--sba-slate);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.sba-c-steps .sba-c-step-text {
	flex: 1 1 auto;
	margin: 12px 0 0;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 1.625;
}

/* The link in the 22px line of the prototype's inline-flex link. */
.sba-c-steps .sba-c-step-more {
	margin: 20px 0 0;
	font-size: 16px;
	line-height: 22px;
}

/* Large: `gap-6`, the card `rounded-xl`, no hover, the number
   `font-semibold tabular-nums`, the title `text-xl`; the note under the
   steps `mt-8 text-sm` muted. */
.sba-c-steps .sba-c-steps-large {
	gap: 24px;
}

.sba-c-steps .sba-c-steps-large .sba-c-step {
	border-radius: 12px;
}

.sba-c-steps .sba-c-steps-large .sba-c-step:hover {
	border-color: color-mix(in srgb, var(--sba-border) 60%, transparent);
	box-shadow: none;
}

.sba-c-steps .sba-c-steps-large .sba-c-step-number {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.sba-c-steps .sba-c-steps-large .sba-c-step-title {
	font-size: 20px;
}

/* Large in five columns (Partnering's timeline): `mt-12` under the header,
   the card a flex column, so the number and the link in boxes of their own
   height; the title `text-lg leading-snug`, "when" `mt-1` in regular
   weight, the link `mt-4`. */
.sba-c-steps .sba-c-steps-large.sba-c-steps-5 .sba-c-step-number,
.sba-c-steps .sba-c-steps-large.sba-c-steps-5 .sba-c-step-more {
	line-height: 20px;
}

.sba-c-steps .sba-c-section-header + .sba-c-steps-large.sba-c-steps-5 {
	margin-top: 48px;
}

.sba-c-steps .sba-c-steps-large.sba-c-steps-5 .sba-c-step-title {
	font-size: 18px;
	line-height: 1.375;
}

.sba-c-steps .sba-c-steps-large .sba-c-step-when {
	font-weight: 400;
}

.sba-c-steps .sba-c-steps-large.sba-c-steps-5 .sba-c-step-more {
	margin-top: 16px;
}

.sba-c-steps .sba-c-steps-note {
	margin-top: 32px;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-steps .sba-c-steps-note p {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

@media (min-width: 768px) {
	.sba-c-steps .sba-c-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sba-c-steps .sba-c-steps-4,
	.sba-c-steps .sba-c-steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.sba-c-steps .sba-c-steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sba-c-steps .sba-c-steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}