/**
 * OSHIDA — services / challenges.
 *
 * @figma 1707:3832  Group 347 — 936.22 x 362.36 at (251.55, 3420.94).
 * @figma 1707:3846  heading — 367 x 47 at (536.16, 3420.94). Gold, 900, ~32px:
 *                   the ink measures 370px across 23 units, i.e. --o-fs-h2.
 * @figma 1707:3833  the pills — 284.18 x 112 each, three per row, 41.84px
 *                   column gap, 30.17px row gap, text inset 44 inline / 23
 *                   block, three lines of 15px on a 22px leading.
 *
 * The pill radius is NOT measurable from the render: the fill is only ten
 * levels above the ground, so the corner scan is inside its own noise. The
 * flat run of the top edge reads as ~40px, and --o-radius-xl (50px) is the
 * nearest real token — recorded as an approximation, not a measurement.
 *
 * Owner: work package C3.
 */

.o-services-challenges {
	padding-block-start: clamp(48px, 8.61vw, 124px);
}

.o-services-challenges__heading .o-section-heading__title {
	font-size: var(--o-fs-h2);
	line-height: 1.47; /* 47 / 32 — the measured line box of 1707:3846. */
	color: var(--o-gold);
}

.o-services-challenges__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--o-space-md) var(--o-space-lg); /* 30.17 x 41.84 measured. */
	inline-size: min(100%, 936px);
	margin-block: clamp(28px, 4.25vw, 61px) 0;
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

.o-services-challenges__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 112px;
	padding: 23px clamp(16px, 3.06vw, 44px);
	border-radius: var(--o-radius-xl);
	background-color: var(--o-veil-card);
}

.o-services-challenges__text {
	font-size: var(--o-fs-xs);
	font-weight: var(--o-fw-extralight);
	line-height: 1.467; /* 22 / 15 — three lines in the measured 66px box. */
	color: var(--o-text);
	text-align: center;
	text-wrap: pretty;
}

@media (max-width: 899px) {
	.o-services-challenges__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.o-services-challenges__list {
		grid-template-columns: minmax(0, 1fr);
	}
}