/* Block: Intro. Figma: Home 1:27-1:40 */

.section--intro { --pt: var(--space-xl); }

.intro {
	display: grid;
	grid-template-columns: 36.55% 43.86%; /* 690 and 828 of 1888 */
	justify-content: space-between;
}

.intro__media { aspect-ratio: 690 / 1250; }

.intro__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-m);
	margin-top: -0.3vw; /* optical: cap height lines up with the image top */
}

.intro__title { max-width: 9.75em; } /* 760 at 78px */

.intro__text {
	margin: clamp(36px, 7.2vw, 138px) 0 0 30%; /* text starts 248 into the 828 column */
	max-width: 28em;
}

.intro__text .rich-text > * + * { margin-top: 1.58em; }
.intro__text .text-link { margin-top: clamp(28px, 2.35vw, 45px); }

.intro__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	grid-auto-flow: column;
	margin: 0;
}

.stat {
	display: flex;
	flex-direction: column-reverse; /* number shown above its label, label first for screen readers */
	justify-content: flex-end;
	gap: clamp(14px, 1.4vw, 27px);
}

.stat + .stat {
	padding-left: clamp(16px, 2.08vw, 40px);
	border-left: 1px solid var(--c-line-2);
}

.stat__number {
	margin: 0;
	font-size: var(--fs-stat);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.022em;
}

.stat__label { margin: 0; }

@media (max-width: 1024px) {
	.intro {
		grid-template-columns: 1fr;
		gap: var(--space-m);
	}

	.intro__media {
		max-width: 520px;
		aspect-ratio: 4 / 5;
	}

	.intro__body { margin-top: 0; }
	.intro__text { margin-left: 0; }
}

@media (max-width: 480px) {
	.stat__number { font-size: clamp(2rem, 10vw, 3.25rem); }
	.stat + .stat { padding-left: 14px; }

	/* Four statistics do not fit one row on a phone: two by two. */
	.intro__stats:has(.stat:nth-child(4)) {
		grid-auto-flow: row;
		grid-template-columns: 1fr 1fr;
		gap: 32px 0;
	}

	.intro__stats:has(.stat:nth-child(4)) .stat:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
}