/**
 * Pattern: Board Grid — chair feature card + picture grid  (`[blg_board]`)
 *
 * NOT a patterns/*.php file — this styles the ALREADY-LIVE, server-rendered
 * BEM markup emitted by `inc/board.php`'s `blg_board_shortcode()` (chair
 * card, Figma 6:221; grid, Figma 6:222). READ-ONLY on inc/board.php: no
 * markup/class changes made here, styling only.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 *
 * Small-phone tier is cut at 375px (Figma's smallest frame) rather than the
 * theme's legacy 480px breakpoint — deliberate, not a gap.
 */

/* ── Root — vertical rhythm for the two sub-sections (chair, grid) ──────────
   No hero/CTA compose on /board/ yet (Phase 5 assembles the full page), so
   this owns its own top/bottom breathing room. Top-of-page clearance above
   this is handled globally by the no-hero page padding token — untouched. */
.blg-board {
	padding-block: var(--blg-space-xl) var(--blg-space-xxl); /* 64 / 96 */
}

/* ── Chair feature card (Figma 6:221) — horizontal split on Cloud surface ──
   The shortcode emits figure → h3 → p as flat siblings (no text-column
   wrapper div — inc/board.php is read-only, styling only). A flex-wrap
   approach was tried first: at tablet widths the name/role pair couldn't
   fit beside the photo and wrapped as INDEPENDENT flex items, landing role
   on its own line back at the container's left edge (under the photo)
   instead of stacked under name in a shared right column. Grid with
   explicit placement fixes this cleanly — figure spans both text rows in
   column 1, name/role are explicitly placed in column 2 regardless of
   source order, so they always stack together in their own column. */
.blg-board__chair {
	display: grid;
	grid-template-columns: 20rem 1fr;
	/* 3rd row is a flexible filler, not content — see the photo rule below for
	   why it exists: without it, spanning a tall item across only 2 auto-sized
	   rows forces the CSS Grid track-sizing algorithm to inflate BOTH of those
	   rows to share the extra height, leaving a huge gap between name and role.
	   Giving the span a 3rd (empty) 1fr track lets that track absorb the
	   leftover height instead, so name/role stay tight against each other. */
	grid-template-rows: auto auto 1fr;
	column-gap: var(--blg-space-lg); /* 40px */
	row-gap: var(--blg-gap-tight);
	align-items: start;
	background-color: var(--wp--preset--color--surface); /* Cloud #F2F8FB */
	border-radius: var(--blg-radius-card); /* 16px */
	padding: var(--blg-space-lg); /* 40px — generous padding per spec */
	margin: 0 0 var(--blg-space-xxl); /* 96px — chair → grid section break */
}

.blg-board__chair .blg-board__photo {
	grid-column: 1;
	grid-row: 1 / 4; /* spans name row + role row + the filler row */
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	border-radius: var(--blg-radius-card);
	overflow: hidden;
	background-color: var(
		--wp--preset--color--tint
	); /* Sky Tint fallback well */
}

.blg-board__chair .blg-board__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blg-board__chair .blg-board__photo-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: var(--blg-size-h1); /* large initials on the bigger chair box */
	color: var(--blg-color-neutral-500);
}

.blg-board__chair .blg-board__name {
	grid-column: 2;
	grid-row: 1;
	font-family: var(--blg-font-heading);
	font-weight: 800; /* Raleway ExtraBold — Figma H2 */
	font-size: var(--blg-size-h2); /* 32px */
	line-height: 1.25;
	color: var(--blg-color-contrast);
	margin: 0;
}

.blg-board__chair .blg-board__role {
	grid-column: 2;
	grid-row: 2;
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body); /* 16px */
	font-weight: 600;
	color: var(--blg-color-primary); /* Georgia Blue */
	margin: 0;
}

/* ── Board grid (Figma 6:222) — 4 cols @1440 ─────────────────────────────── */

.blg-board__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--blg-space-md); /* 24px */
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ── Column modifiers (--cols-N, shortcode `columns` att) ────────────────────
   Same technique as member-grid.css's grid (see that partial's comment for
   the full cascade rationale). Default / --cols-4 gets no dedicated rule, so
   it keeps this grid's existing ladder untouched — 4 @1440 → 3 @1024 →
   2 @768 → 2 @375 (see the small-phone exception below). --cols-2 needs no
   narrower override anywhere — its desktop value (2) is already ≤ every
   tier's default. --cols-3 is capped to 2 cols at ≤768px (min of that
   tier's default and 3) and, with no 375-specific rule, carries that same
   2-col value through the small-phone tier — matching this grid's own
   "stay 2-up at 375" exception rather than narrowing to 1. */
.blg-board__grid.blg-board__grid--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blg-board__grid.blg-board__grid--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blg-board__card {
	display: flex;
	flex-direction: column;
}

.blg-board__card .blg-board__photo {
	aspect-ratio: 1 / 1;
	margin: 0 0 var(--blg-space-sm); /* 16px — photo → name */
	border-radius: var(--blg-radius-card); /* 16px */
	overflow: hidden;
	background-color: var(--wp--preset--color--tint); /* Sky Tint well */
}

.blg-board__card .blg-board__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blg-board__card .blg-board__photo-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: var(--blg-size-h3); /* 24px — smaller grid-card initials */
	color: var(--blg-color-neutral-500);
}

.blg-board__card .blg-board__name {
	font-family: var(--blg-font-heading);
	font-weight: 700; /* Raleway Bold — Figma "H3" treatment */
	font-size: var(
		--blg-size-body-lg
	); /* 18px, per spec (not the 24px H3 token) */
	line-height: 1.3;
	color: var(--blg-color-contrast);
	margin: 0 0 var(--blg-gap-tight);
}

.blg-board__card .blg-board__role {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-eyebrow); /* 14px — Body/Small */
	color: var(--blg-color-neutral-500);
	margin: 0;
}

/* ── Tablet (≤1024px) — 3 cols, chair photo column narrows ───────────────── */
@media (max-width: 1024px) {
	.blg-board__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.blg-board__chair {
		grid-template-columns: 16rem 1fr;
	}
}

/* ── Mobile (≤768px) — 2 cols, chair stacks (photo above text) ───────────── */
@media (max-width: 768px) {
	.blg-board__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* --cols-3 (desktop value 3) narrows to match this tier's 2-col default. */
	.blg-board__grid.blg-board__grid--cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.blg-board__chair {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto; /* no spanning item here — plain stack */
		justify-items: center;
		text-align: center;
		padding: var(--blg-space-md);
	}

	.blg-board__chair .blg-board__photo {
		grid-column: 1;
		grid-row: 1;
		width: 12rem;
	}

	.blg-board__chair .blg-board__name {
		grid-column: 1;
		grid-row: 2;
	}

	.blg-board__chair .blg-board__role {
		grid-column: 1;
		grid-row: 3;
	}
}

/* ── Small phone (≤375px) — grid stays 2-up (small picture cards read fine
   at this size per the Figma anatomy; a 1-up stack would waste the square-
   photo economy the design relies on). Flagged in handoff as a judgment
   call — no mobile frame exists to confirm against. ─────────────────────── */
@media (max-width: 375px) {
	.blg-board__grid {
		gap: var(
			--blg-space-sm
		); /* 16px — tighter gutter at the smallest width */
	}

	.blg-board__chair .blg-board__photo {
		width: 100%;
	}
}