/**
 * P11 Advisor card + discipline-grouped bands (Figma Board of Advisors 145:2466; card
 * 145:2625 + kicker 145:2566 + photo 170:2774 + name 145:2567 + line 145:2568 + control 170:2646;
 * band 170:2824).
 *
 * Skin for the parent's people module (`kds/team-archive` pattern, `.kd-team-archive__group`
 * sections, `.kd-team-grid` / `.kd-team-card`). inc/advisors.php decorates the parent's output
 * with `.lts-advisors` (the archive group), `.lts-advisors__band` (one per discipline),
 * `.lts-advisor-card` + `data-discipline` (one per advisor, for the P12 chips), the kicker and
 * the control; the parent's own classes stay, this file only skins them.
 *
 * Card (1440, drawn 359 x 498): a Clear face, 22px radius, card shadow, a Dusk band on top
 * (91, the discipline as a 16px uppercase +0.13em Clear kicker, 17 from the top), a 219 x 217
 * circular photo overlapping the band by 28, the name (Medium 40/50, Deep, h3), a one-line
 * description (18/23 Body) and the control "Request an introduction" (Medium 14 uppercase +1px,
 * Tide Dark, arrow), all centred. The control has NO target yet (K3), so it is an inert span.
 *
 * Bands: one per discipline, stacked. Odd bands sit on the page (Clear) with 45 above and below,
 * even bands are full-bleed Horizon with 66 above and below (Figma rows 1563 / 2106 / 2781...).
 * Each band owns its padding (the parent group's inline padding is stripped in PHP). The visible
 * discipline is the kicker on every card, so the band's H2 stays in the DOM (outline: H2 band,
 * H3 advisor) but is visually hidden. Cards: 3 across with a 69.5 gap at 1440, rows centred (a
 * discipline of 4 or 1 is not left-aligned and never orphans a column).
 *
 * Load order: partials sort by BASENAME across parent + child, so the parent's team-archive.css
 * and team-card.css load AFTER this file ((0,1,0) to (0,4,0) rules, e.g. `.kd-team-card:focus-within
 * .kd-team-card__name`). Every rule here is `.lts-advisors .kd-team-grid .kd-team-card.lts-advisor-card ...`
 * (>= 0,4,0) or `.lts-advisors .kd-team-archive__group.lts-advisors__band` (0,3,0 vs the parent's
 * 0,1,0 margin), so specificity decides, not order. cpt-section.css's `!important` margin applies
 * only to a grid directly after a `.kd-section-header`, never here.
 *
 * Responsive (derived, no frames): 3 across from 1200 (the gap shrinks with the viewport; below
 * that a card is under 300 and the 40px name and the control no longer fit), 2 across from 782,
 * 1 across (card capped at 359, centred) at <= 781. At <= 420 the card's side padding tightens
 * so the control stays on one line.
 */

/* -- Tokens + band ------------------------------------------------------------ */

.lts-advisors {
	--lts-adv-gap: clamp(1.5rem, 4.83vw, 4.34375rem); /* 69.5 at 1440 */
	--lts-adv-card-w: min(100%, 22.4375rem); /* 359 */
	--lts-adv-pad: 2.8125rem; /* 45: a band on the page */
	--lts-adv-pad-tint: 4.125rem; /* 66: a Horizon band */
}

.lts-advisors .kd-team-archive__group.lts-advisors__band {
	position: relative;
	margin: 0;
	padding-block: var(--lts-adv-pad);
}

/* Every second discipline is a full-bleed Horizon band. The page-wide fill is a spread shadow
   clipped to the band's own height, so it never creates horizontal scroll (the cards' shadows
   stay inside the 45 / 66 of padding). */
.lts-advisors .kd-team-archive__group.lts-advisors__band:nth-of-type(even) {
	padding-block: var(--lts-adv-pad-tint);
	background: var(--wp--preset--color--tint);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--tint);
	clip-path: inset(0 -100vmax);
}

/* The discipline is the kicker on each card; keep the heading for the outline only. */
.lts-advisors .kd-team-archive__group .lts-advisors__heading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -- Grid: 3 across; a short last row starts at the left (Figma) ------------------- */

/* The grid is exactly as wide as a full row and centred, so full rows stay centred and a
   partial row lines up under the first card, as Figma draws it (Alain 10-09). */
