/*! BaseBlue — Home · 60 El equipo. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* Papel y aire (RONDA4 §5.3). Titular en 1–7 y «Meet the team» en la base
   del titular, en la misma columna que los enlaces de Demand y Fuel. Debajo,
   cuatro retratos por fila (tres columnas de 12 cada uno) y la lámina azul en
   los dos huecos de la segunda fila. Los retratos van en su color. */

.team__head { align-items: end; }
.team__title { grid-column: 1 / span 7; grid-row: 1; }
.team__link { grid-column: 9 / -1; grid-row: 1; justify-self: start; }

.team__grid {
	display: grid;
	/* Como mucho a su tamaño real (325 × 397): en un Studio Display no se
	   amplían, y la rejilla queda a la izquierda, como en /team/. */
	grid-template-columns: repeat(4, minmax(0, 32.5rem));
	/* Entre filas, el doble de la calle: el nombre necesita aire. */
	gap: calc(var(--gutter) * 2) var(--gutter);
	margin: var(--block-gap) 0 0;
	padding: 0;
	list-style: none;
	/* La lámina mide su alto contra el ancho de la rejilla (cqw). */
	container-type: inline-size;
}

/* ------------------------------------------------------------------ Retrato */
/* El revelado de imagen del sitio: recorte de abajo arriba y la imagen que
   se asienta por dentro, escalonados por persona. */
.team__frame {
	overflow: hidden;
	aspect-ratio: 325 / 397;
	border-radius: var(--r-m);
	background: var(--bb-paper-2);
}
.team__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-2) var(--ease-out);
}
.team__grid[data-reveal] .team__frame {
	clip-path: inset(100% 0 0 0 round var(--r-m));
	transition: clip-path var(--dur-4) var(--ease-io) calc(var(--i, 0) * var(--stagger));
}
.team__grid[data-reveal] .team__frame img {
	scale: 1.06;
	transition: transform var(--dur-2) var(--ease-out), scale 1.4s var(--ease-out) calc(var(--i, 0) * var(--stagger));
}
.team__grid[data-reveal].is-in .team__frame { clip-path: inset(0 round var(--r-m)); }
.team__grid[data-reveal].is-in .team__frame img { scale: 1; }
@media (hover: hover) and (pointer: fine) {
	.team__person:hover .team__frame img { transform: scale(1.03); }
}

.team__name {
	margin: 1.2rem 0 0;
	font-size: var(--t-body);
	font-weight: 500;
	line-height: 1.3;
}
.team__role {
	margin: 0.4rem 0 0;
	font-size: var(--t-small);
	font-weight: 300;
	line-height: 1.4;
	color: var(--muted);
}

/* ------------------------------------------------------------------ Join us */
/* La lámina azul: alto de un retrato, dos huecos de ancho. Sin campo de
   puntos ni decoración: el azul y el aire cierran el bloque. */
.team__join {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--card-pad);
	border-radius: var(--r-l);
	/* Las tintas de la superficie azul (las mismas que el pie). */
	background: var(--bb-flood);
	color: #fff;
	--muted: rgba(255, 255, 255, 0.76);
	--accent: #fff;
}
/* En escritorio, el alto exacto de un retrato de su fila (no el del
   retrato más su nombre): así la lámina se alinea con las fotos. */
@media (orientation: landscape) and (min-width: 1100px) {
	.team__join { align-self: start; height: calc(min((100cqw - 3 * var(--gutter)) / 4, 32.5rem) * 397 / 325); }
}
.team__join-title { margin: var(--head-gap) 0 0; }
.team__join-text {
	margin: var(--head-gap) 0 0;
	max-width: 44ch;
	font-size: var(--t-small);
	font-weight: 300;
	line-height: 1.5;
	color: var(--muted);
}
.team__join-link { margin-top: auto; padding-top: var(--head-gap); }
.team__join-link:focus-visible { outline-color: #fff; }

/* Tableta: tres por fila y la lámina ocupa la fila final entera. */
@media (orientation: portrait), (max-width: 1099px) {
	.team__grid { grid-template-columns: repeat(3, minmax(0, 32.5rem)); }
	.team__join { grid-column: 1 / -1; }
}
/* Móvil: dos por fila; la lámina a todo el ancho, alto por contenido. */
@media (orientation: portrait), (max-width: 899px) {
	.team__title, .team__link { grid-column: 1 / -1; grid-row: auto; }
	.team__link { margin-top: var(--head-gap); }
}
@media (max-width: 599px) {
	.team__grid { grid-template-columns: repeat(2, minmax(0, 32.5rem)); }
}

@media (prefers-reduced-motion: reduce) {
	.team__grid[data-reveal] .team__frame { clip-path: none; transition: none; }
	.team__grid[data-reveal] .team__frame img { scale: 1; transition: none; }
	.team__person:hover .team__frame img { transform: none; }
}