/* Dome · Team — 3-column showcase (Figma 342:1403): intro (heading + arrows) |
   active portrait | two thumbnails + the active quote/role/name. */
.dome-team {
	/* Client 2026-08 round 3 — the one-screen contract, done properly this time.
	   ONE height budget drives the whole section: the viewport, minus the fixed
	   header (88px), minus 48px of guaranteed visible breathing room, minus the
	   section's own padding. Every column is bounded by it, so the section
	   CANNOT overflow the screen — on tall screens it rests at the original
	   640px composition, on smaller/zoomed screens everything scales down
	   together. No max-height tiers, no knife-edge fits. */
	--team-pad: clamp(28px, 4vh, 64px);
	--team-h: clamp(420px, 100vh - 136px - 2 * var(--team-pad), 640px);
	padding-block: var(--team-pad);
	overflow: clip;
}

/* Desktop 3-column layout: the grid IS the budget — all columns stretch to it.
   Starts at 1251px (client 2026-08): between 1100-1250 the side column got only
   ~215px, long quotes crushed the thumbnails out of ratio and the fill bands
   returned — those widths wrap instead. */
@media (min-width: 1251px) {
	.dome-team__grid {
		height: var(--team-h);
	}
}

.dome-team__grid {
	display: flex;
	gap: clamp(24px, 3.3vw, 48px);
	align-items: stretch;
}

/* ---- Left: heading (top) + arrows (bottom) ---- */
.dome-team__intro {
	flex: 0 0 320px;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 48px;
}
.dome-team__intro-top {
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.dome-team__statement {
	margin: 0;
	text-align: left;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	/* Figma: 48px / 56 leading. */
	font-size: clamp(32px, 3.4vw, 48px);
	line-height: 1.16;
}
.dome-team__controls {
	display: flex;
	gap: 12px;
}
.dome-team__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--wp--preset--color--ink);
	background: none;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	opacity: 0.5;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.dome-team__arrow svg {
	width: 16px;
	height: 16px;
}
.dome-team__arrow:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	opacity: 1;
}

/* ---- Middle: active portrait (slides) ---- */
.dome-team__main {
	/* THE FRAME MATCHES THE PHOTOS (client 2026-08, final): the portraits are
	   2:3, so the frame is 2:3. A 3:4 frame was the root of this whole saga —
	   it cropped heads (cover) or demanded invented side panels (contain).
	   Height = the section budget, width derived from it. */
	flex: 0 0 calc(var(--team-h) * 2 / 3);
	max-width: calc(var(--team-h) * 2 / 3);
	overflow: clip;
	display: flex;
	flex-direction: column;
}
.dome-team__track {
	/* Cascade mode (client 2026-08): the portraits are STACKED and cross-fade
	   like the hero slideshow — no horizontal sliding of the main photo. */
	position: relative;
	flex: 1;
	min-height: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dome-team__slide {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #ece7e1;
	opacity: 0;
	transition: opacity 0.8s ease;
}
.dome-team__slide.is-active {
	opacity: 1;
}

.dome-team__img {
	display: block;
	width: 100%;
	height: 100%;
	/* Nothing added, nothing cut: the frame is the photo's own ratio, so cover
	   fills it exactly. (No blurred side-fill layer — client rejected it.) */
	object-fit: cover;
}

/* ---- Right: two thumbnails (top) + quote / role / name (bottom) ---- */
.dome-team__side {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: clip;
}
.dome-team__panel {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 48px;
}
.dome-team__thumbs {
	display: flex;
	gap: clamp(16px, 2vw, 32px);
	flex: 0 0 auto;
}
.dome-team__thumb {
	/* Thumbnails size from the section's HEIGHT budget, never from the column
	   width (client 2026-08: on wide screens width-driven thumbs outgrew the
	   fixed section height, got squeezed out of ratio and cropped heads).
	   Height set + 2:3 ratio -> width follows; always a whole clean portrait. */
	flex: 0 0 auto;
	height: calc(var(--team-h) * 0.45);
	width: auto;
	aspect-ratio: 2 / 3;
	position: relative;
	overflow: hidden;
	background: #ece7e1;
	/* Reset button defaults (the photo thumbnails are clickable buttons now). */
	margin: 0;
	padding: 0;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
}
button.dome-team__thumb {
	display: block;
	cursor: pointer;
}
.dome-team__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
/* Subtle zoom/lift so the photos read as clickable (switch to that person). */
button.dome-team__thumb:hover img,
button.dome-team__thumb:focus-visible img {
	transform: scale(1.05);
	opacity: 0.85;
}
button.dome-team__thumb:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}
.dome-team__thumb:empty {
	background: #ece7e1;
}

