/* Team page — lead card + staff cards. */

.team-grid__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
}

/* Shared role pill */

.role-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: var(--radius-pill);
	background: var(--color-neutral-7);
	color: var(--color-primary);
	font-size: var(--body-secondary-size);
	line-height: 1.4;
	letter-spacing: -0.32px;
	white-space: nowrap;
}

/* Lead card — dark, photo beside the copy */

.lead-card {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 12px;
	border-radius: var(--radius-lg);
	background: var(--color-primary);
}

.lead-card__photo {
	width: 100%;
	aspect-ratio: 405 / 497;
	object-fit: cover;
	border-radius: 16px;
}

.lead-card__body {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 0 20px 20px;
}

.lead-card__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 19px;
}

.lead-card__name {
	color: var(--color-neutral-7);
	font-size: var(--h6-size);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.38px;
}

.lead-card__facts {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lead-card__label {
	margin-bottom: 9px;
	color: var(--color-neutral-1);
	font-size: var(--body-small-size);
	line-height: 1.4;
	letter-spacing: -0.14px;
}

.lead-card__value {
	color: var(--color-neutral-7);
	font-size: var(--body-secondary-size);
	line-height: 1.4;
	letter-spacing: -0.32px;
}

.lead-card .btn { align-self: flex-start; }

/* Staff card — photo with the pill on top, white footer */

.member-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	background: var(--color-white);
}

/*
 * The photo is absolutely positioned, so without a ratio the frame collapses to
 * the height of the role pill and crops the face to a band.
 */
.member-card__top {
	position: relative;
	aspect-ratio: 429 / 405;
	padding: 14px;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	overflow: hidden;
}

.member-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.member-card__top .role-pill { position: relative; }

.member-card__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	min-height: 116px;
	padding: 29px 29px 29px 24px;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.member-card__text {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
}

.member-card__name {
	color: var(--color-primary);
	font-size: var(--h6-size);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.38px;
}

.member-card__edu {
	color: var(--color-neutral-1);
	font-size: var(--body-secondary-size);
	line-height: 1.4;
	letter-spacing: -0.32px;
}

.member-card .icon-btn { flex-shrink: 0; }

@media (min-width: 768px) {
	.team-grid__cards { grid-template-columns: repeat(2, 1fr); }
	.lead-card { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
	.team-grid__cards { grid-template-columns: repeat(3, 1fr); }

	.lead-card {
		grid-column: span 2;
		flex-direction: row;
		align-items: center;
		padding: 12px 32px 12px 12px;
	}

	.lead-card__photo {
		width: 405px;
		height: 497px;
		flex-shrink: 0;
		aspect-ratio: auto;
	}

	.lead-card__body {
		gap: 55px;
		padding: 0;
	}
}

/*
 * Whole card is clickable — the existing anchor in each card is stretched over
 * it, the same pattern the service and post cards use. The photo wrapper on
 * the member card already establishes a stacking context, so the role pill
 * stays above the stretched layer and the card keeps one link, not two.
 */

.lead-card,
.member-card {
	position: relative;
	transition: transform .25s ease, box-shadow .25s ease;
}

.lead-card .btn::after,
.member-card .icon-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	/*
	 * The card's radius, NOT `inherit` — inheriting takes the pill radius off
	 * the button the layer hangs from, which rounds the hit area into a giant
	 * capsule and leaves the card's own corners unclickable.
	 */
	border-radius: var(--radius-lg);
}

.lead-card:hover,
.member-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(16, 33, 71, .08);
}

.member-card:hover .icon-btn { background: var(--color-neutral-4); }

@media (prefers-reduced-motion: reduce) {
	.lead-card,
	.member-card { transition: none; }

	.lead-card:hover,
	.member-card:hover { transform: none; }
}