/**
 * Meridian Sections — Featurette Trio
 *
 * Figma 12:8155. Copy beside three photographs — one wide over a pair — on the
 * dotted ground. Drawn as "Why Work Here".
 *
 * Shares .md-dots (ground), .md-shead (head) and .md-media-cell (the rounded
 * cover boxes) from sections.css. What is here is the arrangement and the skin.
 */

.md-section.md-ftrio {
	padding-block: var(--md-section-pt, 5rem) var(--md-section-pb, 5rem);

	/*
	 * The wash runs the other way from Featurette Dots: white on the left,
	 * tint and dots deepening to the right. Measured off the comp, where the dots
	 * vanish entirely left of 402/1149 and their depth grows 6.9 → 11.0 → 14.6
	 * across the band.
	 *
	 * 2.5px dots, the same as 13:8733. An earlier reading of 1.5px came from
	 * sampling a row 2px off the dot centres, where a 5px dot measures 3px — at
	 * the centre rows both comps measure 5px across.
	 */
	--md-dot-wash: 270deg;
	--md-dot-size: 2.5px;
}

.md-ftrio--ruled {
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-rule, #ebebeb);
}

.md-ftrio__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--md-space-xl, 3rem);
}

/* --- Copy ---------------------------------------------------------------- */
.md-ftrio__copy > * {
	margin: 0;
}

.md-ftrio__text {
	/*
	 * No measure cap: the comp runs this copy to the full column width, unlike
	 * the Featurette's 355px and Featurette Dots' 428px.
	 */
	color: var(--md-color-text-body, #364153);
	/* 16px, not the 15px drawn — the site's body-copy floor. See --md-text-small. */
	font-size: var(--md-text-small, 1rem); /* 16px */
	line-height: normal; /* the comp's "auto" leading */
}

/* 24px under the head, then 16px between paragraphs. Three classes on the
 * second rule so the tighter value cannot depend on source order. */
.md-ftrio__copy > * + .md-ftrio__text {
	margin-block-start: var(--md-space-md, 1.5rem); /* 24px */
}

.md-ftrio__copy > * + .md-ftrio__actions {
	margin-block-start: var(--md-space-lg, 2rem);
}

/* --- Media --------------------------------------------------------------- */
.md-ftrio__media {
	/* The accent is positioned against this, so it tracks the photographs. */
	position: relative;
	display: grid;
	gap: var(--md-space-sm, 1rem); /* 16px */
	/* Never stretch the rows: each cell's own ratio sets its height. */
	align-content: start;
}

/*
 * The dot accent. This comp does not draw one — it is here because the section
 * belongs to the same family as Featurette Dots, where it does, and the pair read
 * as a set. Off is a switch away.
 *
 * It hangs off the edge facing the copy, so it sits in the 64px gutter rather
 * than off the outer edge of the section. The box itself is .md-dot-accent.
 */
.md-ftrio__artwork {
	inset-block-start: -2.375rem; /* -38px */
	inset-inline-start: -2.4375rem; /* -39px */
}

/* Two classes so this cannot depend on rule order — the base sets the start. */
.md-ftrio__artwork.md-ftrio__artwork--bottom {
	inset-block: auto -2.375rem;
}

/* 494.5 × 278.16 in the comp. */
.md-ftrio__cell--wide {
	aspect-ratio: 16 / 9;
}

.md-ftrio__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--md-space-sm, 1rem); /* 16px */
}

/* One photo has no pair to halve the row with, so it takes the width. */
.md-ftrio__pair--single {
	grid-template-columns: minmax(0, 1fr);
}

/* 239.25 × 179.44 in the comp. */
.md-ftrio__cell--small {
	aspect-ratio: 4 / 3;
}

/* --- Two-up ------------------------------------------------------------- */
@media (min-width: 62em) {
	.md-ftrio__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 4rem; /* 64px */
		/*
		 * Both columns start at the top. Figma reports self-end on the copy
		 * column, but that column is a 430px frame inside a 473.59px row with its
		 * content packed to the top — so bottom-aligning the *frame* leaves the
		 * text near the top, 44px down. Aligning the copy itself to the bottom
		 * drops it far lower than the comp, since the text is only ~275px tall.
		 *
		 * Measured on the comp: the first text sits 48px below the photo top and
		 * the last line 149px above the photo bottom. Top plus an offset.
		 */
		align-items: start;
	}

	/*
	 * Placed rather than following DOM order: the markup is copy-then-photos so
	 * the heading is read first and the stacked layout needs no reordering.
	 *
	 * The 44px is the copy's box top — the 48px measured to the ink, less the
	 * eyebrow's half-leading. Adjustable, because it is a soft value rather than
	 * an alignment to anything, and it only applies once there are two columns.
	 */
	.md-ftrio__copy {
		grid-column: 1;
		grid-row: 1;
		padding-block-start: var(--md-ftrio-copy-offset, 2.75rem);
	}

	.md-ftrio__media {
		grid-column: 2;
		grid-row: 1;
	}

	.md-ftrio--media-left .md-ftrio__copy {
		grid-column: 2;
	}

	.md-ftrio--media-left .md-ftrio__media {
		grid-column: 1;
	}

	/* The accent mirrors with the photographs, staying on the gutter side. */
	.md-ftrio--media-left .md-ftrio__artwork {
		inset-inline: auto -2.4375rem;
	}

	/* With the other column absent, the survivor spans the row. */
	.md-ftrio__copy:only-child,
	.md-ftrio__media:only-child {
		grid-column: 1 / -1;
	}
}

/* No gutter for the accent to hang in once the columns stack, and it is only
 * decoration. */
@media (max-width: 61.9375em) {
	.md-ftrio__artwork {
		display: none;
	}
}

/*
 * Body Copy is a rich editor now, so this class is a wrapper and the paragraphs
 * inside it are the editor's. Type is set on the wrapper and inherited; only the
 * browser's default paragraph margins need dealing with here.
 */
.md-ftrio__text > p {
	margin: 0;
}

.md-ftrio__text > p + p {
	margin-block-start: var(--md-space-sm, 1rem);
}

/* Rich text can carry a link, which plain text never could. */
.md-ftrio__text a {
	color: var(--md-blue, #006bb6);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}