/*
 * intake-steps.css — the three-step admission process on the Inpatient
 * Treatment Program page (template-parts/intake-steps.php).
 *
 * No Figma frame exists for this — see that file's own docblock. The dark
 * band, the light step cards, the numbered badge and the checklist are all
 * copied from the tokens and proportions .approach and .detox already
 * establish, not invented fresh, so this reads as part of the same site
 * rather than a one-off.
 */

.intakeSteps {
	background: var(--surface-deep);
	color: var(--warm-sand);
}

.intakeStepsInner {
	width: min(100% - (var(--gutter) * 2), var(--container));
	margin-inline: auto;
	padding-block: clamp(56px, 6.2vw, 110px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.intakeStepsEyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	line-height: 28px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--warm-sand);
}

.intakeStepsEyebrow .eyebrowRule {
	color: var(--accent);
}

.intakeStepsTitle {
	margin-top: clamp(12px, 1.3vw, 20px);
	max-width: 20em;
	font-size: 42px;
	line-height: 1.364;
	font-weight: 400;
	text-align: center;
	text-transform: capitalize;
	text-wrap: balance;
	color: var(--warm-sand);
}

.intakeStepsIntro {
	margin-top: 14px;
	max-width: 540px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.625;
	color: rgba(246, 242, 234, 0.82);
}

/* ------------------------------------------------------------- Steps */

.intakeStepsGrid {
	width: 100%;
	margin: clamp(32px, 3.4vw, 60px) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 26px);
}

.intakeStep {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 40px clamp(24px, 2.6vw, 36px) 32px;
	border-radius: 32px;
	text-align: left;
	color: var(--ink);
	background: var(--surface-frame);
}

.intakeStepBadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--accent-deep);
	color: var(--white);
	font-family: var(--font);
	font-size: 20px;
}

.intakeStepTitle {
	margin-top: 20px;
	font-size: 24px;
	line-height: 1.3;
	font-weight: 400;
	color: var(--forest-ink);
}

.intakeStepText {
	margin-top: 10px;
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	/* 6.7:1 on --surface-frame, the same substitution every light section
	   here makes for running copy (see service-area.css). */
	color: var(--ink-muted);
}

.intakeStepList {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.intakeStepListItem {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.4;
	color: var(--ink);
}

.intakeStepListItem .listCheck {
	flex: 0 0 auto;
	width: 17px;
	height: 20px;
	margin-top: 2px;
	color: var(--accent-deep);
}

.intakeStepsCta {
	margin-top: clamp(32px, 3.6vw, 48px);
}

/* --------------------------------------------------------------- Small */

@media (max-width: 900px) {
	.intakeStepsGrid {
		grid-template-columns: minmax(0, 1fr);
	}
}