/**
 * TCC Group – People directory and profile styles
 *
 * Styles the virtual /meet-the-team/ directory grid and individual profile
 * pages rendered by the tcc-people-bridge MU-plugin. Uses only theme.json
 * design tokens; enqueued only on the People virtual routes.
 */

/*
 * The directory sections carry the canonical `.tcc-section__inner`, which
 * already applies the shared shell width and gutter. Constraining the main
 * element as well applied a second, narrower shell -- the page measured 1166px
 * against 1206px elsewhere -- and prevented any band from running full bleed.
 * Leave the shell to the sections, exactly as every other template does.
 *
 * The element also carries `.tcc-main`, which is where the canonical layout
 * tokens are declared. Without it `--tcc-band-gap` was undefined here, so
 * `padding-block: var(--tcc-section-gap)` resolved to invalid and every
 * section lost its vertical rhythm.
 */
.tcc-people-main {
	color: var(--wp--preset--color--ink);
}

/* A profile page renders its own content directly rather than through guided
   sections, so it keeps an explicit shell. */
.tcc-people-profile {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--tcc-shell);
	padding-block: var(--tcc-band-gap);
	padding-inline: var(--tcc-gutter);
}

/* The LinkedIn glyph, declared once so the icon definition lives in exactly
   one place. */
:root {
	--tcc-icon-linkedin: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.94 5.5a2.44 2.44 0 1 1-4.88 0 2.44 2.44 0 0 1 4.88 0ZM2.4 21.5h4.2V8.9H2.4v12.6Zm7.3-12.6h4v1.72h.06a4.42 4.42 0 0 1 3.97-2.18c4.25 0 5.03 2.8 5.03 6.43v6.63h-4.2v-5.88c0-1.4-.02-3.2-1.95-3.2-1.96 0-2.26 1.53-2.26 3.1v5.98H9.7V8.9Z'/%3E%3C/svg%3E" );
}

/* ─── Directory grid ──────────────────────────────────────────────────── */
.tcc-people-directory__header h1 {
	margin-block-end: 1.5rem;
}

.tcc-people-directory__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 1.5rem;
}

/* ─── Directory card ──────────────────────────────────────────────────────
   Matches the measured design: a fixed 120px portrait beside a text column,
   on a transparent card with a cyan hairline border. */
.tcc-people-card {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	min-width: 0;
	height: 100%;
	background: transparent;
	border: 1.6px solid color-mix( in srgb, var( --wp--preset--color--cyan ) 30%, transparent );
	border-radius: 6px;
	padding: 1.25rem;
}

.tcc-people-card__media {
	flex: 0 0 120px;
	width: 120px;
	height: 120px;
	border-radius: 4px;
	overflow: hidden;
}

.tcc-people-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.tcc-people-card__portrait {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Initials monogram standing in for a portrait that has not been supplied
   yet, so every card in the grid keeps the same shape. */
.tcc-people-card__portrait--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --wp--preset--color--mist );
	color: var( --wp--preset--color--ink );
	font-size: var( --wp--preset--font-size--lg );
	font-weight: 600;
	letter-spacing: 0.05em;
	object-fit: initial;
}

.tcc-people-card__name {
	margin: 0;
	font-size: var( --wp--preset--font-size--base );
	font-weight: 700;
	line-height: 1.5;
	color: var( --wp--preset--color--navy );
	min-width: 0;
	overflow-wrap: break-word;
}

.tcc-people-card__name a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.tcc-people-card__name a:hover {
	color: var( --wp--preset--color--teal );
	border-bottom-color: var( --wp--preset--color--teal );
}

.tcc-people-card__title {
	margin: 0;
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var( --wp--preset--color--teal );
}

.tcc-people-card__summary {
	margin: 0;
	font-size: var( --wp--preset--font-size--sm );
	line-height: 1.7;
	color: var( --wp--preset--color--navy );
}

/* Offsite profile link. Sized to meet the minimum pointer target even though
   the glyph itself is smaller. The glyph is a mask rather than inline SVG so
   it survives content sanitisation and still takes its colour from the link. */
.tcc-people-card__linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 24px;
	block-size: 24px;
	margin-block-start: 0.25rem;
	color: var( --wp--preset--color--teal );
}

.tcc-people-card__linkedin::before {
	content: "";
	inline-size: 20px;
	block-size: 20px;
	background-color: currentColor;
	-webkit-mask: var( --tcc-icon-linkedin ) no-repeat center / contain;
	mask: var( --tcc-icon-linkedin ) no-repeat center / contain;
}

.tcc-people-card__linkedin:hover {
	color: var( --wp--preset--color--teal-dk );
}

/* The compact Editorial Team card carries no biography, so it needs a smaller
   portrait to keep the card in proportion. */
.tcc-people-card--compact .tcc-people-card__media {
	flex-basis: 72px;
	width: 72px;
	height: 72px;
}

/* The directory list item is only a grid cell: the card surface is the article
   inside it, so the generic card chrome must not double up around it. Scoped
   with both classes so it wins on specificity rather than on stylesheet
   order, which this file cannot rely on. */
.tcc-card.tcc-card--person {
	background: transparent;
	border: 0;
	padding: 0;
}

/* ─── Profile page ────────────────────────────────────────────────────── */
.tcc-people-profile__header {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-block-end: 1.5rem;
}

.tcc-people-profile__portrait {
	border-radius: 8px;
	width: 240px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.tcc-people-profile__title {
	color: var( --wp--preset--color--muted );
}

.tcc-people-profile__body {
	max-width: 65ch;
}

.tcc-people-profile__credentials,
.tcc-people-profile__links {
	padding-inline-start: 1.25rem;
}

.tcc-people-profile__links a,
.tcc-people-notice a {
	color: var( --wp--preset--color--teal );
}

/* ─── Bindings-driven bylines (shared with reviewer/lead surfaces) ─────── */
.tcc-people-portrait {
	border-radius: 8px;
	object-fit: cover;
}

/* ─── Shared interaction and motion states ─────────────────────────────── */
.tcc-people-card a:focus-visible,
.tcc-people-profile__links a:focus-visible,
.tcc-people-notice a:focus-visible {
	outline: 3px solid var( --wp--preset--color--teal );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.tcc-people-card,
	.tcc-people-card__name a {
		transition: none;
	}
}

@media ( max-width: 600px ) {
	.tcc-people-directory__grid {
		grid-template-columns: 1fr;
	}

	/* Stack the portrait above the text once the card is too narrow to hold
	   both columns comfortably. */
	.tcc-people-card {
		flex-direction: column;
	}
}