/*
	Team cards. Reuses the shared .card / .card-grid primitives; this file only
	adds what's specific to a team member: a squarer portrait crop, and the fact
	that the card isn't clickable (so it shouldn't lift on hover like a linked card).
*/

/*
	.card-grid's own default is auto-fit with an 18rem (288px) minimum card
	width (components.css) — Team wants a smaller minimum, both because its
	cards are smaller/more numerous than Card Grid's own (always exactly 2)
	and specifically so 4 columns actually fit within .container's own
	1300px max-width: at that width, minus gutters and three 80px
	(--space-10) gaps, four columns of ~288px wouldn't fit — 12.5rem
	(200px) does. No @media breakpoint needed at all: auto-fit naturally
	steps 4 -> 3 -> 2 -> 1 as the viewport (and so the row's own available
	width) narrows, entirely from the minmax() lower bound, the same
	`min(X, 100%)` guard the shared primitive uses so that lower bound
	itself can never force horizontal overflow on a viewport narrower than
	it. Scoped to Team rather than changed on the shared .card-grid
	primitive, which Card Grid also renders into. grid-column: 1 / -1 below
	(Feature) spans however many columns actually exist at any given
	width, so it doesn't need to know the current count.
*/
.flex-section--team .card-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
	gap: var(--space-10);
}

/* Below 48em, where the grid has typically collapsed to a single column,
   this same gap becomes the vertical space between stacked cards — 48px
   there instead of the 80px used at wider, multi-column widths. */
@media (max-width: 47.99em) {
	.flex-section--team .card-grid {
		gap: var(--space-8); /* 48px */
	}
}

/*
	Team's own optional header (Heading/Text, .section-header) — centered,
	same treatment .section-header.is-centered already gives every other
	block that has an editor-facing Alignment field, just forced here
	rather than exposed as a choice, since Team has no such field of its
	own. Scoped to this block rather than touching .section-header/
	.flex-section__intro directly, both shared with Team Carousel (and,
	previously, FAQs) — those keep their own default look.
*/
.flex-section--team .section-header {
	margin-inline: auto;
	text-align: center;
	/* Overrides the shared class's own --space-7 (layout.css) — two
	   classes here beats that rule's one, so this wins on specificity alone. */
	margin-block-end: var(--space-8);
}

.flex-section--team .flex-section__intro {
	font-size: 0.9375rem; /* 15px */
	opacity: 0.7;
	/* Overrides the shared class's own 36px (layout.css) — two classes
	   here beats that rule's one, so this wins on specificity alone. */
	margin-block-start: var(--space-4); /* 16px */
}

/*
	.card hardcodes a solid --color-default-bg + --color-default-fg pairing
	(components.css) so it always reads as its own surface regardless of
	the section behind it — Team cards go transparent instead, blending
	into whatever background the section has (Default/Dark/Light, the
	block's own Background field). Text has to follow that same background
	instead of staying hardcoded to default-fg, or it would go unreadable
	on a Dark section — --section-fg is what sd_section_class() actually
	sets (layout.css's .bg-* classes), with
	--color-default-fg as the fallback for a card sitting outside any
	.bg-* section. The resting shadow goes too — a shadow with no solid
	card boundary under it reads as a rendering glitch, not a card.
*/
.team-card {
	background-color: transparent;
	color: var(--section-fg, var(--color-default-fg));
	box-shadow: none;
	/* .card's own border-radius clips its content via the card's outer
	   overflow: hidden — moved to .team-card__media below instead, so the
	   image itself is rounded rather than the (now-transparent, no
	   longer even visually a "card") card boundary. */
	border-radius: 0;
	text-align: center;

	/* Not a link — drop the interactive hover affordance the base .card
	   carries; the grayscale-to-colour reveal below is the only hover
	   effect a Team card gets. */
	&:hover {
		transform: none;
		box-shadow: none;

		& .team-card__media img {
			filter: grayscale(0%);
		}
	}
}

/* .card__body's own default is a plain left-aligned flex column — center
   its children (name/role/location) to match the card's own text-align. */
.team-card .card__body {
	align-items: center;
}

