/**
 * OSHIDA — about / ecosystem-list.
 *
 * @figma 2014:2629  heading 1168 x 63 at (136, 5629.97), centred
 * @figma 2014:2622  ۰۱ 664.13 x 101.22 at (525.94, 5744.62) — flush inline START
 * @figma 2014:2626  ۰۲ 641.13 x 101.22 at (243,    5875.84) — flush inline END
 * @figma 2014:2625  ۰۷ 704.13 x 118    at (485.94, 6531.95)
 * @figma 2014:2655  Rectangle 1504 — the 42.26 x 39.90 gold block beside ۰۱
 *
 * THE TRACK. Every odd pill ends at x=1190.07 and every even pill starts at
 * x=243, inside a group spanning 136–1304. So the pills live on their own
 * 947px track, centred in the panel column, with the odd ones flush to its
 * inline start and the even ones flush to its inline end. Each pill's width is
 * its own content — that is what produces the stagger, not a fixed offset.
 *
 * Pitch 131.22 on a 101.22 pill = a 30px gap.
 * Padding 80px inline (607 - 525.94 and 1190.07 - 1110), badge gap 30.
 *
 * Owner: work package C2.
 */

.o-about-ecosystem-list {
	padding-block-start: var(--o-about-gap);
}

.o-about-ecosystem-list__list {
	max-inline-size: 947px; /* 1190.07 - 243 */
	margin-block: clamp(28px, 3.6vw, 52px) 0; /* 5744.62 - 5692.97 */
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

.o-about-ecosystem-list__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.1vw, 30px);
	inline-size: fit-content;
	min-block-size: 101px;
	padding-block: var(--o-space-xs);
	padding-inline: clamp(20px, 5.6vw, 80px);
	border: var(--o-line-width) solid var(--o-line-soft);
	border-radius: var(--o-radius-xl);
	background-color: var(--o-veil-card);
	box-shadow: var(--o-shadow-panel);
}

.o-about-ecosystem-list__item + .o-about-ecosystem-list__item {
	margin-block-start: var(--o-space-md); /* 131.22 - 101.22 */
}

/* Odd pills hug the inline start of the track, even pills the inline end. */
.o-about-ecosystem-list__item:nth-child(odd) {
	margin-inline-end: auto;
}

.o-about-ecosystem-list__item:nth-child(even) {
	margin-inline-start: auto;
}

.o-about-ecosystem-list__badge {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 46px;
	block-size: 44px;
	border-radius: var(--o-radius-sm);
	background-color: var(--o-gold);
	color: var(--o-text-on-gold);
	font-size: var(--o-fs-body);
	font-weight: var(--o-fw-black);
	line-height: 1;
}

.o-about-ecosystem-list__text {
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-black);
	line-height: var(--o-lh-heading);
	letter-spacing: var(--o-track-tight);
}

/*
 * Rectangle 1504 — a decorative gold block that sits 2px beyond the inline
 * start of the first pill. It hangs outside the track, so it is only drawn
 * where the panel column is wide enough to hold it without pushing the page
 * into horizontal overflow.
 */
@media (min-width: 1300px) {
	.o-about-ecosystem-list__item:first-child::before {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: -44px;
		inline-size: 42px;
		block-size: 40px;
		translate: 0 -50%;
		border-radius: var(--o-space-3xs);
		background-color: var(--o-gold);
		pointer-events: none;
	}
}

@media (max-width: 899px) {
	.o-about-ecosystem-list__item,
	.o-about-ecosystem-list__item:nth-child(odd),
	.o-about-ecosystem-list__item:nth-child(even) {
		inline-size: 100%;
		margin-inline: 0;
	}
}

@media (max-width: 599px) {
	.o-about-ecosystem-list__item {
		gap: var(--o-space-2xs);
		min-block-size: 0;
		padding-inline: var(--o-space-xs);
		border-radius: var(--o-radius-lg);
	}

	.o-about-ecosystem-list__badge {
		inline-size: 38px;
		block-size: 36px;
	}
}