/**
 * WHO WE ARE (01)
 *
 * Two parts: an intro with the heading and copy on the left and a portrait
 * image on the right, then a three-column feature row beneath a full-bleed rule.
 *
 * Measured from the design (1440 frame):
 *   content column   x 138 → 1302  — exactly the 1164 wrapper
 *   image            x 848, 454x650, 20px radius
 *   feature columns  three equal 388px, dividers at x 526 and 914
 *   rule at y 1946   full-bleed, 0 → 1440
 */

@layer components {
	.who__intro {
		display: grid;
		gap: var(--space-l) var(--space-m);
		align-items: start;
		padding-block-end: var(--space-3xl);
	}

	@media (min-width: 60rem) {
		.who__intro {
			/* Image is 454 of the 1164 column; the copy takes the rest. */
			grid-template-columns: 1fr 39%;
		}
	}

	.who__eyebrow { margin: 0 0 var(--stack-eyebrow); }

	.who__title {
		margin: 0;
		/* 687 / 129 = 5.33em — reproduces the design's line breaks at any size. */
		max-inline-size: 5.4em;
	}

	.who__text {
		margin-block-start: var(--space-2xl);
		/* Copy is held to 455px in the design even though the column is wider. */
		max-inline-size: 29rem;
	}
	.who__text > * { margin: 0; }
	.who__text > * + * { margin-block-start: var(--space-m); }

	.who__lead {
		font-size: var(--fs-body-lg);
		line-height: var(--lh-body-lg);
		color: var(--clr-text-muted);
	}
	.who__body {
		color: var(--clr-text-muted);
	}

	.who__media {
		margin: 0;
		border-radius: var(--radius-card);
		overflow: hidden;
		background-color: var(--clr-bg-alt);
	}
	.who__media img {
		inline-size: 100%;
		block-size: 100%;
		aspect-ratio: 454 / 650;
		object-fit: cover;
	}

	/* ---- Feature row ------------------------------------------------- */

	/*
	 * The rule is full-bleed in the design, so it lives on this wrapper rather
	 * than on the inner grid.
	 */
	.who__features {
		border-block-start: 1px solid var(--clr-border);
	}

	.feature-row {
		display: grid;
		gap: 0;
		padding-block: var(--space-xl) var(--space-2xl);
	}

	@media (min-width: 48rem) {
		.feature-row { grid-template-columns: repeat(3, 1fr); }

		/*
		 * Symmetric inner padding so copy never crowds a divider. In the design
		 * the text occupies 74–80% of its 388px column, leaving 38–99px of
		 * clearance — 48px sits inside that range on both sides.
		 *
		 * The outer edges stay flush with the wrapper, so the row still lines up
		 * with the copy above it.
		 */
		.feature { padding-inline: var(--space-xl); }
		.feature:first-child { padding-inline-start: 0; }
		.feature:last-child  { padding-inline-end: 0; }

		/* Dividers between columns, not around them. */
		.feature + .feature {
			border-inline-start: 1px solid var(--clr-border);
		}
	}

	@media (max-width: 47.999rem) {
		.feature + .feature {
			border-block-start: 1px solid var(--clr-border);
			margin-block-start: var(--space-l);
			padding-block-start: var(--space-l);
		}
	}

	/* Definite height, fit-content width — see the note in experience.css. */
	.feature__icon {
		display: block;
		block-size: var(--feature-icon-height, 4rem);
		inline-size: fit-content;
		max-inline-size: 100%;
		align-self: start;
		object-fit: contain;
		object-position: left center;
		margin-block-end: var(--space-m);
	}

	.feature__title {
		margin: 0 0 var(--space-s);
		/* Sits on --fs-display-4 via the h3 default, with the accent word gold. */
	}

	.feature__text {
		margin: 0;
		/* Design's widest description is 310px. */
		max-inline-size: 19.5rem;
	}
}