/**
 * P5 Audience cards, 2-up (Figma Home 107:673 + 107:705, "Who it's for").
 *
 * Skin for the parent's kds/card-grid grid (`.kd-card-grid`), opt-in by
 * `.lts-audience-cards` on the section. The card is `.lts-audience-card` (never
 * `.kd-card`, so none of its border / !important rules apply): a Horizon card, 36px
 * radius all round (clipped), a photo 207 wide on the left, a 9px Deep bar, then a Tide
 * title (Medium 32/28, a 60px slot, centred), a body (18/24) and an optional text link
 * (Medium 12 uppercase +1px, Tide Dark, arrow). The drawn card has no shadow.
 *
 * Links: a card with a link is whole-card clickable through that ONE link (a stretched
 * ::before, one focus stop per card; the arrow is its ::after). A card without a link is
 * inert (no hover, no focus). The first card is drawn with no link; the second links to
 * the Board of Advisors page.
 *
 * Geometry: every Figma number is a design px times `--lts-ac-u` (= card width / 598:
 * 1px at 1440 and above, scaling in proportion below). Fonts never go below their floors.
 *
 * Load order: partials sort by BASENAME across parent + child; the parent's card-grid.css
 * states the grid with !important at (0,1,0) (columns, gap, margin, width, max-width, and
 * again at 1024 / 767). Every grid rule here is `.lts-audience-cards .kd-card-grid.lts-audience-cards__grid`
 * (0,3,0), !important where the parent is, so specificity decides, not order.
 *
 * Responsive (derived, no frames): two columns from 1024 (photo + bar + text scale down
 * with the card), one column below 1024 (card 598 max, centred), at <= 600 the photo
 * moves above the text (full-width band, bar under it). A last odd card spans both
 * columns; a lone card is centred at one card width.
 *
 * Hover / focus (D20): linked cards lift 2px with the deeper card shadow; focus ring 3px
 * Tide Dark (4.93:1 on Horizon) drawn on the card.
 */

.lts-audience-cards {
	--lts-ac-gap: 1.375rem; /* 22 */
	--lts-ac-w: min(var(--wp--style--global--content-size), 100cqw);
	--lts-ac-card: calc((var(--lts-ac-w) - var(--lts-ac-gap)) / 2);
	--lts-ac-u: min(1px, calc(var(--lts-ac-card) / 598));

	container-type: inline-size;
	box-sizing: border-box;
	width: auto; /* alignfull's negative gutter margins widen it to the viewport */
}

/* No section padding: the hover lift (2px) and shadow paint outside the card and nothing above it clips them
   (the card clips its own content with overflow:clip, the section only has container-type), so the section is the
   cards and nothing else and the header -> cards and cards -> next-band gaps are the drawn ones. */

/* -- Grid: 2 columns, 22 gap -------------------------------------------------- */

.lts-audience-cards .kd-card-grid.lts-audience-cards__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	column-gap: var(--lts-ac-gap) !important;
	row-gap: var(--lts-ac-gap) !important;
	width: var(--lts-ac-w) !important;
	max-width: none;
	margin: 0 auto !important;
}

/* A last odd card spans both columns, capped at one card width and centred (1 or 3 cards). */
.lts-audience-cards
	.kd-card-grid.lts-audience-cards__grid
	> .lts-audience-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc((100% - var(--lts-ac-gap)) / 2);
}

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

.lts-audience-cards .lts-audience-card {
	--lts-accent-text: var(--wp--custom--color--small-text);
	--lts-focus-ring: var(--wp--custom--color--focus-ring);

	--lts-ac-photo: calc(207 * var(--lts-ac-u));
	--lts-ac-bar: calc(9 * var(--lts-ac-u));

	position: relative;
	display: grid;
	grid-template-columns: var(--lts-ac-photo) var(--lts-ac-bar) minmax(0, 1fr);
	box-sizing: border-box;
	min-height: calc(323 * var(--lts-ac-u));
	margin: 0;
	border-radius: 2.25rem; /* 36 */
	background: var(--wp--preset--color--tint);
	overflow: clip; /* no shadow at rest, so nothing to clip */
	transition:
		box-shadow var(--kd-transition-base),
		transform var(--kd-transition-base);
}

/* The Deep bar: a 9px column between the photo and the text. */
.lts-audience-cards .lts-audience-card::before {
	content: "";
	grid-column: 2;
	grid-row: 1;
	background: var(--wp--preset--color--contrast);
}

/* Photo: fills the 207 column edge to edge (the export is the drawn 207x323 crop). */
.lts-audience-cards .lts-audience-card .lts-audience-card__photo {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	margin: 0;
}

.lts-audience-cards .lts-audience-card .lts-audience-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* Text column: 51 from the bar to the text, 26 to the card edge (drawn 38 / 293 of 331; F2b: 305 (301 is the minimum) is the
   text box that keeps card 1's drawn five body lines at the 18.4px body token). */
.lts-audience-cards .lts-audience-card .lts-audience-card__body {
	grid-column: 3;
	grid-row: 1;
	box-sizing: border-box;
	min-width: 0;
	margin: 0; /* the flow layout's block gap */
	/* Right 51 like the left (Alain 10-16: tighter paragraph, same padding on both sides; drawn 26). */
	padding: calc(44 * var(--lts-ac-u)) calc(51 * var(--lts-ac-u)) 2.5rem
		calc(51 * var(--lts-ac-u));
}

/* Title: Medium 32/28 in a two-line (60) slot, centred so one- and two-line titles sit
   on the same axis as drawn. */
.lts-audience-cards .lts-audience-card .lts-audience-card__title {
	--lts-h3-size: clamp(1.625rem, 2.2222vw, 2rem); /* 32 at 1440 */
	display: flex;
	align-items: center;
	min-height: 3.75rem; /* 60 */
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--lts-h3-size);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 0.875; /* 28 / 32 as drawn (F2b: was 35 for the old DM Sans stand-in) */
	letter-spacing: 0;
}

