/* Team Members, by Akel Alkubeh. Loaded only on pages that use [team_members]. */
.team-members {
	display: grid;
	grid-template-columns: repeat(var(--team-members-cols, 4), minmax(0, 1fr));
	gap: 36px 20px;
}
.team-members--cols-4 { --team-members-cols: 4; }
.team-members--cols-3 { --team-members-cols: 3; }
.team-members--cols-2 { --team-members-cols: 2; }

.team-members__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}
.team-members__media {
	position: relative;
	aspect-ratio: 600 / 760;
}
.team-members__block {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 76%;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .4s ease;
}
.team-members__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom;
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.team-members__card:hover .team-members__photo,
.team-members__card:focus-within .team-members__photo { transform: translateY(-10px) scale(1.03); }
.team-members__card:hover .team-members__block,
.team-members__card:focus-within .team-members__block { transform: rotate(-2deg); filter: saturate(1.15) brightness(1.05); }

.team-members__links {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	gap: 8px;
}
.team-members__link {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--night, #2b274c);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease, transform .3s ease, background-color .3s ease;
}
.team-members__card:hover .team-members__link,
.team-members__card:focus-within .team-members__link { opacity: 1; transform: none; }
.team-members__link:hover { background: var(--crimson, #ee4266); color: #ffffff; }
.team-members__link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus, #eedda4); }
.team-members__be { font-size: 13px; font-weight: 700; letter-spacing: -.5px; line-height: 1; }
@media (hover: none) { .team-members__link { opacity: 1; transform: none; } }

.team-members__text { margin: 0; }
.team-members .team-members__job {
	margin: 0 0 4px;
	font-family: Inter, sans-serif;
	font-size: 15px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #ffffff; /* set explicitly: the theme colours headings directly */
}
.team-members .team-members__name {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 15px;
	line-height: 18px;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--white-80, rgba(255, 255, 255, .8));
}

/* tablet: at most 3 columns */
@media (max-width: 1024px) {
	.team-members--cols-4 { --team-members-cols: 3; }
}
/* large phones: 2 columns */
@media (max-width: 767px) {
	.team-members { --team-members-cols: 2 !important; gap: 28px 16px; }
}
/* small phones: 1 column, as in the design */
@media (max-width: 480px) {
	.team-members { --team-members-cols: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
	.team-members__block, .team-members__photo, .team-members__link { transition: none; }
}