/*
 * Team members. Figma 1940:46529 desktop: 720 column centred, 32 gaps; header
 * header/XL + body/S grey; filter row "Filters" header/M + dropdowns 300x55 (r8, border
 * light, subtitle/L), 24 apart; applied filters tag/medium pills 12 apart; count header/M;
 * rows 16 apart (name header/XS + chevron 20, role body/S, pin + region body/XS grey,
 * "Expertise" subtitle/M + tag/small, bio body/XS, 1px divider).
 * Mobile 986:16752: 24 under the photo, header/L, dropdowns stacked 350x55 16 apart.
 */

.team-members.section--join { margin-top: calc(44px - var(--section-gap)); }

.team-members__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: calc(720px + 2 * var(--gutter));
}

.team-members__head { display: flex; flex-direction: column; gap: 8px; }
.team-members__title { font: var(--f-header-xl); color: var(--c-text-dark); }
.team-members__text { font: var(--f-body-s); color: var(--c-text-grey); }

/* ---------- Filters ---------- */
.team-members__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.team-members__filters-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.team-members__filters-title { font: var(--f-header-m); color: var(--c-text-dark); }

/* "Clear All" (986:16662): subtitle/XL primary, mobile only. */
.team-members__clear {
	display: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-primary);
	font: var(--f-subtitle-xl);
	cursor: pointer;
}

.team-members__clear:hover { text-decoration: underline; text-underline-offset: 2px; }

.team-filter {
	position: relative;
	flex: 1 1 260px;
	max-width: 303px;
}

.team-filter__button {
	--icon-size: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	height: 55px;
	padding: 0 15px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-xs);
	background: var(--c-bg-white);
	color: var(--c-text-grey);
	font: var(--f-subtitle-l);
	text-align: left;
}

.team-filter.is-active .team-filter__button { color: var(--c-text-dark); }
.team-filter__button .icon { color: var(--c-text-dark); transition: transform .2s ease; }
.team-filter__button[aria-expanded="true"] { border-color: var(--c-primary); }
.team-filter__button[aria-expanded="true"] .icon { transform: rotate(180deg); }
.team-filter__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.team-filter__menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	padding: 8px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-xs);
	background: var(--c-bg-white);
	box-shadow: var(--shadow-card);
}

.team-filter__menu[hidden] { display: none; }

.team-filter__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 8px;
	border-radius: 6px;
	font: var(--f-subtitle-m);
	color: var(--c-text-dark);
	cursor: pointer;
}

.team-filter__option:hover { background: var(--c-bg-purple); }
.team-filter__option input { position: absolute; opacity: 0; pointer-events: none; }

.team-filter__box {
	--icon-size: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 18px;
	height: 18px;
	border: 1px solid var(--c-border-light);
	border-radius: 4px;
	color: transparent;
}

.team-filter__option input:checked + .team-filter__box { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-text-white); }
.team-filter__option input:focus-visible + .team-filter__box { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.team-filter__text { flex: 1; }
.team-filter__count { color: var(--c-text-grey); }

.team-members__applied {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: -16px;
}

.team-members__applied[hidden] { display: none; }
.team-members__pill { font: var(--f-subtitle-l); padding-inline: 15px; }

/* ---------- List ---------- */
.team-members__list-wrap { display: flex; flex-direction: column; gap: 16px; }
.team-members__count { font: var(--f-header-m); color: var(--c-text-dark); }

.team-members__list { display: flex; flex-direction: column; gap: 16px; }

.team-member[hidden] { display: none; }

.team-member {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--c-border-light);
}

.team-member__summary {
	display: block;
	list-style: none;
	cursor: default;
}

summary.team-member__summary { cursor: pointer; }
.team-member__summary::-webkit-details-marker { display: none; }

.team-member__top { display: flex; align-items: flex-start; gap: 16px; }

.team-member__photo {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.team-member__main {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.team-member__name-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 2px;
}

.team-member__name { font: var(--f-header-xs); color: var(--c-text-dark); }
.team-member__chevron { --icon-size: 20px; transition: transform .2s ease; }
.team-member__details[open] .team-member__chevron { transform: rotate(180deg); }

.team-member__role { font: var(--f-body-s); color: var(--c-text-dark); }

.team-member__region {
	display: flex;
	align-items: center;
	gap: 4px;
	font: var(--f-body-xs);
	color: var(--c-text-grey);
}

.team-member__pin { --icon-size: 14px; color: var(--c-primary); }

.team-member__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.team-member__tags-label { font: var(--f-subtitle-m); color: var(--c-text-dark); }
.team-member__tags .tag { padding: 3px 9px 5px; }

.team-member__bio {
	margin-top: 16px;
	font: var(--f-body-xs);
	color: var(--c-text-dark);
}

@media (max-width: 767px) {
	.team-members.section--join { margin-top: calc(24px - var(--section-gap)); }

	.team-members__title { font: var(--f-header-l); }
	.team-members__text { font: var(--f-body-xs); }

	.team-members__filters { flex-direction: column; align-items: stretch; gap: 16px; }
	.team-filter { flex: none; max-width: none; }
	.team-members__clear:not([hidden]) { display: inline-block; }
}