/**
 * OSHIDA — home pillars, scroll-pinned.
 *
 * @figma 1559:895  Group 386, 1079.05 x 1073.05 at (182.46, 3211.67)
 * @figma 1364:1493 the oversized «۰۱», the full size of the group
 * @figma 1445:255  card 472.79 x 207.46, padding ~40/45
 * @figma 1364:1496 number badge 44.32 x 38.42, gold, dark label
 * @figma 1364:1499 rail 571.89 wide: nine 40.44 dashes on a 51.36 pitch plus a
 *                  94.92 current step, all 2.17 tall
 *
 * The FRAME is what is pinned. `position: sticky` holds the numeral and the
 * rail while the cards scroll through them; with JavaScript off the list is
 * still an ordered list of readable cards and the rail simply shows step one.
 *
 * Owner: work package C1.
 */

.o-home-pillars {
	padding-block-end: clamp(64px, 16.92vw, 243.6px);
}

.o-home-pillars__stage {
	display: grid;
}

.o-home-pillars__stage > * {
	grid-area: 1 / 1;
}

/* --------------------------------------------------------------------------
 * The pinned frame
 * -------------------------------------------------------------------------- */
.o-home-pillars__frame {
	position: sticky;
	z-index: var(--o-z-base);
	inset-block-start: 0;
	align-self: start;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	justify-items: center;
	align-items: center;
	block-size: 100svb;
	padding-block-end: clamp(24px, 5.5vw, 80px);
	pointer-events: none;
	user-select: none;
}

/*
 * The design draws this as a vector, not as live text, and no export exists.
 * Set in Estedad it is the right idea at the right size and the right weight,
 * but not the design's letterforms — see the report. L 47 against an L 40
 * ground, i.e. white at ~3%.
 */
.o-home-pillars__numeral {
	grid-row: 1;
	font-size: clamp(190px, 52vw, 750px);
	font-weight: var(--o-fw-black);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--o-text);
	opacity: 0.03;
}

/* --------------------------------------------------------------------------
 * The step rail
 * -------------------------------------------------------------------------- */
.o-home-pillars__rail {
	grid-row: 2;
	display: flex;
	align-items: center;
	gap: clamp(6px, 0.76vw, 10.92px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-home-pillars__step {
	inline-size: clamp(24px, 2.81vw, 40.44px);
	block-size: 2.17px;
	border-radius: var(--o-radius-pill);
	background-color: var(--o-line-soft);
}

.o-home-pillars__step.is-current {
	inline-size: clamp(56px, 6.59vw, 94.92px);
	background-color: var(--o-line);
}

@media (prefers-reduced-motion: no-preference) {
	.o-home-pillars__step {
		transition:
			inline-size var(--o-dur-base) var(--o-ease-standard),
			background-color var(--o-dur-base) var(--o-ease-standard);
	}
}

/* --------------------------------------------------------------------------
 * The cards
 * -------------------------------------------------------------------------- */
.o-home-pillars__list {
	position: relative;
	z-index: var(--o-z-raised);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-home-pillars__item {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 62svb;
}

/*
 * 528px, not the design's 472.79: the design sets the body at ~13.5px, below
 * the legibility floor, so the card is scaled by 15/13.5 with every internal
 * proportion kept. See the report.
 */
.o-home-pillars__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: clamp(10px, 1.07vw, 15.4px);
	inline-size: min(100%, 528px);
	padding: clamp(24px, 3.1vw, 44.6px) clamp(20px, 3.13vw, 45px);
	border: var(--o-line-width) solid var(--o-line-soft);
	border-radius: var(--o-radius-lg);
	background-color: var(--o-veil-card);
	box-shadow: var(--o-shadow-panel);
	text-align: start;
}

.o-home-pillars__badge {
	grid-area: 1 / 1 / 2 / 2;
	align-self: start;
	display: grid;
	place-items: center;
	margin: 0;
	inline-size: 44.32px;
	block-size: 38.42px;
	border-radius: var(--o-radius-pill);
	background-color: var(--o-gold);
	color: var(--o-text-on-gold);
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-black);
	line-height: 1;
}

.o-home-pillars__heading {
	grid-area: 1 / 2 / 2 / 3;
	margin: 0;
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-black);
	line-height: 1.3;
	letter-spacing: var(--o-track-tight);
}

.o-home-pillars__latin {
	grid-area: 2 / 2 / 3 / 3;
	margin: 0;
	font-size: var(--o-fs-xs);
	font-weight: var(--o-fw-extralight);
	line-height: 1.4;
	color: var(--o-text);
	opacity: 0.62;
}

.o-home-pillars__body {
	grid-area: 3 / 1 / 4 / 3;
	margin-block-start: var(--o-space-xs);
	font-size: var(--o-fs-xs);
	font-weight: var(--o-fw-extralight);
	line-height: 1.72;
	text-align: justify;

	/* Design value is --o-text-muted; raised for contrast, see the report. */
	color: var(--o-text);
	opacity: 0.78;
}

.o-home-pillars__body > p {
	margin: 0;
}

.o-home-pillars__body > p + p {
	margin-block-start: var(--o-space-2xs);
}

@media (max-width: 599px) {
	.o-home-pillars__frame {
		block-size: 78svb;
	}

	.o-home-pillars__item {
		min-block-size: 56svb;
	}
}