/**
 * 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)); }
}

/* Timeline (Delegation booths' deadlines, after the old Global Village
   page's arrow graphic): no numbers and no cards, each date a marker on a
   rail, the date over the title. A key date, a deadline, takes the brand
   red in a larger marker with a light red ring, the date at 28px in the
   dark red and the title in bold; the other dates stay muted, so two
   deadlines read as two among four dates. The rail runs down the left
   below 1024px and across from there, ending in an arrow, the key dates
   in wider columns. */
.sba-c-steps .sba-c-steps-timeline {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-left: 32px;
}

.sba-c-steps .sba-c-steps-timeline::before {
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 7px;
	width: 2px;
	background-color: var(--sba-border);
	content: "";
}

.sba-c-steps .sba-c-steps-timeline .sba-c-step,
.sba-c-steps .sba-c-steps-timeline .sba-c-step:hover {
	position: relative;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.sba-c-steps .sba-c-steps-timeline .sba-c-step::before {
	position: absolute;
	top: 6px;
	left: -30px;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border: 2px solid var(--sba-slate);
	border-radius: 50%;
	background-color: var(--sba-surface);
	content: "";
}

.sba-c-steps .sba-c-steps-timeline .sba-c-step.is-key::before {
	top: 10px;
	left: -32px;
	width: 16px;
	height: 16px;
	border: 0;
	background-color: var(--sba-red);
	box-shadow: 0 0 0 4px var(--sba-red-light);
}

.sba-c-steps .sba-c-steps-timeline .sba-c-step-when {
	order: -1;
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.sba-c-steps .sba-c-steps-timeline .sba-c-step-title {
	margin-top: 4px;
	color: var(--sba-slate);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.sba-c-steps .sba-c-steps-timeline .sba-c-step-text {
	flex: 0 0 auto;
	margin-top: 8px;
}

.sba-c-steps .sba-c-steps-timeline .sba-c-step-more {
	margin-top: 12px;
}

.sba-c-steps .sba-c-steps-timeline .is-key .sba-c-step-when {
	color: var(--sba-red-dark);
	font-family: var(--sba-font-sans);
	font-size: 28px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 36px;
}

.sba-c-steps .sba-c-steps-timeline .is-key .sba-c-step-title {
	margin-top: 8px;
	color: var(--sba-charcoal);
	font-size: 18px;
	font-weight: var(--sba-heading-weight);
	line-height: 26px;
}

@media (min-width: 1024px) {
	.sba-c-steps .sba-c-steps-timeline {
		flex-direction: row;
		padding-top: 40px;
		padding-left: 0;
	}

	.sba-c-steps .sba-c-steps-timeline::before {
		top: 7px;
		right: 2px;
		bottom: auto;
		left: 0;
		width: auto;
		height: 2px;
	}

	/* The arrow at the rail's end. */
	.sba-c-steps .sba-c-steps-timeline::after {
		position: absolute;
		top: 3px;
		right: 2px;
		width: 10px;
		height: 10px;
		border-top: 2px solid var(--sba-border);
		border-right: 2px solid var(--sba-border);
		transform: rotate(45deg);
		content: "";
	}

	.sba-c-steps .sba-c-steps-timeline .sba-c-step {
		flex: 2 1 0;
		min-width: 0;
	}

	.sba-c-steps .sba-c-steps-timeline .sba-c-step.is-key {
		flex-grow: 3;
	}

	.sba-c-steps .sba-c-steps-timeline .sba-c-step::before {
		top: -38px;
		left: 0;
	}

	.sba-c-steps .sba-c-steps-timeline .sba-c-step.is-key::before {
		top: -40px;
		left: 0;
	}
}