/* ============================================================
   Team Collage — production port of team-lab Variant D.
   Mixed-media collage (photos + video tiles) above a 4-card
   roster of photo+bio profile cards.
   ============================================================ */
.ced-team {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	padding-block: clamp(4rem, 8vw, 7rem);
	padding-inline: var(--gutter-x);
}

.ced-team__inner {
	max-width: var(--page-max);
	margin: 0 auto;
}

.ced-team__head { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.ced-team__title {
	font-size: clamp(1.85rem, 3.5vw, 2.8rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 0;
	color: var(--wp--preset--color--ink);
	max-width: 22ch;
}
.ced-team__lede {
	color: rgba(20, 20, 28, 0.65);
	max-width: 60ch;
	margin: 0;
	line-height: 1.55;
}

/* ── Marquee wall — multi-column auto-scrolling office moments.
   Each column scrolls translateY 0 → -50% (or reverse) at a
   slightly different duration. Slice is duplicated per column in
   render.php so the loop is seamless. Edge fades hide the seam.
   Hover anywhere pauses every column. */
.ced-team__marq {
	margin-bottom: 4rem;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid rgba(20, 20, 28, 0.08);
	background: var(--wp--preset--color--paper);
	/* Edge fade — content peeks in from top/bottom, never hard-cuts. */
	mask-image: linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.ced-team__marq-wall {
	display: grid;
	grid-template-columns: repeat(var(--cols, 4), 1fr);
	gap: 0.85rem;
	height: clamp(420px, 55vw, 620px);
	padding: 0.85rem;
}
.ced-team__marq-col {
	overflow: hidden;
	position: relative;
}
.ced-team__marq-track {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	animation: ced-team-marq-up var(--marq-dur, 48s) linear infinite;
	will-change: transform;
}
.ced-team__marq-track--down {
	animation-name: ced-team-marq-down;
}
@keyframes ced-team-marq-up {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}
@keyframes ced-team-marq-down {
	from { transform: translateY(-50%); }
	to   { transform: translateY(0); }
}
/* Hover anywhere in the wall pauses every column — gives the user a
   moment to actually read a caption when something catches their eye. */
.ced-team__marq:hover .ced-team__marq-track,
.ced-team__marq:focus-within .ced-team__marq-track {
	animation-play-state: paused;
}
/* Respect reduced-motion preference — stop the scroll entirely. */
@media (prefers-reduced-motion: reduce) {
	.ced-team__marq-track { animation: none !important; }
}

/* ── Marquee tile (one office moment per card) ─────────────────── */
.ced-team__marq-tile {
	margin: 0;
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 4 / 5;
	border-radius: 14px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	transition: transform 320ms var(--ease-smooth, ease);
}
.ced-team__marq-tile:hover { transform: scale(1.02); }

/* Real <img> or <video> inside a tile — fills the figure exactly,
   covers cropped to centre, sits on top of the gradient placeholder
   so partial loads still look intentional. */
.ced-team__marq-tile > img,
.ced-team__marq-tile > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: inherit;
}

/* Placeholder gradients per accent — replaced by real <img>/background
   when `src` is supplied in render.php's $photos array. */
.ced-team__marq-tile--lavender { background: radial-gradient(120% 120% at 0% 0%,    rgba(181,148,255,0.55), rgba(181,148,255,0.15) 60%, transparent), linear-gradient(135deg, #efe6ff, #c7adff); }
.ced-team__marq-tile--rose     { background: radial-gradient(120% 120% at 0% 100%,  rgba(255,121,158,0.5),  rgba(255,121,158,0.12) 60%, transparent), linear-gradient(135deg, #ffe8ee, #ffafc6); }
.ced-team__marq-tile--sky      { background: radial-gradient(120% 120% at 100% 100%,rgba(78,205,196,0.55),  rgba(78,205,196,0.15) 60%, transparent), linear-gradient(135deg, #d8f5f1, #98e0d8); }
.ced-team__marq-tile--coral    { background: radial-gradient(120% 120% at 100% 0%,  rgba(255,107,71,0.55),  rgba(255,107,71,0.15) 60%, transparent), linear-gradient(135deg, #ffe1d6, #ffb8a3); }
.ced-team__marq-tile--sunset   { background: radial-gradient(120% 120% at 50% 0%,   rgba(255,179,71,0.55),  rgba(255,179,71,0.15) 60%, transparent), linear-gradient(135deg, #fff2d9, #ffd089); }
.ced-team__marq-tile--sage     { background: radial-gradient(120% 120% at 100% 50%, rgba(200,221,168,0.6),  rgba(200,221,168,0.2)  60%, transparent), linear-gradient(135deg, #f1f7e4, #c8dda8); }

.ced-team__marq-tile figcaption {
	position: absolute; left: 1rem; bottom: 0.85rem; right: 1rem;
	display: grid; gap: 0.15rem;
	z-index: 2;
}
.ced-team__marq-tile figcaption::before {
	content: '';
	position: absolute;
	inset: -1rem -1rem -0.85rem -1rem;
	background: linear-gradient(180deg, transparent 0%, rgba(20, 20, 28, 0.35) 100%);
	z-index: -1;
}
.ced-team__marq-tile figcaption strong {
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--paper);
	line-height: 1.15;
	text-shadow: 0 1px 3px rgba(20, 20, 28, 0.5);
}
.ced-team__marq-tile figcaption small {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
	text-shadow: 0 1px 2px rgba(20, 20, 28, 0.5);
}

/* ── Roster beneath the collage — full profile cards ────────── */
.ced-team__roster { padding-top: 2.5rem; border-top: 1px dashed rgba(20,20,28,0.12); }
.ced-team__roster-head { display: grid; gap: 0.5rem; margin-bottom: 2rem; }
.ced-team__roster-title {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	margin: 0;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
}
.ced-team__roster-lede {
	color: rgba(20, 20, 28, 0.6);
	max-width: 55ch;
	margin: 0.25rem 0 0;
	font-size: 0.95rem;
	line-height: 1.55;
}

.ced-team__roster-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

/* Board row — 5 leaders across the full page width */
.ced-team__roster-grid--board {
	grid-template-columns: repeat(5, 1fr);
}

/* Operational row — 2 heads, centered beneath the board, limited width so
   the cards don't blow up to half the page each. Sits with breathing room
   above so the visual hierarchy reads as "two separate groups." */
.ced-team__roster-grid--ops {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 640px;
	margin-top: 2rem;
	margin-left: auto;
	margin-right: auto;
}

.ced-team__person {
	background: var(--wp--preset--color--paper);
	border: 1px solid rgba(20,20,28,0.10);
	border-radius: 18px;
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr;
	transition: transform 320ms var(--ease-smooth, ease), border-color 320ms;
}
.ced-team__person:hover { transform: translateY(-3px); border-color: rgba(20,20,28,0.18); }
.ced-team__person--lead {
	background: var(--wp--preset--color--ink);
	border-color: rgba(232,229,222,0.10);
	color: var(--wp--preset--color--paper);
}

/* Portrait area — 4:5 aspect, gradient placeholder, "PORTRAIT" badge */
.ced-team__person-portrait {
	width: 100%;
	aspect-ratio: 4 / 5;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	font-size: clamp(3rem, 5.5vw, 5rem);
	font-weight: 700;
	color: var(--wp--preset--color--paper);
}
.ced-team__person--lavender .ced-team__person-portrait,
.ced-team__person--lead     .ced-team__person-portrait { background: linear-gradient(135deg, #b594ff, #8a6ad6); }
.ced-team__person--coral    .ced-team__person-portrait { background: linear-gradient(135deg, #ff6b47, #d44e2c); }
.ced-team__person--sky      .ced-team__person-portrait { background: linear-gradient(135deg, #4ecdc4, #2e9b94); }
.ced-team__person--sage     .ced-team__person-portrait { background: linear-gradient(135deg, #c8dda8, #95b970); }
.ced-team__person--rose     .ced-team__person-portrait { background: linear-gradient(135deg, #ff7d9e, #d44a72); }
.ced-team__person--sunset   .ced-team__person-portrait { background: linear-gradient(135deg, #ffb347, #e08524); }
.ced-team__person-mark { position: relative; z-index: 1; }

/* Real portrait <img> — sits on top of the gradient placeholder,
   crops cover to centre, covers the full 4:5 portrait area. */
.ced-team__person-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	z-index: 3;
}
.ced-team__person-placeholder {
	position: absolute;
	bottom: 0.75rem; left: 50%;
	transform: translateX(-50%);
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: rgba(20, 20, 28, 0.32);
	backdrop-filter: blur(4px);
	z-index: 2;
}

.ced-team__person-body {
	padding: 1.5rem 1.5rem 1.75rem;
	display: grid;
	gap: 0.7rem;
}
.ced-team__person-role {
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(20,20,28,0.55);
}
.ced-team__person--lead .ced-team__person-role { color: rgba(232,229,222,0.7); }

.ced-team__person-name {
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	letter-spacing: -0.005em;
	margin: 0;
	line-height: 1.1;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
.ced-team__person--lead .ced-team__person-name { color: var(--wp--preset--color--paper); }

.ced-team__person-bio {
	color: rgba(20,20,28,0.68);
	font-size: 0.86rem;
	line-height: 1.5;
	margin: 0;
}
.ced-team__person--lead .ced-team__person-bio { color: rgba(232,229,222,0.72); }

.ced-team__person-quote {
	margin: 0.25rem 0 0;
	padding: 0 0 0 0.85rem;
	border-left: 2px solid rgba(20,20,28,0.18);
}
.ced-team__person--lead .ced-team__person-quote { border-left-color: rgba(203,108,230,0.55); }
.ced-team__person-quote p {
	font-style: italic;
	font-size: 0.92rem;
	line-height: 1.4;
	color: rgba(20,20,28,0.7);
	margin: 0;
}
.ced-team__person--lead .ced-team__person-quote p { color: rgba(232,229,222,0.85); }

/* LinkedIn link pill — sits at the bottom of each card body, subtle until hover.
   On hover it tints into LinkedIn's brand blue so the affordance is unmistakable. */
.ced-team__person-linkedin {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.75rem;
	padding: 0.42rem 0.85rem;
	justify-self: start;
	color: rgba(20, 20, 28, 0.7);
	background: rgba(20, 20, 28, 0.05);
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background 200ms, color 200ms, transform 200ms;
}
.ced-team__person-linkedin:hover {
	background: rgba(10, 102, 194, 0.12);
	color: rgb(10, 102, 194);
	transform: translateY(-1px);
}
.ced-team__person--lead .ced-team__person-linkedin {
	color: rgba(232, 229, 222, 0.78);
	background: rgba(232, 229, 222, 0.08);
}
.ced-team__person--lead .ced-team__person-linkedin:hover {
	background: rgba(232, 229, 222, 0.18);
	color: rgba(232, 229, 222, 1);
}

/* ============================================================
   HERO VARIANT — `hero` block attribute set true.
   The marquee fills the top of the page (~85vh) edge-to-edge,
   the page H1 + lede sit overlaid at the bottom over a dark
   scrim, and the roster section follows in a cream container.
   ============================================================ */
.ced-team--hero {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	/* Theme + WP default rules are forcing ~10rem block padding + 4vw inline padding
	   on full-bleed sections. We MUST override with !important for true edge-to-edge. */
	padding: 0 !important;
	width: 100vw;
	max-width: none;
	margin: 0 calc(50% - 50vw) !important;
}

/* Kill any WP block-gap on the very first block in /about/ main — the hero
   must butt directly against the site header with no dead space. */
body.page-template-page-about main.wp-block-group > .ced-team--hero:first-child,
main.wp-block-group > .ced-team--hero:first-child {
	margin-top: 0 !important;
}

.ced-team__hero {
	position: relative;
	width: 100%;
	height: 85vh;
	min-height: 600px;
	max-height: 980px;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
}

/* Atmospheric dim — uniform dark layer over the photos so the hero feels
   cinematic and the title overlay reads with more drama. Sits BETWEEN the
   marquee (z auto / 0) and the title overlay (z 5). Top edge gets a touch
   more darkness so it blends smoothly into the sticky nav above. */
.ced-team__hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(8, 8, 14, 0.55) 0%,
		rgba(8, 8, 14, 0.28) 18%,
		rgba(8, 8, 14, 0.28) 70%,
		rgba(8, 8, 14, 0.4)  100%
	);
	z-index: 2;
	pointer-events: none;
}

/* Marquee inside hero — fills the container, no inner border. Photos run all
   the way to the top edge (no fade-in) so there's no dead black band under
   the site header. Bottom fade still aggressive for the title-overlay scrim. */
.ced-team--hero .ced-team__marq {
	margin: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	position: absolute;
	inset: 0;
	mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 280px), rgba(0,0,0,0.45) 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 280px), rgba(0,0,0,0.45) 100%);
}

.ced-team--hero .ced-team__marq-wall {
	height: 100%;
	/* No edge padding so the first/last column touches the viewport edge.
	   Inter-column gap stays as a breath between tiles. */
	padding: 0;
	gap: 0.3rem;
}

/* Tight inter-tile gap inside the track — denser column packing */
.ced-team--hero .ced-team__marq-track {
	gap: 0.3rem;
}

/* Small square tiles in hero — at 10 columns / 85vh this yields ~4 tiles
   visible per column for a packed Instagram-grid feel. */
.ced-team--hero .ced-team__marq-tile {
	aspect-ratio: 1 / 1;
	border-radius: 4px;
}

/* Title overlay — bottom-aligned, dark scrim gradient, contained to page-max */
.ced-team__hero-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 5;
	padding: clamp(4rem, 10vw, 8rem) clamp(1.5rem, 4vw, 4rem) clamp(2rem, 5vw, 3.5rem);
	background: linear-gradient(to top,
		rgba(20, 20, 28, 0.94) 0%,
		rgba(20, 20, 28, 0.78) 35%,
		rgba(20, 20, 28, 0.4) 70%,
		rgba(20, 20, 28, 0) 100%);
	color: var(--wp--preset--color--paper);
	pointer-events: none;
}
/* Restore interactivity on the actual content inside the overlay */
.ced-team__hero-overlay > * {
	pointer-events: auto;
}

.ced-team__hero-overlay .ced-eyebrow {
	color: rgba(232, 229, 222, 0.72);
	display: inline-block;
	margin-bottom: 0.85rem;
	letter-spacing: 0.18em;
	font-weight: 600;
}

.ced-team__hero-title {
	font-size: clamp(2.6rem, 7vw, 5.5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 0.95;
	color: var(--wp--preset--color--paper);
	margin: 0 0 1rem;
	max-width: 18ch;
}

.ced-team__hero-lede {
	color: rgba(232, 229, 222, 0.85);
	max-width: 60ch;
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	line-height: 1.55;
	margin: 0 0 1.5rem;
}

.ced-team__hero-scroll {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--paper);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	padding: 0.7rem 1.15rem;
	border: 1px solid rgba(232, 229, 222, 0.32);
	border-radius: 999px;
	background: rgba(232, 229, 222, 0.04);
	transition: background 220ms, border-color 220ms, transform 220ms;
}
.ced-team__hero-scroll:hover {
	background: rgba(232, 229, 222, 0.14);
	border-color: rgba(232, 229, 222, 0.6);
	transform: translateY(2px);
}

/* Below-hero container — roster sits in a normal cream-bg section that
   spans the viewport edge-to-edge, with the roster centered to page-max. */
.ced-team__inner--below-hero {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	width: 100%;
	padding: clamp(4rem, 8vw, 6rem) var(--gutter-x);
	max-width: none;
	margin: 0;
}

.ced-team__inner--below-hero .ced-team__roster {
	max-width: var(--page-max);
	margin: 0 auto;
	padding-top: 0;
	border-top: none;
}

/* Hero responsive — shorter on mobile, lighter masks */
@media (max-width: 900px) {
	.ced-team__hero {
		height: 78vh;
		min-height: 540px;
	}
	.ced-team__hero-title { max-width: 22ch; }
}
@media (max-width: 640px) {
	.ced-team__hero {
		height: 72vh;
		min-height: 480px;
	}
	.ced-team--hero .ced-team__marq {
		mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 200px), rgba(0,0,0,0.3) 100%);
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 200px), rgba(0,0,0,0.3) 100%);
	}
}

/* Responsive collapse — fewer marquee columns, smaller roster grid */
@media (max-width: 900px) {
	.ced-team__marq { --cols: 3; }
	.ced-team__marq-wall { grid-template-columns: repeat(3, 1fr); height: clamp(380px, 60vw, 480px); }
	.ced-team__roster-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.ced-team__marq { --cols: 2; }
	.ced-team__marq-wall { grid-template-columns: repeat(2, 1fr); height: clamp(340px, 70vw, 420px); }
}
@media (max-width: 480px) {
	.ced-team__roster-grid { grid-template-columns: 1fr; }
}