/**
 * OSHIDA — services / service-grid.
 *
 * @figma 1579:1160  Group 392 — 1104.90 x 1564.33 at (178.51, 1414.68).
 * @figma 1579:1067  card — 532.45 x 360.63, r=50, padding 70/40, veil card,
 *                   shadow spread −2px. Icon 110.27 centred at block 70,
 *                   title 32/900 on a 56px box, body 22/200 on a 30px box.
 *
 * TWO INDEPENDENT STACKS, not a grid. The design's card tops are
 *   inline-start column: 1414.68 / 1815.31 / 2216.47 / 2617.38
 *   inline-end column:   1580.47 / 2011.11 / 2411.73
 * which never share a row, so a CSS grid — including base/layout.css's
 * `.o-stagger` — cannot reproduce them: grid rows couple the two columns and
 * force their tops to align. Each column is therefore its own flex column.
 *
 * On design-tokens.md §9.7 ("the stagger is 30px out on one card"): it is not
 * an inconsistency. Every gap in both columns is exactly 40px; the 430.64px
 * pitch appears only because the «خدمات خلاق» card (1579:1084) is 390.63px tall
 * instead of 360.63 — its description wraps onto a second line. Reproducing the
 * uniform 40px gap therefore reproduces the design EXACTLY, including the 30px
 * offset, with no special case. Nothing was regularised.
 *
 * Owner: work package C3.
 */

.o-services-grid {
	position: relative;
	z-index: var(--o-z-raised);
	padding-block-start: clamp(56px, 9.86vw, 142px);
}

.o-services-grid__cols {
	display: flex;
	gap: var(--o-space-lg); /* 39.33px measured between the two columns. */
	inline-size: min(100%, 1105px);
	margin-inline: auto;
}

.o-services-grid__col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--o-space-lg); /* Every vertical gap in the design is 40px. */
	min-inline-size: 0;
}

/* 1580.47 − 1414.68 = 165.79px — --o-card-offset. */
.o-services-grid__col--trail {
	margin-block-start: clamp(60px, 11.51vw, var(--o-card-offset));
}

/* --------------------------------------------------------------------------
 * Card geometry that is specific to this grid
 * -------------------------------------------------------------------------- */

.o-services-grid__card {
	gap: 0;
	align-items: center;
	text-align: center;
}

.o-services-grid__card .o-card__icon {
	display: flex;
	justify-content: center;
	inline-size: 100%;
	block-size: auto;
}

.o-services-grid__card .o-card__icon-svg {
	inline-size: auto;
	block-size: clamp(72px, 7.66vw, 110px);
}

/* Icon box ends at 180.27, title box starts at 202.63. */
.o-services-grid__card .o-card__title {
	margin-block-start: clamp(14px, 1.55vw, 22px);
	inline-size: 100%;
	line-height: 1.75; /* 56 / 32 — the measured line box of 1579:1069. */
}

/* Title box ends at 258.63, body box starts at 260.63. */
.o-services-grid__card .o-card__body {
	margin-block-start: 2px;
	inline-size: 100%;
}

@media (max-width: 599px) {
	.o-services-grid__cols {
		flex-direction: column;
		gap: var(--o-space-md);
	}

	/* No clever stagger on a phone: one flush column. */
	.o-services-grid__col--trail {
		margin-block-start: 0;
	}

	.o-services-grid__col {
		gap: var(--o-space-md);
	}
}