/**
 * Pattern: Meet the Team archive  (templates/archive-kds_team.html +
 * patterns/team-archive.php + inc/team-grid.php renderers)
 *
 * Styles the data-driven kds_team archive — the canonical Meet the Team hub:
 *   1. kd-archive--team hero    — query-title H1 + Customizer intro line.
 *   2. kd-team-feature          — feature block for the flagged member (image left +
 *      bio teaser right; e.g. "Our Founder").
 *   3. kd-team-archive__group   — one role section: centered purple heading + grid.
 *      The grid itself (.kd-team-grid / .kd-team-card) is styled by team-card.css —
 *      no card CSS is duplicated here.
 *
 * Design source: Figma node 22:1046 — Meet the Team wireframe (placeholder styling;
 * real system applies Montserrat headings, --kd-color-primary purple, Inter body).
 * Auto-enqueued by the inc/enqueue.php glob. Prefix: --kd-* / .kd-*.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO — archive title + intro
   ══════════════════════════════════════════════════════════════════════════ */

/* query-title isn't .wp-block-post-title, so the global hero-interior title rule
   doesn't reach it — restate the hero H1 treatment for the archive title. */
.kd-archive--team .kd-hero-interior .wp-block-query-title {
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	font-size: var(--kd-size-banner);
	line-height: var(--kd-lh-tight);
	color: var(--kd-color-base); /* white */
	margin: 0;
}

/* Intro line — white 18px below the H1 (injected by kds_team_archive_intro_subtitle). */
.kd-team-archive__intro {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-body-lg); /* 18px */
	font-weight: 400;
	line-height: 1.65;
	color: var(--kd-color-base);
	max-width: var(--kd-measure-intro); /* intro measure — ~574px */
	margin: var(--kd-space-sm) 0 0; /* 16px gap from H1 */
}

@media (max-width: 767.98px) {
	.kd-team-archive__intro {
		font-size: var(--kd-size-body); /* 16px */
		max-width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. FEATURE BLOCK — flagged member ("Our Founder")
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Horizontal block: image left (~46%) + content right (~54%), vertically centred.
 * Stacks on mobile. Figma 93:5819–5824: image #F9F9FF 555×500 rounded 20, heading
 * 36px purple, 18px body, "Read More" pill.
 */
.kd-team-feature {
	display: flex;
	align-items: center;
	gap: var(--kd-space-xl); /* 64px */
	/* Align to the 3-card grid bounds (3×24.5rem + 2×1.5rem gap = 76.5rem), centered,
	   so the feature image's left edge lines up with the leftmost card above. Our
	   content container (1512px) is wider than the Figma frame, so the grid is
	   centred rather than flush-left — the feature follows suit. */
	max-width: var(--kd-measure-grid);
	margin-inline: auto;
	/* Renders after the role grids (Figma 22:1046); the preceding role group's
	   margin-bottom provides the gap above, so no bottom margin needed here. */
}

.kd-team-feature__image {
	flex: 0 0 46%;
	max-width: 46%;
	aspect-ratio: 555 / 500;
	background-color: var(--kd-color-neutral-100); /* light surface (#F7F8FC) */
	border-radius: 20px;
	overflow: hidden;
}

.kd-team-feature__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.kd-team-feature__content {
	flex: 1 1 auto;
}

.kd-team-feature__eyebrow {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-body-lg); /* 18px */
	font-weight: 600;
	color: var(--kd-color-primary);
	margin: 0 0 var(--kd-space-xs); /* 8px */
}

.kd-team-feature__name {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: clamp(1.75rem, 3vw, 2.25rem); /* 28px → 36px */
	line-height: 1.28;
	color: var(--kd-color-primary);
	margin: 0 0 var(--kd-space-md); /* 24px */
}

.kd-team-feature__text p {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-body-lg); /* 18px */
	line-height: 1.55;
	color: var(--kd-color-body);
	margin: 0 0 var(--kd-space-md); /* 24px → CTA */
}

/* CTA inherits the global pill-button styling via its wp-block-button__link classes;
   just guarantee inline-block flow + a top gap if no teaser text precedes it. */
.kd-team-feature__cta {
	display: inline-block;
	margin-top: var(--kd-space-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. ROLE GROUPS — heading + grid
   ══════════════════════════════════════════════════════════════════════════ */

.kd-team-archive__group {
	margin-bottom: var(--kd-space-xxl); /* 96px between role sections */
}

.kd-team-archive__group:last-child {
	margin-bottom: 0;
}

/* Section heading — centered, 36px Bold purple. */
.kd-team-archive__heading {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2.25rem); /* 24px → 36px */
	line-height: 1.28;
	color: var(--kd-color-primary);
	text-align: center;
	letter-spacing: 0.15px;
	margin: 0 0 var(--kd-space-xl); /* 64px → grid */
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. OTHER CONTRIBUTORS — credits columns
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Members of list-mode team_role terms (term meta "Display as list"), rendered as a
 * grid of bulleted "Name – Role" lists above the feature block. Driven by
 * kds_team_archive_lists_html(). Shares the card-grid bounds (76.5rem, centred) so it
 * aligns with the grids + feature. "Other Contributors" heading reuses
 * .kd-team-archive__heading. Figma 22:1046: columns of bulleted name lists.
 */
.kd-team-credits {
	max-width: var(--kd-measure-grid); /* match the 3-card grid bounds */
	margin: 0 auto var(--kd-space-xxl); /* centred; 96px → feature block */
}

.kd-team-credits__cols {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* centre the column group in the section */
	gap: var(--kd-space-xl); /* 64px between columns */
}

.kd-team-credits__col {
	flex: 0 1 auto; /* size to content so the centred group isn't half-empty */
	min-width: 0;
	/* Plain text columns — no card frame (Figma 22:1046). */
}

.kd-team-credits__col-heading {
	font-family: var(--kd-font-heading);
	font-weight: 700;
	font-size: clamp(1.125rem, 2vw, 1.5rem); /* 18px → 24px */
	color: var(--kd-color-primary);
	margin: 0 0 var(--kd-space-md); /* 24px */
}

.kd-team-credits__list {
	margin: 0;
	padding-left: 1.25rem;
	list-style: disc;
}

.kd-team-credits__list li {
	font-family: var(--kd-font-body);
	font-size: var(--kd-size-body);
	line-height: 1.6;
	color: var(--kd-color-body);
	margin-bottom: var(--kd-space-xs); /* 8px */
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet + below (≤1023.98px) — feature block stacks ───────────────────── */
@media (max-width: 1023.98px) {
	.kd-team-feature {
		flex-wrap: wrap;
		gap: var(--kd-space-lg); /* 40px */
	}

	.kd-team-feature__image,
	.kd-team-feature__content {
		flex-basis: 100%;
		max-width: 100%;
	}

	.kd-team-feature__image {
		max-width: var(--kd-measure-narrow); /* ~555px portrait */
		margin-inline: auto;
	}

	.kd-team-archive__group {
		margin-bottom: var(--kd-space-xl); /* 64px */
	}
}

/* ── Mobile (≤767.98px) ───────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
	.kd-team-archive__heading {
		font-size: clamp(1.25rem, 5vw, 1.75rem);
		margin-bottom: var(--kd-space-lg); /* 40px */
	}

	.kd-team-feature__image {
		aspect-ratio: 4 / 3;
	}

	/* Stacked credit lists read better left-aligned than floating centred. */
	.kd-team-credits__cols {
		justify-content: flex-start;
	}
}