/**
 * OSHIDA — home «چرا سازمان‌ها با اوشیدا همکاری می‌کنند؟».
 *
 * @figma 1621:1265  panel 1167.24 x 871.11, --o-veil-notch, r=50 + the notch
 * @figma 1601:2100  heading 669 x 63 at (579.84, 2110.72) — 43.2 below the panel
 * @figma 1598:1950  grid 1166 x 786, padding 63/58, gap 30
 * @figma 1601:2092  card 510 x 200, icon 70 square at x=410, text column 355
 *
 * Owner: work package C1.
 */

.o-home-why-partner {
	position: relative;
	padding-block-end: var(--o-section-gap);
}

/* --------------------------------------------------------------------------
 * The notched panel
 *
 * --o-notch-clip is tokens.css's ready-made polygon. It leaves the three
 * corners it does not cross rounded; the fourth — the one inside the notch —
 * comes out square, which is the documented cost of clip-path over an SVG mask.
 * -------------------------------------------------------------------------- */
.o-home-why-partner__panel {
	padding: clamp(24px, 2.99vw, 43.2px) clamp(16px, 4.03vw, 58px) clamp(28px, 4.38vw, 63px);
	border-radius: var(--o-radius-xl);
	background-color: var(--o-veil-notch);
	clip-path: var(--o-notch-clip);
}

.o-home-why-partner__title {
	margin: 0;
	margin-block-end: clamp(24px, 2.88vw, 41.5px);
	font-size: var(--o-fs-h1);
	font-weight: var(--o-fw-black);
	line-height: 1.2;
	letter-spacing: var(--o-track-snug);
	text-align: start;
}

/* The arch mark sits on the text baseline between «با» and «اوشیدا». */
.o-home-why-partner__mark {
	display: inline-block;
	inline-size: 1.18em;
	block-size: 1.12em;
	vertical-align: -0.16em;
}

.o-home-why-partner__mark-svg {
	inline-size: 100%;
	block-size: 100%;
}

/* --------------------------------------------------------------------------
 * The grid
 * -------------------------------------------------------------------------- */
.o-home-why-partner__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--o-space-md);
}

/*
 * The card component stacks icon / title / body; the design runs the icon down
 * the inline-start edge with the copy beside it. In an RTL grid column 1 is the
 * physical right, which is where the icon belongs.
 */
.o-home-why-partner__card {
	display: grid;
	grid-template-columns: clamp(52px, 4.86vw, 70px) minmax(0, 1fr);
	column-gap: var(--o-space-sm);
	row-gap: 0;
	align-items: center;
	min-block-size: 200px;
	align-content: center;
}

.o-home-why-partner__card .o-card__icon {
	grid-area: 1 / 1 / 3 / 2;
	align-self: center;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1;
}

.o-home-why-partner__card .o-card__icon-svg {
	inline-size: 100%;
	block-size: 100%;
}

.o-home-why-partner__card .o-card__title {
	grid-area: 1 / 2 / 2 / 3;
	align-self: end;
}

.o-home-why-partner__card .o-card__body {
	grid-area: 2 / 2 / 3 / 3;
	align-self: start;

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

@media (max-width: 899px) {
	.o-home-why-partner__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.o-home-why-partner__card {
		min-block-size: 0;
	}

	/* Below the fold of the wide layout the notch has no heading to clear. */
	.o-home-why-partner__panel {
		clip-path: none;
	}
}