.lts-advisors .kd-team-archive__group .kd-team-grid,
.lts-advisors.lts-advisors--grid .kd-team-grid {
	--lts-adv-cols: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: var(--lts-adv-gap);
	width: 100%;
	max-width: calc(
		var(--lts-adv-cols) * var(--lts-adv-card-w) +
			(var(--lts-adv-cols) - 1) * var(--lts-adv-gap)
	);
	margin: 0 auto;
}

/* Fewer than 3 cards showing (launch: one expert; or a chip leaves 1-2): centre them instead of
   leaving them at the left of an empty row (Alain 10-27). Counts only cards the chips leave visible;
   a short last row under full rows still starts at the left. */
.lts-advisors
	.kd-team-grid:not(
		:has(> .kd-team-card:nth-child(3 of .kd-team-card:not([hidden])))
	) {
	justify-content: center;
}

.lts-advisors .kd-team-grid .kd-team-card.lts-advisor-card {
	flex: 0 0
		min(
			var(--lts-adv-card-w),
			calc(
				(100% - (var(--lts-adv-cols) - 1) * var(--lts-adv-gap)) /
					var(--lts-adv-cols)
			)
		);
}

/* -- Card ---------------------------------------------------------------------- */

.lts-advisors .kd-team-grid .kd-team-card.lts-advisor-card {
	/* A Clear face: small text stays Tide Dark whatever the band. */
	--lts-accent-text: var(--wp--custom--color--small-text);
	--lts-focus-ring: var(--wp--custom--color--focus-ring);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	height: auto;
	min-height: 31.125rem; /* 498 */
	margin: 0;
	padding: 0 0 2.75rem; /* 44: the control ends 44 above the bottom edge */
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--card);
	overflow: clip;
	text-align: center;
	transform: none;
	transition:
		box-shadow var(--kd-transition-base),
		transform var(--kd-transition-base);
}

/* Kicker: the Dusk band with the discipline. */
.lts-advisors
	.kd-team-grid
	.kd-team-card.lts-advisor-card
	.lts-advisor-card__kicker {
	align-self: stretch;
	box-sizing: border-box;
	min-height: 5.6875rem; /* 91 */
	margin: 0;
	padding: 1.0625rem 1rem 1.75rem; /* 17 from the top; 28 = the photo overlap */
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.5625; /* 25/16 */
	letter-spacing: var(--wp--custom--typography--tracking-eyebrow);
	text-transform: uppercase;
	text-align: center;
	overflow-wrap: anywhere;
}

/* Photo: a circle, centred, 28 over the band. */
.lts-advisors
	.kd-team-grid
	.kd-team-card.lts-advisor-card
	.kd-team-card__photo {
	position: relative;
	flex: 0 0 auto;
	width: 61%; /* 219 of 359 */
	margin: -1.75rem 0 0;
	aspect-ratio: 219 / 217;
	border-radius: 50%;
	background: var(--wp--preset--color--tint);
}

.lts-advisors
	.kd-team-grid
	.kd-team-card.lts-advisor-card
	.kd-team-card__photo
	img {
	border-radius: 50%;
	object-position: center;
}

/* Body: name, one line, control. */
.lts-advisors .kd-team-grid .kd-team-card.lts-advisor-card .kd-team-card__body {
	flex: 1 1 auto;
	box-sizing: border-box;
	width: 100%;
	padding: 1.25rem 1.6875rem 0; /* name top 20 under the photo; 27 each side */
	align-items: center;
}

.lts-advisors .kd-team-grid .kd-team-card.lts-advisor-card .kd-team-card__name {
	/* The site h3 (~27.6 at 1440, 24 on phones); was xxx-large (40) from the Figma card, Alain 10-13. */
	--lts-h3-size: var(--wp--preset--font-size--xx-large);
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--lts-h3-size);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.25;
	text-align: center;
	overflow-wrap: anywhere;
}

/* Role line: the parent's Job Title / Role meta ("CFP®, CEPA · Founder"), right under the name;
   the parent leaves it out when empty. */
