/**
 * Meridian Sections — Leadership Grid
 *
 * Figma 540:567. A grid of people on the dotted ground: a square headshot over a
 * name, a small uppercase blue role, and a short bio, each in a bordered white card.
 *
 * The comp draws six placeholder people in 3 × 2 and carries no heading of its own —
 * an Intro Statement or a Capabilities head sits above it when a page needs one.
 */

.md-section.md-lead {
	padding-block: var(--md-section-pt, 4rem) var(--md-section-pb, 4rem); /* 64 / 64 */
}

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

/*
 * The same ground as Capabilities (206:33) and Project Overview (232:46), measured
 * independently and agreeing: 20px pitch, 5px dots, contrast nil at the top climbing
 * to Δ14 on the red channel at the foot of the band, which solves to an ink of 0.058
 * against a 251 ground — the primitive's own 0.06. Only the direction and the size
 * differ from its defaults, and 0deg is "to top", so the wash is white at the top and
 * clear at the bottom.
 */
.md-lead.md-dots {
	--md-dot-wash: 0deg;
	--md-dot-size: 2.5px;
}

/* --- Grid ---------------------------------------------------------------- */
/*
 * One column, then two, then the chosen count. The column control is deliberately
 * NOT responsive: the property is only read at the top breakpoint, so a mobile value
 * would be written and then do nothing — the trap this codebase keeps running into.
 * Below 62em the count is the layout's, not the editor's.
 */
.md-lead__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem; /* 20px, both axes */
}

@media (min-width: 36em) {
	.md-lead__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.md-lead__grid {
		grid-template-columns: repeat(var(--md-lead-cols, 3), minmax(0, 1fr));
	}
}

/* --- Card ---------------------------------------------------------------- */
/*
 * rgba(0, 0, 0, 0.1) is exactly --md-color-panel-border, the token the dropdown
 * panels already use, so this needs no new value.
 *
 * overflow: hidden because the photograph fills the top edge to edge and the radius
 * belongs to the card — clipping it here is what squares the photo's own corners
 * against the card's rounded ones.
 *
 * The cards stretch to the tallest in the row by default, which is what keeps the
 * rows level when one bio runs to two lines; the photo holds its ratio and the body
 * takes the slack.
 */
.md-lead__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--md-border-width, 1px) solid
		var(--md-color-panel-border, rgba(0, 0, 0, 0.1));
	border-radius: 0.625rem; /* 10px */
	background-color: var(--md-color-surface, #fff);
}

/*
 * Square in the comp — the card's inner width is 332.33 and the photo 332.33 × 331 —
 * so this is a ratio rather than a height, and it holds at any column count. A
 * property because headshots are as often shot 4:5, and that is a decision about the
 * photography rather than about this section.
 */
.md-lead__media {
	position: relative;
	aspect-ratio: var(--md-lead-ratio, 1 / 1);
	overflow: hidden;
	border-block-end: var(--md-border-width, 1px) solid
		var(--md-color-panel-rule, rgba(0, 0, 0, 0.06));
	/* Visible before a headshot loads, and while a person has none. */
	background-color: var(--md-grey-100, #eceef1);
}

/*
 * Two classes, because Elementor ships `.elementor img` at (0,1,1) — its
 * `height: auto` would collapse the headshot to its intrinsic ratio and leave the
 * square box part empty. Anchored on the media box rather than on .md-lead, so the
 * rule survives if this card is ever reused elsewhere.
 */
.md-lead__media .md-lead__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	/* Faces sit high in a headshot, so a tall crop should keep the top. */
	object-fit: cover;
	object-position: var(--md-lead-focus, center top);
}

.md-lead__body {
	padding: var(--md-space-md, 1.5rem); /* 24px */
}

.md-lead__name {
	margin: 0;
	color: var(--md-color-heading, #0a1628);
	font-family: var(--md-font-heading, "Cabin", sans-serif);
	font-size: 0.9375rem; /* 15px */
	font-weight: var(--md-weight-bold, 700);
	line-height: 1.375; /* 20.625px */
}

/*
 * 12px semibold brand blue at 0.1em. Not one of the 11px eyebrows: it is a role, it
 * sits inside a card rather than opening a section, and it is a step larger and
 * looser than any of them.
 */
.md-lead__role {
	margin: 0;
	color: var(--md-blue, #006bb6);
	font-size: 0.75rem; /* 12px */
	font-weight: var(--md-weight-semibold, 600);
	line-height: 1.5; /* 18px */
	letter-spacing: 0.1em; /* 1.2px on 12px */
	text-transform: uppercase;
}

.md-lead__bio {
	margin: 0;
	/*
	 * The comp's #6a7282, which is already this plugin's documented fallback for
	 * --md-color-text-muted in the Mosaic List and the Row List. Worth knowing the
	 * token does not resolve to it: rgba(ink, 0.7) flattens to about #545c69 on white,
	 * a step darker than drawn — 7.4:1 against the comp's 4.8:1. Both clear AA, the
	 * token is the site-wide value, and the same trade was already made twice.
	 */
	color: var(--md-color-text-muted, #6a7282);
	/*
	 * 16px, not the 13px drawn. Bumped deliberately across every section whose body
	 * copy sat at 13 — Callouts, Card Grid, Leadership Grid, Markets, Mosaic List —
	 * because 13px prose is small to read and 16px is the browser default a reader
	 * expects. The 1.625 leading is unitless, so it follows to 26px.
	 */
	font-size: var(--md-text-small, 1rem); /* 16px */
	line-height: 1.625; /* 26 / 16 */
}

/* Rhythm through sibling combinators, so a card missing a role or a bio leaves no
 * gap where that element would have been. */
.md-lead__name + .md-lead__role {
	margin-block-start: var(--md-space-3xs, 0.25rem); /* 4px */
}

.md-lead__name + .md-lead__bio,
.md-lead__role + .md-lead__bio {
	margin-block-start: var(--md-space-xs, 0.75rem); /* 12px */
}

.md-lead__bio > p {
	margin: 0;
}

.md-lead__bio > p + p {
	margin-block-start: var(--md-space-2xs, 0.5rem);
}