/*
 * Over ons. Figma frame BSGV-over ons-2.
 * Light yellow panel from the left viewport edge to the content's right edge
 * (y218), title at y266 (48 in), intro text at x767. Rows: label column 137,
 * text 402 wide; photo 636x414 at x697. Statement Eudoxus Light 22 at x128,
 * 1129 wide. Full-bleed photo 1512x718 directly below the panel.
 */

.about__panel {
	position: relative;
	isolation: isolate;
	margin-top: 45px;
	padding-bottom: 75px;

	/* Yellow from the viewport's left edge to the container's content edge. */
	&::before {
		content: "";
		position: absolute;
		inset: 0 var(--wp--custom--gutter) 0 calc(50% - 50vw);
		z-index: -1;
		background: var(--wp--preset--color--yellow-light);

		/* Phones: full width, otherwise the text touches the panel's right edge. */
		@media (max-width: 1023px) {
			right: 0;
		}
	}

	& > * {
		position: relative;
	}
}

/* Doubled class beats page-intro.css, which loads later. */
.about__intro.about__intro {
	padding-top: 48px;

	& .page-intro__title {
		max-width: 586px;
	}

	@media (min-width: 1024px) {
		grid-template-columns: 659fr 566fr 71fr;

		& .page-intro__text {
			padding-top: 0;
			color: var(--wp--preset--color--text);
		}
	}
}

.about__top {
	display: grid;
	gap: 48px;
	margin-top: clamp(48px, 7.14vw, 108px);

	@media (min-width: 1024px) {
		grid-template-columns: 589fr 636fr 71fr;
		align-items: start;
		gap: 0;

		& .about__side-image {
			grid-column: 2;
		}
	}
}

.about__rows {
	display: grid;
	gap: clamp(32px, 5.16vw, 78px);
}

.about__row {
	display: grid;
	gap: 8px;

	@media (min-width: 768px) {
		grid-template-columns: 137px minmax(0, 1fr);
		gap: 0;
	}
}

.about__label {
	padding-top: 6px;
	color: var(--wp--preset--color--text);
}

.about__text {
	max-width: 402px;
	color: var(--wp--preset--color--text);

	& > * + * {
		margin-top: 1em;
	}

	/* Rows under the statement are wider (822). */
	.about__statement ~ .about__rows & {
		max-width: 822px;
	}
}

.about__side-image {
	aspect-ratio: 636 / 414;
	overflow: hidden;

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: grayscale(1);
	}
}

.about__statement {
	max-width: 1129px;
	margin-top: clamp(48px, 5vw, 76px);
	color: var(--wp--preset--color--text);
	line-height: var(--wp--custom--line-height--body);

	@media (min-width: 1024px) {
		padding-left: 20px;
	}

	& + .about__rows {
		margin-top: clamp(48px, 5.75vw, 87px);
	}
}

.about__wide-image {
	aspect-ratio: 1512 / 718;
	overflow: hidden;

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.about .site-cta {
	margin-top: clamp(48px, 6vw, 92px);
}