/*
	A fixed 300px height (not aspect-ratio) — portrait-leaning against the
	grid's own narrower card widths (12.5rem/200px minimum, above), the
	same "block-specific dimension, not a spacing/ratio-scale value"
	treatment other one-off dimensions in this theme get, so it's a literal
	value rather than a token. border-radius here (not on .team-card, see
	above) is what actually rounds the visible image — .card__media's own
	overflow: hidden (components.css) already clips its <img> to whatever
	radius this box has, same mechanism .card itself used to rely on.

	Grayscale by default, full colour on hover — .team-card__media img,
	not .card__media img, so this doesn't leak into Card Grid's own
	images (a different block sharing the same .card__media class).
*/
.team-card__media {
	/* Overrides .card__media's own shared 4/3 default (components.css) —
	   with both dimensions otherwise already determined (width by the
	   card's own flex-stretch, height explicitly below), aspect-ratio has
	   nothing left to compute either way, but setting it to auto removes
	   any doubt about which one actually wins. */
	aspect-ratio: auto;
	height: 18.75rem; /* 300px */
	border-radius: var(--radius-lg);

	& img {
		filter: grayscale(100%);
		transition: filter var(--transition);
	}
}

/*
	.card__body's own flex gap (components.css) is 4px, same as every other
	sibling pair in the body — Bio (Feature cards only, never shown on a
	plain Grid card) wants a clearer break from the header block above it
	than that, so this adds 20px on top via margin, netting 24px total.
*/
.team-card__bio {
	font-size: var(--font-size-1);
	margin-block-start: 1.25rem; /* +20px, nets 24px against the 4px gap */
}

/* .card__title's shared default is whatever heading-style-h3 gives it
   (typography.css, 24px/regular) — Team's own name size/weight instead. */
.team-card .card__title {
	font-size: var(--team-card-name-size); /* 20px */
	font-weight: var(--font-weight-regular); /* 400 */
}

/* .card__meta's shared default (components.css) is font-size-2 (16px) — only
   scoped here since Team is currently its one real user. */
.team-card .card__meta {
	font-size: var(--team-card-meta-size); /* 15px */
}

/* Optional per-member Location (field_team_location) — smaller and more
   muted than Role, since it's a secondary detail most cards don't even
   have (most staff work across every location and leave this blank). */
.team-card__location {
	font-size: var(--font-size-1); /* 14px */
	color: var(--color-text-muted);
}

/* Tightens just the Role -> Location gap below the shared .card__body
   gap (components.css, 4px, uniform between every sibling pair in the
   body) — a small negative margin pulls Location closer, netting 2px
   instead of 4px, without touching the Name -> Role gap above it. */
.team-card .card__meta + .team-card__location {
	margin-block-start: -0.125rem; /* -2px, nets 2px against the 4px gap */
}

/*
	Feature (the `feature` true_false field on the team_member CPT, per-member
	not per-block) — a full-width spotlight that spans every column that
	currently exists (grid-column: 1 / -1 is column-count-agnostic, so this
	doesn't need to know whether the grid is showing 4 or 1 at any given
	width) rather than sitting in one, with the photo beside the content
	instead of above it. .card is display: flex; flex-direction: column by
	default; this only changes to row at 48em — an independent breakpoint
	from the grid's own auto-fit column count above, chosen purely on
	whether a Feature card's own row is wide enough for a side-by-side
	layout, so it doesn't try to squeeze one into a narrow mobile width.
*/
.team-card--feature {
	grid-column: 1 / -1;
}

@media (min-width: 48em) {
	.team-card--feature {
		flex-direction: row;
	}

	.team-card--feature .team-card__media {
		flex: 0 0 40%;
		/* Resets the base rule's own fixed 300px height (above) back to
		   auto — with both height and aspect-ratio set, height wins and
		   leaves aspect-ratio nothing to compute, which would silently
		   defeat this 3/4 ratio otherwise. */
		height: auto;
		aspect-ratio: 3 / 4;
	}

	.team-card--feature .card__body {
		flex: 1;
	}
}

.team-card__links {
	display: flex;
	gap: var(--space-4);
	margin-block-start: auto;
	padding-block-start: var(--space-2);
	font-size: var(--font-size-1);
}