.dome-team__quote-block {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-right: clamp(0px, 5vw, 80px);
	/* Fade-swap with the member change (client 2026-08): out quickly, back in
	   a touch slower — the hero-slideshow feel. */
	transition: opacity 0.45s ease;
}
.dome-team__quote-block.is-swapping {
	opacity: 0;
	transition-duration: 0.28s;
}
.dome-team__mark {
	display: block;
	width: 32px;
	height: 32px;
	/* Sit the quote mark close above the quote (was a ~60px gap). */
	margin-bottom: -16px;
	color: var(--wp--preset--color--ink);
}
.dome-team__mark svg {
	width: 100%;
	height: 100%;
}
.dome-team__quote {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	/* Figma: 24px / 32 leading. */
	font-size: clamp(20px, 1.9vw, 24px);
	line-height: 1.33;
}
.dome-team__person {
	display: flex;
	flex-direction: column;
}
.dome-team__role {
	margin: 0;
	color: var(--wp--preset--color--grey);
	font-family: var(--wp--preset--font-family--text);
	font-size: 14px;
	line-height: 20px;
}
.dome-team__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
	font-size: 18px;
	line-height: 26px;
}

.dome-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Tablet / laptop-narrow / mobile: stack ---- */
@media (max-width: 1250px) {
	.dome-team__grid {
		flex-wrap: wrap;
	}
	.dome-team__intro {
		flex-basis: 100%;
		max-width: none;
	}
	.dome-team__main {
		flex: 1 1 320px;
		/* Below the 3-column tier the height budget no longer governs — pin the
		   frame to the photos' ratio so it can never stretch. align-self stops
		   the row-stretch from overriding the ratio with the side height. */
		aspect-ratio: 2 / 3;
		align-self: flex-start;
	}
	.dome-team__side {
		flex: 1 1 320px;
		min-height: 480px;
	}
	.dome-team__thumbs {
		flex: 0 0 auto;
	}
}
@media (max-width: 680px) {
	.dome-team {
		padding-block: 64px;
	}
	/* Stack (the grid already wraps) and reorder. Client 2026-08-17: the arrows go
	   LAST — under the quote and the person's name — so the reading order is
	   heading, portrait, quote, name, then the control to move on. `display:
	   contents` dissolves the intro box so its heading and arrows become orderable
	   rows of the grid itself; without it `order` on .dome-team__controls could only
	   move it within .dome-team__intro, never past .dome-team__side. */
	.dome-team__intro {
		display: contents;
	}
	.dome-team__intro-top {
		order: 1;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.dome-team__main {
		order: 2;
		flex-basis: 100%;
		max-width: none;
	}
	.dome-team__side {
		order: 3;
		flex-basis: 100%;
		min-height: 0;
	}
	.dome-team__controls {
		order: 4;
		flex: 0 0 100%;
		justify-content: center;
		/* Air between the name and the arrows now that they follow it. */
		margin-top: 28px;
	}
	/* No need for the next-members thumbnails on mobile. */
	.dome-team__thumbs {
		display: none;
	}
	/* Let the quote panel size to its content (thumbnails removed). */
	.dome-team__panel {
		height: auto;
	}
}