/*
 * Team page. Figma frame BSGV-team-2 (cream page).
 * Grid: three columns of 361 with 108 gaps, middle column 90px lower, starts at y420.
 * Card: photo 361x359 (black & white), name Firs Light 32 16px below, role 13px uppercase,
 * Mailen + 35px LinkedIn icon on the right. Hover: quote card in the member's colour.
 */

.team-page {
	padding-bottom: clamp(48px, 6.6vw, 100px);
}

/* Grid */

.team-grid {
	display: grid;
	gap: 56px 24px;
	margin-top: clamp(48px, 7.14vw, 108px);

	@media (min-width: 600px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	@media (min-width: 1024px) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 8.33%;
		row-gap: clamp(80px, 10vw, 150px);

		& > :nth-child(3n + 2) {
			transform: translateY(90px);
		}

		/* Room for the lowered middle column at the bottom. */
		padding-bottom: 90px;
	}
}

/* Card */

.team-card__media {
	position: relative;
	aspect-ratio: 361 / 359;
	overflow: hidden;
	background: var(--wp--preset--color--grey-light);
	outline-offset: 4px;
}

.team-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
}

.team-card__quote {
	position: absolute;
	inset: 0;
	display: flex;
	padding: 22% 14% 8% 7.5%;
	margin: 0;
	color: var(--wp--preset--color--black);
	background: var(--card-colour);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	opacity: 0;
	transition: opacity 0.35s;

	.team-card__media:hover &,
	.team-card__media:focus-visible &,
	.team-card__media.is-open & {
		opacity: 1;
	}
}

.team-card__media[tabindex] {
	cursor: pointer;
}

.team-card--pink {
	--card-colour: var(--wp--preset--color--pink);

	/* Figma uses the body text colour on pink. */
	& .team-card__quote {
		color: var(--wp--preset--color--text);
	}
}

.team-card--yellow-cta {
	--card-colour: var(--wp--preset--color--yellow-cta);
}

.team-card--sage {
	--card-colour: var(--wp--preset--color--sage);
}

.team-card__info {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
}

.team-card__name {
	font-size: var(--wp--preset--font-size--heading-m);
}

.team-card__role {
	margin-top: 8px;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--label-l);
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

.team-card__actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 16px;
	color: var(--wp--preset--color--umber);

	& .u-link {
		padding-top: 4px;
	}
}

.team-card__linkedin {
	display: block;
	width: 35px;
	height: 35px;
	transition: transform 0.2s;

	& svg {
		width: 100%;
		height: 100%;
	}

	&:hover {
		transform: scale(1.08);
	}
}

/* Vacancies: rows of 90px between 1px black lines. */

.vacancy-list {
	margin-top: clamp(64px, 6.6vw, 100px);
}

.vacancy-list__label {
	color: var(--wp--preset--color--umber);
}

.vacancy-list__items {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--black);

	& li {
		border-bottom: 1px solid var(--wp--preset--color--black);
	}
}

.vacancy-list__item {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 8px 24px;
	min-height: 90px;
	padding-block: 16px;

	@media (min-width: 768px) {
		/* Meta starts 351px into the row, as in Figma. */
		grid-template-columns: minmax(0, 351fr) minmax(0, 904fr) auto;
	}
}

.vacancy-list__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	color: var(--wp--preset--color--black);
}

.vacancy-list__meta {
	display: flex;
	gap: 30px;
	color: var(--wp--preset--color--umber);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;

	@media (max-width: 767px) {
		grid-row: 2;
	}
}

.vacancy-list__arrow {
	width: 48px;
	height: 48px;
	transition: transform 0.2s;

	& svg {
		width: 100%;
		height: 100%;
	}

	@media (max-width: 767px) {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: 40px;
		height: 40px;
	}

	.vacancy-list__item:hover & {
		transform: translateX(6px);
	}
}