/**
 * Pattern: Team Card Grid  (inc/team-grid.php + patterns/team-card.php)
 *
 * Renders team members as white portrait cards in a responsive grid, grouped by
 * team_role via the [kds_team role="…"] shortcode. Auto-enqueued by the
 * inc/enqueue.php glob — no shared-file edits needed to activate this CSS.
 *
 * Design source: Figma node 22:1046 — Meet the Team wireframe.
 *
 * Card anatomy (Figma):
 *   - Photo:     portrait/square image, rounded top; neutral placeholder circle
 *                when no featured image set (:has guard, same trick as split-text-image).
 *   - Name:      Montserrat Black, ~26px, --kd-color-contrast (dark ink).
 *   - Pronouns:  optional, Inter 14px, --kd-color-body (dim), before the separator.
 *   - Role:      Inter Regular 14px, --kd-color-primary (purple).
 *   - "View bio" link: Inter 14px, purple underline; the card's ONLY interactive element.
 *
 * Grid: 3-column desktop → 2-column ≤1023.98 → 1-column ≤767.98.
 * Breakpoints match the card-grid.css convention (1023.98/767.98).
 *
 * A11y: each card is <article aria-labelledby>; single link per card (no overlay).
 * Hover/focus-within: card lifts + name turns purple (same card convention).
 *
 * Prefix: --kd-* / .kd-*  (never hardcoded hex or --kds-*).
 * One pattern = one CSS partial. All responsive queries live in this file.
 */

/* ── Grid wrapper ────────────────────────────────────────────────────────────── */

.kd-team-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, var(--kd-card-w)));
	justify-content: center;
	gap: var(--kd-space-md); /* 24px — matches card-grid.css */
	margin: 0 auto;
	padding: 0;
	list-style: none;
	width: 100%;
}

/* ── Column modifiers (mirrors card-grid.css .kd-card-grid--cols-N) ──────────── */

.kd-team-grid--cols-1 {
	grid-template-columns: minmax(0, var(--kd-card-w));
}

.kd-team-grid--cols-2 {
	grid-template-columns: repeat(2, minmax(0, var(--kd-card-w)));
}

.kd-team-grid--cols-3 {
	grid-template-columns: repeat(3, minmax(0, var(--kd-card-w)));
}

/* ── Card container ──────────────────────────────────────────────────────────── */

/*
 * White card, purple border, rounded corners, subtle lift shadow.
 * Matches the event card (kd-card) language so the design system reads consistent.
 * border-radius matches --kd-radius-lg (24px).
 */
.kd-team-card {
	position: relative;
	background-color: var(--kd-color-base);
	border: 2px solid var(--kd-color-neutral-300);
	border-radius: var(--kd-radius-lg);
	box-shadow: var(--kd-shadow-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	transition:
		transform var(--kd-transition-fast),
		box-shadow var(--kd-transition-fast);
}

/* Hover/focus-within: card lifts — signals the bio link is reachable anywhere.
   Gated on that link existing: a bio-less member's card has no interactive
   element, and lifting it promises a click target that does not exist. */
.kd-team-card:has(.kd-team-card__bio-link):hover,
.kd-team-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--kd-shadow-md);
}

/* ── Photo area ──────────────────────────────────────────────────────────────── */

/*
 * Square/portrait crop, fills the full card width, no side padding.
 * border-radius clips the image into the card's top-rounded corners.
 */
/* Figma 23:1612 — the photo is inset 24px (344 in a 392 card) with rounded
   corners, not bled to the card edge. */
.kd-team-card__photo {
	margin: 1.5rem 1.5rem 0; /* 24px inset top + sides */
	aspect-ratio: 344 / 300; /* Figma photo 344×300 */
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--kd-color-neutral-100);
	flex-shrink: 0;
}

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

/*
 * Placeholder: a neutral person silhouette when no featured image is set.
 * :not(:has(img)) fires when the container is empty (no <img> child).
 * Renders as a centered SVG-background circle so the card composition reads
 * intentional pre-content — mirrors the split-text-image.css :has trick.
 */
