/* The group photo carries the "+" markers; the list of individual portraits is
   the narrow-screen fallback, because eleven faces in one wide photo stop being
   readable -- and tappable -- well before phone widths. With no photo set, the
   list is the only display and behaves exactly as it did before. */
.tdev-equipe__photo {
	position: relative;
	display: none;
}

.tdev-equipe__photo-image {
	display: block;
	width: 100%;
	height: auto;
}

/* Coordinates are stored as percentages of the photo and point at the centre of
   the marker, hence the translate. */
.tdev-equipe__hotspot {
	position: absolute;
	transform: translate(-50%, -50%);
	width: clamp(34px, 3.2vw, 52px);
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	background: url('../images/icon-plus.svg') no-repeat center / contain;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.tdev-equipe__hotspot:hover,
.tdev-equipe__hotspot:focus-visible {
	transform: translate(-50%, -50%) scale(1.12);
}

.tdev-equipe__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

@media (min-width: 1000px) {
	.tdev-equipe--photo .tdev-equipe__photo {
		display: block;
	}

	.tdev-equipe--photo .tdev-equipe__list {
		display: none;
	}
}

@media (max-width: 999px) {
	.tdev-equipe__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.tdev-equipe__list {
		grid-template-columns: 1fr;
	}
}

.tdev-equipe__member {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
	text-align: center;
}

.tdev-equipe__image {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	margin-bottom: 0.75rem;
	padding-left: 0.75rem;
    padding-right: 0.75rem;
    box-sizing: border-box;
}

/* First and last name share one treatment: together they read as the person's
   name, not as a name followed by a caption. */
.tdev-equipe__name,
.tdev-equipe__lastname {
	font-family: var(--wp--preset--font-family--lunchbox);
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--terracotta);
}

.tdev-equipe__lastname {
	color: var(--wp--preset--color--noir);
}

.tdev-equipe-popup {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: var(--wp--preset--color--noir-70);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.tdev-equipe-popup[hidden] {
	display: none;
}

/* The backdrop fades while the panel also scales up: assets/blocks/equipe.js
   adds is-open a frame after unhiding, and waits for this transition to end
   before hiding again, so the closing animation is allowed to play out. */
.tdev-equipe-popup.is-open {
	opacity: 1;
}

/* Portrait on the left, identity on the right. The panel carries the plaster
   texture, whose own rounded corners are transparent -- the radius below has to
   match them or the two roundings fight each other. */
.tdev-equipe-popup__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 60%) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	padding: 40px;
	border-radius: 24px;
	/* The padding is part of the 860px, not added to it. */
	box-sizing: border-box;
	max-width: 660px;
	width: 100%;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	text-align: left;
	background-color: var(--wp--preset--color--beige);
	background-image: url('../images/fond-popup.webp');
	background-size: cover;
	background-position: center;
	transform: scale(0.94);
	transition: transform 0.25s ease;
}

.tdev-equipe-popup.is-open .tdev-equipe-popup__panel {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.tdev-equipe-popup,
	.tdev-equipe-popup__panel {
		transition: none;
	}

	.tdev-equipe-popup__panel {
		transform: none;
	}
}

/* A member with no portrait: the identity takes the full width rather than
   leaving an empty column. */
.tdev-equipe-popup__panel:not(:has(.tdev-equipe-popup__media)) {
	grid-template-columns: minmax(0, 1fr);
}

.tdev-equipe-popup__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 30px;
	height: 32px;
	padding: 0;
	border: 0;
	background: url('../images/icon-close.svg') no-repeat center / contain;
	cursor: pointer;
}

.tdev-equipe-popup__media {
	border-radius: 24px;
	overflow: hidden;
	background: url('../images/beton-media.webp') no-repeat center / cover;
}

.tdev-equipe-popup__image {
	display: block;
	width: 100%;
	height: auto;
}

/* In the pop-up the two halves of the name are set differently: the first name
   in the Square Peg script, the surname below it in Lunchbox. */
.tdev-equipe-popup__name {
	font-family: var(--wp--preset--font-family--square-peg);
	font-weight: var(--wp--custom--typography--font-weight--regular);
	text-transform: none;
	color: var(--wp--preset--color--terracotta);
	font-size: 64px;
	line-height: 1;
	margin-bottom: 0.25rem;
}

.tdev-equipe-popup__lastname {
	font-family: var(--wp--preset--font-family--lunchbox);
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--large);
    line-height: 0.4;
    margin-bottom: 2rem;
    margin-top: 0;
    font-weight: bold;
}

.tdev-equipe-popup__separator {
	display: block;
	width: 111px;
	max-width: 100%;
	height: 7px;
	margin-bottom: 1rem;
	background: url('../images/separator-popup.svg') no-repeat left center / contain;
}

.tdev-equipe-popup__bio {
	white-space: pre-line;
}

@media (max-width: 599px) {
	.tdev-equipe-popup__panel {
		grid-template-columns: minmax(0, 1fr);
		padding: 24px;
	}

	.tdev-equipe-popup__image {
		max-width: 220px;
		margin: 0 auto;
	}

	.tdev-equipe-popup__name {
		margin-top: 0;
	}
}