/*
	Team Carousel's own images are always object-fit: contain — team photos
	are portrait, and cropping them the way Callout Carousel's own landscape
	586/430 + cover treatment does would cut off heads, the same concern the
	Team block's own comment on 'medium_large' vs 'card-thumb' already
	documents. Menu's stacked-card image is capped by height (max-height,
	no aspect-ratio box); Side by Side's is a portrait aspect-ratio box —
	same 3/4 ratio the Team block's own Feature card uses.
*/

/* ---- Shared (both layouts) --------------------------------------------- */

.team-carousel__content > * + * {
	margin-block-start: var(--space-4);
}

/* Fixed size, same 32px/uppercase/400-weight look as Callout Carousel's own
   per-item heading (.callout-carousel__heading, callout-carousel.css) —
   this one's a plain <h3>, not the Heading clone (see team-carousel.php's
   own comment: a person's name has no separate Style choice to override). */
.team-carousel__name {
	font-size: 2rem; /* 32px */
	text-transform: uppercase;
	font-weight: var(--font-weight-regular); /* 400 */
}

/* Same size as .card__meta (components.css, 17px) — Team's own Role text. */
.team-carousel__role {
	font-size: var(--font-size-3);
	margin: 0;
}

.team-carousel__location {
	font-size: var(--font-size-1);
	color: var(--color-text-muted);
	margin: 0;
}

/* ---- Menu layout -------------------------------------------------------- */
/* Same nav-list treatment as Callout Carousel's own Menu layout
   (callout-carousel.css) — kept as an exact copy rather than a shared
   class, since each block's markup lives in its own self-contained folder
   (CLAUDE.md's "one flex layout = one self-contained blocks/{slug}/
   folder" convention) — only the class prefix differs. */

/* Overrides .grid--center's own align-items: center (team-carousel.php's
   own markup) just for the nav column — the carousel column beside it can
   be taller, and centering the nav against that height left it floating;
   top-aligned it instead lines up with the carousel's own first item. */
.team-carousel__nav {
	align-self: start;
}

.team-carousel__nav-list {
	display: flex;
	flex-direction: column;
	/* No gap — items sit flush against each other, each its own flat-
	   coloured block with no border between them to separate them instead. */
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
	.is-active is toggled by assets/js/carousel.js's syncActiveGo() whenever
	Splide's active slide changes — see that file's own comment.

	Colour stops are tokens: --callout-carousel-nav-bg/-bg-hover (tokens.css,
	reused here rather than a second, team-carousel-specific pair — same
	literal greys either way) for resting/hover, and the shared
	--color-dark-bg/-fg (already "black background, white text" in this
	theme's own vocabulary) for active.
*/
.team-carousel__nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 5rem; /* 80px */
	padding-inline: var(--space-5); /* 24px */
	border: none;
	border-radius: 0;
	background-color: var(--callout-carousel-nav-bg);
	color: var(--color-white-fg); /* black */
	font: inherit;
	font-size: 1rem; /* 16px */
	font-weight: var(--font-weight-regular); /* 400 */
	text-align: left;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);

	& svg {
		flex: none;
		width: 1rem; /* 16px */
		height: 1rem;
	}

	&:hover {
		background-color: var(--callout-carousel-nav-bg-hover);
	}

	&.is-active {
		background-color: var(--color-dark-bg);
		color: var(--color-dark-fg); /* white */
	}
}

.team-carousel__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8); /* 48px, between the photo and the name */
	text-align: center;

	/* Name/Role/Location read fine centered as short single lines — Bio,
	   often several sentences, doesn't; left-aligned prose is more
	   readable regardless of how the rest of the card is centered. */
	& .team-carousel__bio {
		text-align: left;
	}
}

/* Below 48em, a tighter 32px between the photo and the name — .team-carousel__card
   has exactly two children (the photo wrapper, then .team-carousel__content,
   which holds name/role/location/bio internally spaced by its own rule
   below), so this gap IS specifically the photo-to-name gap, not a general
   card rhythm value that would also affect name-to-role etc. */
@media (max-width: 47.99em) {
	.team-carousel__card {
		gap: var(--space-6); /* 32px */
	}
}

/* Capped by height, not a fixed aspect-ratio box — the image keeps its own
   natural proportions (object-fit: contain has nothing to fit against
   without an explicit box) and centers in the available width. */
.team-carousel__media--stacked {
	display: flex;
	justify-content: center;
	max-height: 25rem; /* 400px */

	& img {
		width: auto;
		max-height: 25rem; /* 400px */
		object-fit: contain;
	}
}

/* ---- Side by Side layout ------------------------------------------------ */

.team-carousel__slide.grid-2 {
	gap: var(--space-10);
}

/* Below 48em, where .grid-2 stacks to a single column (layout.css), this
   same gap becomes the vertical space between the photo and .team-carousel__content
   (name/role/location/bio) — 32px there instead of the 80px side-by-side
   gap desktop uses, matching the Menu layout's own photo-to-name gap
   directly above. */
@media (max-width: 47.99em) {
	.team-carousel__slide.grid-2 {
		gap: var(--space-6); /* 32px */
	}
}

/* 2fr/3fr split (image/content) instead of .grid-2's own even 1fr/1fr —
   scoped to the same min-width: 48em breakpoint .grid-2 itself uses for
   its two-column split (layout.css), so it doesn't fight the single-column
   mobile stack below that. Tied to which column holds WHICH content, not
   to left/right position — .team-carousel__slide--reversed swaps which
   side the image renders on via real markup reorder (team-carousel.php),
   so its own column order is swapped here too, keeping the image at 2fr
   and the content at 3fr regardless of which side either one is on. */
@media (min-width: 48em) {
	.team-carousel__slide.grid-2 {
		grid-template-columns: 2fr 3fr;
	}

	.team-carousel__slide--reversed.grid-2 {
		grid-template-columns: 3fr 2fr;
	}
}

.team-carousel__media--slide {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--radius-lg);

	/*
		object-fit: cover, not contain — the actual cause of the "missing"
		rounded corners some photos showed. contain doesn't fill the 3:4 box
		in both dimensions when a photo's own aspect ratio doesn't match it;
		the photo's own rectangular edge, wherever the letterboxing cuts it
		off, was what was actually visible in the corner — not the box's
		rounded edge — reading as a square corner even though border-radius
		was correctly applied throughout. cover always fills the box
		edge-to-edge, so the rounding clips the real photo pixels directly,
		on every photo regardless of its own aspect ratio.

		This is a real trade-off, not a free fix: cover crops, so a photo
		whose own aspect ratio differs a lot from 3:4 can crop tighter than
		contain did — potentially the top of a head on a very wide photo,
		or the sides on a very narrow one. This is the opposite choice from
		Menu's own .team-carousel__media--stacked (still contain, no
		box to crop against there), and the original reason this layout
		picked contain in the first place (see this file's own earlier
		comment history) — accepted here specifically to fix the corners.

		border-radius stays on the image itself too, not just this wrapper
		— redundant now that cover means there's no letterboxing left to
		explain a clipping failure, but harmless to leave as a second line
		of defence.
	*/
	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: var(--radius-lg);
	}
}

/* Same "text-align does double duty" technique Callout Carousel's own
   .callout-carousel__slide--reversed uses (callout-carousel.css). */
.team-carousel__slide--reversed .team-carousel__content {
	text-align: right;
}

/* A member with no Photo isn't skipped (team-carousel.php's own docblock)
   — without this, .grid-2's second column would sit visibly empty instead
   of letting the content fill the row. */
.team-carousel__slide--no-media .team-carousel__content {
	grid-column: 1 / -1;
}