/**
 * OSHIDA — about / market-problem.
 *
 * @figma 2014:2532  heading + lede, 629 x 102 at (405.50, 8956.12), centred
 * @figma 2014:2529  اتلاف وقت,          288.67 x 205.72 at (381.85, 9134.53)
 * @figma 2014:2520  هماهنگی ناکافی,     288.67 x 205.72 at (777.15, 9124.68)
 * @figma 2014:2523  شکاف استراتژی-اجرا, 282    x 196    at (579.41, 9373.46)
 * @figma 2014:2526  پراکندگی تخصص‌ها,   291.87 x 210.49 at (161.03, 9380.98)
 * @figma 2014:2517  عدم وضوح در شروع,   291.87 x 210.49 at (998.18, 9366.22)
 * @figma 2014:2511-2515  the five dashed connectors, all ending at y≈9686.4
 *
 * The five nodes are hand-placed, not on a grid: their inline offsets are
 * 0 / 19.86 / 37.97 / 54.87 / 74.15 percent of the 1129px diagram and their
 * block offsets are 0 / 9.85 / 241.54 / 248.78 / 256.30. Reproduced exactly,
 * but only from `xl` up — the composition is a 1440px drawing. Below 1200px
 * the cards become an ordinary grid and the connectors switch off.
 *
 * CONNECTORS IN CSS, NOT SVG. Each card owns one ::after with
 * `border-inline-start: 1px dashed`, running from its own edge down to the
 * chain. An SVG would carry the five nodes' absolute coordinates in a fixed
 * viewBox, so the whole drawing has to be replaced at 390px rather than simply
 * stopping; CSS also adds no DOM, no aria-hidden subtree, and keeps the
 * hairline at exactly 1px at any zoom. Given up in exchange: 2014:2511/2512/
 * 2513/2515 drift ~22px along the inline axis over their run — very shallow
 * curves. Ours are straight.
 *
 * The connectors deliberately overhang this section: in the design they
 * overdraw the top rows of the chain (which is why A4 had to despeckle them
 * out of the about-chain crop). Nothing on this route clips them.
 *
 * Owner: work package C2.
 */

.o-about-market-problem {
	padding-block-start: var(--o-about-gap-lg); /* 8956.12 - 8756.25 = 199.9 */
}

.o-about-market-problem__heading {
	max-inline-size: 629px;
	margin-inline: auto;
	text-align: center;
}

.o-about-market-problem__title {
	margin: 0;
	font-size: var(--o-fs-h1);
	font-weight: var(--o-fw-black);
	line-height: var(--o-lh-heading);
	letter-spacing: var(--o-track-snug);
	text-wrap: balance;
}

.o-about-market-problem__accent {
	color: var(--o-gold);
	font-weight: var(--o-fw-black);
}

.o-about-market-problem__lede {
	margin: 0;
	margin-block-start: var(--o-space-2xs);
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-extralight);
	line-height: var(--o-lh-heading);
}

/* --------------------------------------------------------------------------
 * The diagram
 * -------------------------------------------------------------------------- */

.o-about-market-problem__diagram {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--o-space-md);
	max-inline-size: 1129px; /* 1290.05 - 161.03 */
	margin: 0;
	margin-block-start: clamp(32px, 4.6vw, 67px); /* 9124.68 - 9058.12 */
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

.o-about-market-problem__node {
	padding-block: clamp(20px, 2.1vw, 30px);
	padding-inline: clamp(16px, 1.7vw, 24px);
	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: center;
}

.o-about-market-problem__node-title {
	margin: 0;
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-black);
	line-height: var(--o-lh-heading);
	letter-spacing: var(--o-track-tight);
}

.o-about-market-problem__node-body {
	margin: 0;
	margin-block-start: var(--o-space-2xs);
	font-size: var(--o-fs-xs);
	font-weight: var(--o-fw-extralight);
	line-height: 2;
}

/* --------------------------------------------------------------------------
 * The 1440px composition
 * -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
	.o-about-market-problem__diagram {
		display: block;
		position: relative;
		block-size: 467px; /* 9591.47 - 9124.68 */
	}

	.o-about-market-problem__node {
		position: absolute;
		min-block-size: 196px;
	}

	.o-about-market-problem__node--hamahangi {
		inset-block-start: 0;
		inset-inline-start: 19.86%;
		inline-size: 25.57%;
	}

	.o-about-market-problem__node--etlaf {
		inset-block-start: 9.85px;
		inset-inline-start: 54.87%;
		inline-size: 25.57%;
	}

	.o-about-market-problem__node--shoru {
		inset-block-start: 241.54px;
		inset-inline-start: 0;
		inline-size: 25.85%;
	}

	.o-about-market-problem__node--shekaf {
		inset-block-start: 248.78px;
		inset-inline-start: 37.97%;
		inline-size: 24.98%;
	}

	.o-about-market-problem__node--parakandegi {
		inset-block-start: 256.30px;
		inset-inline-start: 74.15%;
		inline-size: 25.85%;
	}

	/* The dashed drop lines. Each ends on the chain at y = 9686.4. */
	.o-about-market-problem__node::after {
		content: "";
		position: absolute;
		inset-block-start: 100%;
		inline-size: 0;
		border-inline-start: var(--o-line-width) dashed var(--o-line);
		pointer-events: none;
	}

	.o-about-market-problem__node--etlaf::after {
		inset-inline-start: 42.79%;
		block-size: 346px;
	}

	.o-about-market-problem__node--hamahangi::after {
		inset-inline-start: 59.71%;
		block-size: 356px;
	}

	.o-about-market-problem__node--shoru::after {
		inset-inline-start: 62.55%;
		block-size: 109px;
	}

	.o-about-market-problem__node--shekaf::after {
		inset-inline-start: 50.15%;
		block-size: 117px;
	}

	.o-about-market-problem__node--parakandegi::after {
		inset-inline-start: 32.82%;
		block-size: 95px;
	}
}

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

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