/* ===========================================================================
   TEAM-GRID — leadership cards (3-up, with optional warm-neutral bg variant)
   Shared CSS module for both team-grid-administrative + team-grid-clinical
   patterns on the Leadership & Staff page. The two patterns differ only in
   content + the modifier class on the wrapper.
   Source slices:
     docs/figma/leadership-staff/_slices/06-team-grid-administrative.png
     docs/figma/leadership-staff/_slices/07-team-grid-clinical.png
   =========================================================================== */

.wp-block-group.hodc-team-grid {
	padding: 80px 24px;
	background: var(--wp--preset--color--white);
}

/* Clinical variant: warm-neutral bg — sampled #f3f1ef from source slice y=2515+.
 * Not registered as a global block style; scoped to this pattern only per
 * principal's direction (no new theme.json / functions.php registration). */
.wp-block-group.hodc-team-grid.hodc-team-grid--clinical {
	background: #f3f1ef;
}

/* Section title — centered serif, accent terracotta, h-l size (42/52).
 * Matches the original Figma slice. Each person's role beneath their
 * name is also accent (see .hodc-team-grid__role below), so section
 * title + roles share the same color, differentiated from the
 * primary-teal names. */
.hodc-team-grid__title {
	color: var(--wp--preset--color--accent);
	margin: 0 0 64px;
	font-family: var(--wp--preset--font-family--source-serif-pro);
	font-size: var(--wp--preset--font-size--h-l);
	font-weight: 400;
	line-height: 1.238;
	letter-spacing: -0.01em;
	text-align: center;
}

/* Row holds the 3 columns. Reset block-gap default to give explicit spacing. */
.hodc-team-grid__row {
	gap: 64px;
	margin: 0;
}

/* When the pattern emits multiple .hodc-team-grid__row siblings (Clinical
 * Leadership has 5 members rendered as a 3-up row + a 3-up row with an
 * empty placeholder card), the second row's avatars need ≥ 75 px of
 * breathing room from the first row's tallest card bottom. The single-row
 * `margin: 0` above kills the default block-gap, so explicit margin-top
 * here is what sets inter-row spacing. */
.hodc-team-grid__row + .hodc-team-grid__row {
	margin-top: 75px;
}

/* Per-card column: photo + name + role + bios all left-aligned per
 * #9889852326 — Stephanie wanted titles + photos left-aligned with the
 * body copy below them. */
.wp-block-column.hodc-team-grid__card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

/* Round avatar — 120 px circle, left-anchored in column (was center). */
.hodc-team-grid__avatar {
	margin: 0 0 24px;
	width: 120px;
}

.hodc-team-grid__avatar img {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	background: #efeeed;
}

/* Name — serif h-s (21/28), primary teal, left-aligned (was centered). */
.hodc-team-grid__name {
	color: var(--wp--preset--color--primary);
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--source-serif-pro);
	font-size: var(--wp--preset--font-size--h-s);
	font-weight: 400;
	line-height: 1.333;
	text-align: left;
}

/* Role — Mr Eaves Regular, terracotta accent, left-aligned. Was 0.875rem
 * italic centered; bumped to 1rem and removed italic per #9889835478 +
 * #9889836866 (Stephanie called out roles need to be bigger than body and
 * non-italic). */
.hodc-team-grid__role {
	color: var(--wp--preset--color--accent);
	margin: 0 0 24px;
	font-family: var(--wp--preset--font-family--mr-eaves-xl-modern);
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

/* Bio paragraphs — small Mr Eaves, primary teal, LEFT aligned, tight rhythm. */
.hodc-team-grid__bio {
	color: var(--wp--preset--color--primary);
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--mr-eaves-xl-modern);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.57;
	text-align: left;
}

.hodc-team-grid__bio:last-child {
	margin-bottom: 0;
}

/* Mobile — NOT IN FIGMA. Proposed: single-column stack, smaller padding. */
@media (max-width: 1024px) {
	.wp-block-group.hodc-team-grid {
		padding: clamp(48px, 7vw, 80px) 24px;
	}
	.hodc-team-grid__row {
		flex-wrap: wrap;
		gap: 48px;
	}
}

@media (max-width: 768px) {
	.hodc-team-grid__title {
		margin-bottom: 48px;
	}
	.wp-block-column.hodc-team-grid__card {
		flex-basis: 100% !important;
	}
}