/*
 * Process rows. Figma 2480:69597: full-bleed background-grey band, 84px padding,
 * 24 gaps. Head: header/XL + body/M dark (740 wide), 16 gap. Row: 1px dark
 * left rule, 24px in; left column 576 (60px primary number circle, 16, header/L
 * title + body/S text 12 apart, 16, body/XS list with 6px primary dots, 8 apart)
 * centred beside a 580x387 photo, radius 16.
 * Mobile 2530:71913: 84/20 padding, header/L + body/S head; photo 350x234 with
 * the number 16px from its bottom-left corner, 16, header/M title, no rule.
 */

.process-rows {
	padding-block: 84px;
	background: var(--c-bg-grey);
}

.process-rows__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.process-rows__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 765px;
}

.process-rows__title { font: var(--f-header-xl); color: var(--c-text-dark); }
.process-rows__text { max-width: 740px; font: var(--f-body-m); color: var(--c-text-dark); }

.process-rows__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.process-row {
	display: grid;
	grid-template-columns: minmax(0, 576fr) minmax(0, 580fr);
	grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas:
		". media"
		"num media"
		"body media"
		". media";
	column-gap: clamp(24px, 2.7vw, 39px);
	padding-left: 24px;
	border-left: 1px solid var(--c-border-dark);
}

.process-row--no-image { grid-template-columns: minmax(0, 1fr); grid-template-areas: "." "num" "body" "."; }

.process-row__num {
	grid-area: num;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--c-primary);
	color: var(--c-text-white);
	font: var(--f-header-l);
}

.process-row__body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 16px;
	min-width: 0;
}

.process-row__copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.process-row__title { font: var(--f-header-l); color: var(--c-text-dark); }
.process-row__text { font: var(--f-body-s); color: var(--c-text-dark); }

.process-row__points {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font: var(--f-body-xs);
	color: var(--c-text-dark);
}

.process-row__points li {
	position: relative;
	padding-left: 14px;
}

.process-row__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-primary);
}

.process-row__media {
	grid-area: media;
	aspect-ratio: 580 / 387;
	border-radius: var(--r-m);
	overflow: hidden;
	background: var(--c-bg-white);
}

@media (max-width: 767px) {
	.process-rows__head { gap: 8px; }
	.process-rows__title { font: var(--f-header-l); }
	.process-rows__text { font: var(--f-body-s); }

	.process-row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		grid-template-areas: "media" "body";
		padding-left: 0;
		border-left: 0;
	}

	.process-row--no-image { grid-template-areas: "num" "body"; }

	/* Number sits on the photo's bottom-left corner. */
	.process-row__num {
		grid-area: media;
		z-index: 1;
		align-self: end;
		justify-self: start;
		margin: 0 0 16px 16px;
	}

	.process-row--no-image .process-row__num { grid-area: num; margin: 0; }

	.process-row__media { aspect-ratio: 350 / 234; }
	.process-row__copy { gap: 8px; }
	.process-row__title { font: var(--f-header-m); }
}