/*
	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 (as many columns as fit each card's
	own min-width) — Team wants exactly three, always, regardless of
	viewport, for smaller, more numerous cards than the shared primitive's
	own auto-fit would produce. grid-column: 1 / -1 below (Feature) spans
	however many columns exist, so it still spans the full row correctly at
	three. Scoped to Team rather than changed on the shared .card-grid
	primitive, which Card Grid also renders into.
*/
.flex-section--team .card-grid {
	grid-template-columns: 1fr;
	gap: var(--space-10);
}

@media (min-width: 48em) {
	.flex-section--team .card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.team-card {
	/* Not a link — drop the interactive hover affordance the base .card carries. */
	&:hover {
		transform: none;
		box-shadow: none;
	}
}

/* Portraits read better squarer than the card's default 4:3 landscape crop. */
.team-card__media {
	aspect-ratio: 1 / 1;
}

/*
	.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__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(--font-size-3); /* 20px */
}

/*
	Feature (the `feature` true_false field on the team_member CPT, per-member
	not per-block) — a full-width spotlight that spans all three grid columns
	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 the same 48em breakpoint the grid itself
	goes to three columns, so a Feature card doesn't try to squeeze a
	side-by-side layout into a single mobile column's 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%;
		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);
}