.kd-team-card__photo:not(:has(img)) {
	display: flex;
	align-items: center;
	justify-content: center;
}

.kd-team-card__photo:not(:has(img))::before {
	content: "";
	display: block;
	width: 40%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: var(--kd-color-neutral-300);
	/* Simple person silhouette via mask-image or box-shadow — neutral grey circle */
}

/* ── Card body ───────────────────────────────────────────────────────────────── */

.kd-team-card__body {
	padding: 1.25rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1 1 auto;
}

/* ── Name ────────────────────────────────────────────────────────────────────── */

/*
 * Figma: Montserrat Black, ~26px, dark ink.
 * On hover/focus-within the name turns primary — only when a bio link exists
 * (a bio-less card has no affordance to advertise).
 */
.kd-team-card__name {
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	font-size: 1.375rem; /* 22px — portrait card is narrower than event card */
	line-height: 1.25;
	color: var(--kd-color-contrast);
	margin: 0 0 var(--kd-gap-tight); /* 8px */
	text-decoration: none;
	transition: color var(--kd-transition-fast);
}

.kd-team-card:has(.kd-team-card__bio-link):hover .kd-team-card__name,
.kd-team-card:focus-within .kd-team-card__name {
	color: var(--kd-color-primary);
}

/* ── Meta line (pronouns | role) ─────────────────────────────────────────────── */

/*
 * Figma: "She/Her | Job Title Here" — one line, body text size, dim.
 * Pronouns and role use ink (--kd-color-contrast): primary fails AA contrast
 * on white at this size. Only the "View bio" link stays coloured.
 */
.kd-team-card__meta {
	font-family: var(--kd-font-body);
	font-size: 0.8125rem; /* 13px */
	line-height: 1.5;
	color: var(--kd-color-body);
	margin: 0 0 var(--kd-space-sm); /* 16px gap to bio link */
}

/* Members with no bio render no "View bio" anchor, so that 16px would sit at the
   bottom of the card as dead space. */
.kd-team-card__meta:last-child {
	margin-bottom: 0;
}

.kd-team-card__pronouns {
	color: var(--kd-color-contrast); /* ink */
}

.kd-team-card__meta-sep {
	color: var(--kd-color-neutral-500);
	padding: 0 0.125rem;
}

.kd-team-card__role {
	color: var(--kd-color-contrast); /* ink (primary fails AA) */
	font-weight: 600;
}

/* ── "View bio" link ─────────────────────────────────────────────────────────── */

/*
 * Figma: small purple text link, "Read Bio". The card's ONLY interactive element.
 * margin-top:auto pushes it to the bottom of the card body so all cards in a row
 * align the link at the same vertical position regardless of name/title length.
 */
.kd-team-card__bio-link {
	font-family: var(--kd-font-body);
	font-size: 0.8125rem; /* 13px */
	font-weight: 600;
	color: var(--kd-color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-top: auto;
	align-self: flex-start;
	transition: color var(--kd-transition-fast);
}

.kd-team-card__bio-link:hover,
.kd-team-card__bio-link:focus-visible {
	color: var(--kd-color-secondary);
}

.kd-team-card__bio-link:focus-visible {
	outline: 3px solid var(--kd-color-primary);
	outline-offset: 2px;
	border-radius: var(--kd-radius-sm);
}

/* ── Tablet (≤1023.98px) — 2 columns ────────────────────────────────────────── */

@media (max-width: 1023.98px) {
	.kd-team-grid,
	.kd-team-grid--cols-3 {
		grid-template-columns: repeat(2, minmax(0, var(--kd-card-w)));
	}
}

/* ── Mobile (≤767.98px) — 1 column ──────────────────────────────────────────── */

@media (max-width: 767.98px) {
	.kd-team-grid,
	.kd-team-grid--cols-2,
	.kd-team-grid--cols-3 {
		grid-template-columns: minmax(0, var(--kd-card-w));
	}

	.kd-team-card__body {
		padding: 1rem 1.25rem 1.25rem;
	}
}