/**
 * YEBN 2026 — team
 */

.yebn-team {
	max-width: var(--yebn-container);
	margin-inline: auto;
	padding-inline: var(--yebn-space-3);
	padding-block: var(--yebn-space-6) var(--yebn-space-7);
}

.yebn-team__header {
	max-width: 62ch;
	margin-bottom: var(--yebn-space-6);
}

.yebn-team__header h1 { margin: 0 0 var(--yebn-space-2); }

.yebn-team__intro p { color: var(--yebn-muted); font-size: var(--yebn-fs-lg); }

.yebn-team__group + .yebn-team__group {
	margin-top: var(--yebn-space-7);
}

.yebn-team__grouphead {
	margin-bottom: var(--yebn-space-4);
	padding-bottom: var(--yebn-space-1);
	border-bottom: 2px solid var(--yebn-navy);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--yebn-space-2);
}

.yebn-team__grouphead h2 { margin: 0; font-size: var(--yebn-fs-2xl); }

.yebn-team__grouphead p {
	margin: 0;
	max-width: 46ch;
	font-size: var(--yebn-fs-sm);
	color: var(--yebn-muted);
}

.yebn-team__committee {
	margin: var(--yebn-space-5) 0 var(--yebn-space-3);
	font-size: var(--yebn-fs-sm);
	font-weight: 600;
	letter-spacing: var(--yebn-ls-label);
	text-transform: uppercase;
	color: var(--yebn-gold-text);
}

.yebn-team__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--yebn-space-4);
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.yebn-person {
	display: flex;
	flex-direction: column;
	gap: var(--yebn-space-2);
}

.yebn-person__portrait {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--yebn-radius);
	background-color: var(--yebn-surface);
}

.yebn-person__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The five portraits come from five different rooms — a studio sweep, a lab,
 * a conference, two offices. Desaturating at rest pulls that jumble into one
 * set, and colour returns on hover, which is the same language the home page
 * and the partner band already use.
 *
 * Only where hovering exists. On a touch screen there is no hover, so the
 * photographs stay in colour rather than being permanently grey.
 */
@media (hover: hover) {
	.yebn-person__portrait img {
		filter: grayscale(100%) contrast(1.02);
		transition: filter var(--yebn-dur-slow) var(--yebn-ease);
	}

	.yebn-person:hover .yebn-person__portrait img,
	.yebn-person:focus-within .yebn-person__portrait img {
		filter: grayscale(0%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.yebn-person__portrait img { transition: none; }
}

/* Nobody gets a broken image. */
.yebn-person__monogram {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background-color: var(--yebn-navy);
	color: var(--yebn-gold);
	font-family: var(--yebn-font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.yebn-person__body { display: flex; flex-direction: column; gap: 2px; }

.yebn-person__name {
	margin: 0;
	font-family: var(--yebn-font-display);
	font-size: var(--yebn-fs-base);
	font-weight: 600;
	line-height: 1.25;
	color: var(--yebn-navy);
}

.yebn-person__role {
	margin: 0;
	font-size: var(--yebn-fs-sm);
	font-weight: 500;
	color: var(--yebn-gold-text);
}

.yebn-person__focus {
	margin: 4px 0 0;
	font-size: var(--yebn-fs-sm);
	line-height: 1.45;
	color: var(--yebn-ink);
}

.yebn-person__affiliation {
	margin: 4px 0 0;
	font-size: var(--yebn-fs-xs);
	line-height: 1.4;
	color: var(--yebn-muted);
}

.yebn-person__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--yebn-space-1);
	margin: 6px 0 0;
	padding-top: 6px;
	border-top: 1px solid var(--yebn-line-soft);
	min-height: 30px;
}

.yebn-person__place {
	font-size: var(--yebn-fs-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--yebn-muted);
}

.yebn-person__linkedin {
	display: inline-flex;
	color: var(--yebn-navy);
	margin-left: auto;
	line-height: 0;
	transition: color var(--yebn-dur-fast) var(--yebn-ease);
}

.yebn-person__linkedin:hover,
.yebn-person__linkedin:focus-visible { color: var(--yebn-gold-text); }

.yebn-team__join {
	margin-top: var(--yebn-space-7);
	padding: var(--yebn-space-5);
	background-color: var(--yebn-surface);
	border-radius: var(--yebn-radius);
	max-width: 62ch;
}

.yebn-team__join h2 { margin: 0 0 var(--yebn-space-1); font-size: var(--yebn-fs-xl); }

.yebn-team__join p {
	margin: 0 0 var(--yebn-space-3);
	color: var(--yebn-muted);
}