/*
 * Team page.
 *
 * One page, four bands: the hero, the featured people, the departmental roster
 * and the closing invitation. Everything here is either structural (how many
 * columns a band has) or the one thing that makes a mixed set of photographs
 * look deliberate rather than accidental — a single square frame that every
 * portrait is fitted into.
 *
 * That frame is why this page has a stylesheet of its own instead of reusing the
 * About page's leadership row. The About band presents four board portraits at
 * the size they were supplied; this page presents thirty people, arrived at as
 * everything from studio portraits to phone snapshots, and needs one geometry
 * for all of them.
 *
 * Direction: every rule uses logical properties, so the Persian and Russian
 * pages mirror without a second stylesheet. Nothing here declares a colour
 * literal — the palette comes from tokens.css.
 */

/* ===========================================================================
 * 1. Featured band
 * ======================================================================== */

.sc-team-roster__band-title {
	margin: 0 0 var(--sc-space-md);
	font-size: var(--sc-font-size-xs);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: var(--sc-letter-spacing-wide);
	text-transform: uppercase;
	color: var(--sc-color-text-subtle);
}

.sc-team-lead {
	display: grid;
	gap: var(--sc-space-lg) var(--sc-space-md);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block: 0 clamp(2.5rem, 2rem + 3vw, 4rem);
	padding: 0;
	list-style: none;
}

.sc-team-lead .sc-team-person__name {
	font-size: var(--sc-font-size-lg);
}

/* ===========================================================================
 * 2. Departments
 * ======================================================================== */

.sc-team-group + .sc-team-group {
	margin-block-start: clamp(2.5rem, 2rem + 3vw, 4rem);
}

.sc-team-grid {
	display: grid;
	gap: var(--sc-space-lg) var(--sc-space-md);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ===========================================================================
 * 3. Person
 *
 * One card shape for both bands. The frame is a fixed square so that a portrait
 * cropped from a landscape snapshot and a portrait supplied square land in the
 * same geometry, and the initials plate fills the same square when a photograph
 * has not been supplied yet.
 * ======================================================================== */

.sc-team-person {
	display: flex;
	flex-direction: column;
}

.sc-team-person__frame {
	position: relative;
	margin: 0 0 var(--sc-space-sm);
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: var(--sc-radius-media);
	background-color: var(--sc-color-surface-sunken);
}

.sc-team-person__frame img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.sc-team-lead .sc-team-person__frame {
	border-radius: var(--sc-radius-media);
}

.sc-team-person__initials {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	font-size: var(--sc-font-size-2xl);
	font-weight: var(--sc-font-weight-semibold);
	letter-spacing: var(--sc-letter-spacing-wide);
	color: var(--sc-color-brand-strong);
}

.sc-team-person__name {
	margin: 0;
	font-weight: var(--sc-font-weight-semibold);
	color: var(--sc-color-heading);
}

.sc-team-person__role {
	margin: var(--sc-space-3xs) 0 0;
	font-size: var(--sc-font-size-sm);
	color: var(--sc-color-text-muted);
}

/* ===========================================================================
 * 4. Responsive
 * ======================================================================== */

@media (width < 64rem) {
	.sc-team-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (width < 48rem) {
	.sc-team-lead {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sc-team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width < 30rem) {
	.sc-team-lead,
	.sc-team-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-team-lead .sc-team-person__name {
		font-size: var(--sc-font-size-lg);
	}
}