/**
 * Pattern: Bio single  (templates/single-blg_team.html + inc/team-grid.php)
 *
 * Styles the blg_team CPT single (a board/team member's bio page):
 *   1. kd-team-single__hero-meta — "He/Him | V.P. of Events" white sub-line under
 *      the H1 name in the hero (injected by blg_team_single_hero_meta()).
 *   2. kd-team-single__body       — two-column body: portrait left + bio text right.
 *   3. kd-team-single__photo      — rounded #F9F9FF portrait container (+ placeholder).
 *   4. kd-team-single__bio        — bio reading column, 18px/28px body text.
 *
 * Design source: Figma node 23:1882 ("Bio Page", 1440-wide). The wireframe uses
 * placeholder styling (DM Sans, #5D5A88/#9795B5 greys); the real system applies:
 * Montserrat headings, --blg-color-primary purple, --blg-color-body ink, Inter body.
 *
 * Measurements (1440px frame, content column 1216px at x=112):
 *   Hero:        flat brand-gradient band, min 340px (matches single.html / story single).
 *   Name H1:     node 23:2262, x=110, y=267 — 56px Bold white (hero-interior CSS).
 *   Sub-line:    node 23:2263, x=110, y=347 — 18px white, "He/Him | V.P. of Events".
 *   Photo box:   node 23:2271, x=112, w=555, h=626 (≈46%), #F9F9FF bg, 20px radius.
 *   Bio text:    node 23:2273, x≈760, w=568 (≈54%), 18px/28px, vertically centred.
 *
 * Reuses the team-card placeholder trick (:not(:has(img))::before) for missing photos.
 * Auto-enqueued by the inc/enqueue.php glob — no shared-file edit needed.
 * Prefix: --blg-* / .kd-*. One pattern = one CSS partial; all responsive rules here.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO SUB-LINE — pronouns | role
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * White sub-line below the H1 in the hero. Figma 23:2263: 18px/30px white, x=110.
 * Injected after the post-title by blg_team_single_hero_meta(). Pronouns render
 * italic (Figma), the role regular, separated by a dim pipe.
 */
.kd-team-single__hero-meta {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body-lg); /* 18px */
	font-weight: 400;
	line-height: 1.65;
	color: var(--blg-color-base); /* white */
	margin: var(--blg-space-sm) 0 0; /* 16px top gap from H1 */
}

.kd-team-single__hero-pronouns {
	font-style: italic;
}

.kd-team-single__hero-sep {
	padding: 0 0.25rem;
	opacity: 0.7;
}

.kd-team-single__hero-role {
	font-style: normal;
}

@media (max-width: 767.98px) {
	.kd-team-single__hero-meta {
		font-size: var(--blg-size-body); /* 16px on mobile */
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. BODY — two columns (portrait + bio)
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Padding + 46/54 split + centre alignment are set on the block in the template.
 * Nothing extra needed at desktop; this hook exists for the responsive overrides.
 */
.kd-team-single__body {
	align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. PORTRAIT — rounded #F9F9FF container
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Fixed portrait box (Figma 555×626 ≈ 0.886 ratio); the featured image fills it
 * via object-fit cover. #F9F9FF backing shows through the placeholder when no
 * photo is set. Image-icon placeholder mirrors the team-card convention.
 */
.kd-team-single__photo {
	background-color: var(--blg-color-neutral-300); /* #F9F9FF */
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 555 / 626;
	width: 100%;
}

/* The wp:post-featured-image wrapper + its <img> both fill the box. */
.kd-team-single__photo .wp-block-post-featured-image,
.kd-team-single__photo .kd-team-single__img {
	margin: 0;
	height: 100%;
}

.kd-team-single__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center; /* favour the face */
	border-radius: 20px;
}

/* Placeholder — neutral circle centred in the box when no featured image (same
   trick as .kd-team-card__photo). post-featured-image renders nothing when empty,
   so :not(:has(img)) catches the missing-photo case. */
.kd-team-single__photo:not(:has(img)) {
	display: flex;
	align-items: center;
	justify-content: center;
}

.kd-team-single__photo:not(:has(img))::before {
	content: "";
	display: block;
	width: 28%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: var(--blg-color-neutral-500);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. BIO — reading column
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * 18px/28px body text (Figma 23:2273). post-content runs constrained inside the
 * column; the column is already capped at ~54% of the content width.
 */
.kd-team-single__bio .wp-block-post-content {
	margin-block: 0;
}

.kd-team-single__bio .wp-block-post-content p,
.kd-team-single__bio .wp-block-post-content li {
	font-size: var(--blg-size-body-lg); /* 18px */
	line-height: 1.55; /* ~28px */
	color: var(--blg-color-body);
}

.kd-team-single__bio .wp-block-post-content p {
	margin-block: 0 var(--blg-space-sm); /* 16px between paragraphs (Figma mb-16) */
}

.kd-team-single__bio .wp-block-post-content > :last-child {
	margin-bottom: 0;
}

.kd-team-single__bio .wp-block-post-content h2 {
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	color: var(--blg-color-contrast);
	margin-block: var(--blg-space-lg) var(--blg-space-sm);
}

.kd-team-single__bio .wp-block-post-content h3 {
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	color: var(--blg-color-contrast);
	margin-block: var(--blg-space-md) var(--blg-space-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet + below (≤1023.98px) — stack: portrait on top, bio below ──────── */
@media (max-width: 1023.98px) {
	.kd-team-single__body {
		flex-wrap: wrap;
	}

	.kd-team-single__media,
	.kd-team-single__bio {
		flex-basis: 100% !important;
		width: 100%;
	}

	/* Cap + centre the portrait so it doesn't balloon full-width on tablet. */
	.kd-team-single__photo {
		max-width: var(--blg-measure-narrow); /* ~555px — Figma portrait width */
		margin-inline: auto;
	}

	.kd-team-single__bio {
		margin-top: var(--blg-space-lg); /* 40px gap below the portrait */
	}
}

/* ── Mobile (≤767.98px) — tighten body padding ───────────────────────────── */
@media (max-width: 767.98px) {
	.kd-team-single__body-wrap {
		padding-top: 2.5rem !important; /* 40px */
		padding-bottom: 3rem !important; /* 48px */
	}

	.kd-team-single__photo {
		aspect-ratio: 4 / 5; /* slightly less tall on small screens */
	}
}