/* Body: Regular 18/24, Body ink, top at 122 (18 below the title slot). */
.lts-audience-cards .lts-audience-card .lts-audience-card__text {
	margin: 1.125rem 0 0;
	color: var(--wp--preset--color--body-ink);
	font-weight: 400; /* no regular-weight token */
	line-height: 1.3043; /* 24 / 18.4 */
}

/* Link: Medium 12/18 uppercase +1px, Tide Dark (Tide is 3.8:1 on Horizon, D18), 14px arrow. */
.lts-audience-cards .lts-audience-card .lts-audience-card__link {
	margin: 1.125rem 0 0; /* 18 */
	font-size: 0.75rem;
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.5; /* 18 / 12 */
	letter-spacing: 0.0833em; /* 1px at 12px */
	text-transform: uppercase;
}

.lts-audience-cards .lts-audience-card .lts-audience-card__link a {
	color: var(--lts-accent-text);
	text-decoration: none;
}

/* The one hit target per card: stretched over the whole card (the card is position:relative). */
.lts-audience-cards .lts-audience-card .lts-audience-card__link a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.lts-audience-cards .lts-audience-card .lts-audience-card__link a::after {
	content: "";
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	margin-inline-start: 0.375rem;
	vertical-align: -0.125em;
	background-color: currentcolor;
	-webkit-mask: var(--lts-arrow-icon) center / contain no-repeat;
	mask: var(--lts-arrow-icon) center / contain no-repeat;
	transition: transform var(--kd-transition-fast);
}

/* -- Hover / focus: linked cards only ------------------------------------------ */

.lts-audience-cards .lts-audience-card:has(.lts-audience-card__link a):hover {
	box-shadow: var(--wp--custom--shadow--card-hover);
	transform: translateY(-2px);
}

.lts-audience-cards
	.lts-audience-card:has(.lts-audience-card__link a):hover
	.lts-audience-card__link
	a {
	color: var(--wp--preset--color--contrast);
}

.lts-audience-cards
	.lts-audience-card:has(.lts-audience-card__link a):hover
	.lts-audience-card__link
	a::after {
	transform: translateX(4px);
}

/* The card draws the ring for its stretched link (overflow:clip would cut an outside ring on the link). */
.lts-audience-cards
	.lts-audience-card:has(.lts-audience-card__link a: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-audience-cards
		.lts-audience-card
		.lts-audience-card__link
		a:focus-visible {
		outline: none;
	}
}

/* Editor: the stretched-link overlay would cover the card and swallow block selection. */
.editor-styles-wrapper
	.lts-audience-cards
	.lts-audience-card
	.lts-audience-card__link
	a::before {
	content: none;
}

@media (prefers-reduced-motion: reduce) {
	.lts-audience-cards .lts-audience-card,
	.lts-audience-cards
		.lts-audience-card:has(.lts-audience-card__link a):hover {
		transform: none;
	}

	.lts-audience-cards
		.lts-audience-card:has(.lts-audience-card__link a):hover
		.lts-audience-card__link
		a::after {
		transform: none;
	}
}

/* -- Below 1024 (derived): one column of 598-max cards ------------------------- */

@media (max-width: 1023.98px) {
	.lts-audience-cards {
		--lts-ac-card: min(37.375rem, var(--lts-ac-w));
		--lts-ac-u: min(1px, calc(var(--lts-ac-card) / 598));
	}

	.lts-audience-cards .kd-card-grid.lts-audience-cards__grid {
		grid-template-columns: minmax(0, 37.375rem) !important; /* 598 */
		justify-content: center;
	}

	.lts-audience-cards
		.kd-card-grid.lts-audience-cards__grid
		> .lts-audience-card:last-child:nth-child(odd) {
		width: auto;
	}
}

/* -- Phone (<= 600): photo band above the text ---------------------------------- */

@media (max-width: 600px) {
	.lts-audience-cards .lts-audience-card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 12.5rem 0.5625rem auto;
	}

	.lts-audience-cards .lts-audience-card::before {
		grid-column: 1;
		grid-row: 2;
	}

	.lts-audience-cards .lts-audience-card .lts-audience-card__photo {
		grid-column: 1;
		grid-row: 1;
		min-height: 0;
	}

	.lts-audience-cards .lts-audience-card .lts-audience-card__photo img {
		object-position: center 30%;
	}

	.lts-audience-cards .lts-audience-card .lts-audience-card__body {
		grid-column: 1;
		grid-row: 3;
		padding: 1.5rem 1.5rem 2rem;
	}

	.lts-audience-cards .lts-audience-card .lts-audience-card__title {
		--lts-h3-size: var(--wp--preset--font-size--xx-large);
		min-height: 0;
	}
}