.lts-advisors .kd-team-grid .kd-team-card.lts-advisor-card .kd-team-card__meta {
	max-width: 17.1875rem; /* 275 */
	margin: 0.375rem 0 0;
	color: var(--lts-accent-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.4;
	text-align: center;
}

/* Bio: the expert's Excerpt (inc/advisors.php), the Figma one-liner slot as Body 18/23. */
.lts-advisors
	.kd-team-grid
	.kd-team-card.lts-advisor-card
	.lts-advisor-card__bio {
	max-width: 17.1875rem; /* 275 */
	margin: 1.125rem 0 0; /* 18 under the name or role */
	color: var(--wp--preset--color--body-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.25; /* 23 */
	text-align: center;
}

.lts-advisors
	.kd-team-grid
	.kd-team-card.lts-advisor-card
	.kd-team-card__meta
	.kd-team-card__role,
.lts-advisors
	.kd-team-grid
	.kd-team-card.lts-advisor-card
	.kd-team-card__meta
	.kd-team-card__pronouns {
	color: inherit;
	font-weight: inherit;
}

/* Control: pinned to the bottom so the row lines up whatever the line count. */
.lts-advisors
	.kd-team-grid
	.kd-team-card.lts-advisor-card
	.lts-advisor-card__intro {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem; /* 6 */
	margin-top: auto;
	padding-top: 1.375rem; /* 22: the least gap above it */
	color: var(--lts-accent-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.2857; /* 18/14 */
	letter-spacing: var(--wp--custom--typography--tracking-button);
	text-transform: uppercase;
	text-decoration: none;
}

.lts-advisor-card__arrow {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
}

/* -- Once K3 gives the control a target (filter lts_theme_advisors_intro_url) -----
   One focus stop per card: the link is stretched over the card, its ring drawn on the card. */

.lts-advisors
	.kd-team-grid
	.kd-team-card.lts-advisor-card
	a.lts-advisor-card__intro::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Editor: the overlay would cover the card and swallow block selection. */
.editor-styles-wrapper .lts-advisor-card a.lts-advisor-card__intro::after {
	content: none;
}

.lts-advisors
	.kd-team-grid
	.kd-team-card.lts-advisor-card:has(a.lts-advisor-card__intro):hover {
	box-shadow: var(--wp--custom--shadow--card-hover);
	transform: translateY(-2px);
}

.lts-advisors
	.kd-team-grid
	.kd-team-card.lts-advisor-card:has(
		a.lts-advisor-card__intro:focus-visible
	) {
	outline: 3px solid var(--lts-focus-ring);
	outline-offset: 2px;
}

/* Only where :has() works; otherwise the link keeps its own ring. */
@supports selector(:has(a)) {
	.lts-advisors
		.kd-team-grid
		.kd-team-card.lts-advisor-card
		a.lts-advisor-card__intro:focus-visible {
		outline: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lts-advisors .kd-team-grid .kd-team-card.lts-advisor-card,
	.lts-advisors
		.kd-team-grid
		.kd-team-card.lts-advisor-card:has(a.lts-advisor-card__intro):hover {
		transform: none;
	}
}

/* -- Responsive (derived) ------------------------------------------------------- */

@media (max-width: 1199.98px) {
	.lts-advisors .kd-team-archive__group .kd-team-grid,
	.lts-advisors.lts-advisors--grid .kd-team-grid {
		--lts-adv-cols: 2;
		--lts-adv-gap: 1.75rem;
	}
}

@media (max-width: 781.98px) {
	.lts-advisors .kd-team-archive__group .kd-team-grid,
	.lts-advisors.lts-advisors--grid .kd-team-grid {
		--lts-adv-cols: 1;
		--lts-adv-gap: 1.5rem;
	}
}

@media (max-width: 420px) {
	.lts-advisors
		.kd-team-grid
		.kd-team-card.lts-advisor-card
		.kd-team-card__body {
		padding-inline: 0.75rem;
	}
}

/* SEE MORE (Userback 8536419, Figma Review 255:8029: centred, 74 below the cards). Only with JS:
   assets/js/lts-paged.js folds the cards past the first page and reveals them per click; without
   JS every card shows and the button stays out. The fold is a class, so the chips' `hidden` and
   the paging never undo each other. */
html.lts-js
	.lts-advisors
	.kd-team-grid
	.kd-team-card.lts-advisor-card.is-paged-out {
	display: none;
}

.lts-advisors .lts-advisors__band .lts-advisors__more {
	display: none;
	justify-content: center;
	margin-block-start: 4.625rem;
}

html.lts-js
	.lts-advisors
	.lts-advisors__band
	.lts-advisors__more:not([hidden]) {
	display: flex;
}

@media (max-width: 781.98px) {
	.lts-advisors .lts-advisors__band .lts-advisors__more {
		margin-block-start: 2.5rem;
	}
}