/**
 * P4 Intro column + 2x2 feature cards (Figma Home 103:436).
 *
 * Skin for the parent's kds/card-grid grid (`.kd-card-grid`), opt-in by
 * `.lts-feature-cards` on the section. The cards are `.lts-feature-card` (never
 * `.kd-card`, so none of its border / !important rules apply). The "tab" on each card
 * is a visual Horizon pill drawn in the design, not an interactive tab widget: no
 * ARIA tabs, the cards are plain static text (no link, no hover, no focus stop).
 *
 * Geometry: every Figma number is a design px times `--lts-fc-u` (= content column /
 * 1216, capped at 1px: 1px from 1440 up, scaling down in proportion below). The section is an
 * inline-size container, so `cqw` resolves against the full-bleed section and the
 * Deep half-disc runs from the viewport edge to the column + 358. Fonts never go below
 * their floors (title 26, tab 14, body 18.4).
 *
 * 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-feature-cards .kd-card-grid.lts-feature-cards__grid` (0,3,0) (!important where the parent is), so
 * specificity decides, not order.
 *
 * Contrast: the tab text is Tide Dark on Horizon (4.93:1; brand Tide is 3.46, D18).
 *
 * Responsive (derived, no frames): two columns (intro | 2x2) from 1200, scaled by
 * `--lts-fc-u`. Below 1200 the intro stacks above as a Deep pill panel bleeding to the
 * left edge and the cards stay 2 columns to 782; at <= 781 one column. A last odd card
 * spans both columns, so three or five cards degrade without a hole.
 */

.lts-feature-cards {
	--lts-fc-g: 0px; /* side gutter outside the column: only when the section bleeds out of the page padding (below) */
	--lts-fc-w: min(
		var(--wp--style--global--content-size),
		calc(100cqw - 2 * var(--lts-fc-g))
	);
	/* Capped at 1px: above 1440 the cards, disc and intro measures stay at the drawn 1440 size instead
	   of growing with the wider page column (72caa54); the extra width goes into the gaps (below). */
	--lts-fc-u: min(calc(var(--lts-fc-w) / 1216), 1px);
	--lts-fc-extra: calc(
		var(--lts-fc-w) - 1216 * var(--lts-fc-u)
	); /* 0 at 1440 and below */
	--lts-fc-gap-x: calc(46 * var(--lts-fc-u));
	--lts-fc-gap-y: calc(50 * var(--lts-fc-u));
	--lts-fc-pad: clamp(1.25rem, calc(32 * var(--lts-fc-u)), 2rem);
	--lts-fc-pad-end: clamp(
		1rem,
		calc(19 * var(--lts-fc-u)),
		1.1875rem
	); /* the drawn text column is 315 of 366 */
	--lts-fc-title-size: clamp(1.625rem, 2.2222vw, 2rem); /* 32 at 1440 */

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

/* Full-bleed on a page: the column is the viewport minus both gutters. Nested in a
   plain core/group there is no gutter to subtract. */
.entry-content > .lts-feature-cards.alignfull {
	--lts-fc-g: var(--wp--custom--layout--gutter);
}

/* The Deep disc starts 10 above the cards and ends 2 below: keep it inside the section
   (.kd-section sets padding-block 0 at the same depth). */
.kd-section.lts-feature-cards {
	padding-block: calc(10 * var(--lts-fc-u)) calc(2 * var(--lts-fc-u));
}

/* -- Row: intro | cards ------------------------------------------------------ */

.lts-feature-cards .lts-feature-cards__inner {
	position: relative;
	z-index: 1;
	display: grid;
	/* Intro 438 + cards 778 (2 x 366 + 46) as drawn. Wide screens: half of the extra width goes into the
	   gap between the disc and the cards, the rest stays right of the cards (Alain 10-16, as the
	   About founder block). */
	grid-template-columns:
		calc(438 * var(--lts-fc-u) + var(--lts-fc-extra) / 2)
		minmax(0, calc(778 * var(--lts-fc-u)));
	align-items: start;
	box-sizing: border-box;
	width: var(--lts-fc-w);
	max-width: none;
	margin-inline: auto;
}

/* The Deep half-disc: from the viewport edge to col + 358, pill-ended on the right
   (500 > half the height, so the browser clamps it to a semicircle), 10 above and 2
   below the cards as drawn. It follows the row's height, so more cards just grow it. */
.lts-feature-cards .lts-feature-cards__inner::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(-10 * var(--lts-fc-u));
	bottom: calc(-2 * var(--lts-fc-u));
	left: calc(
		(var(--lts-fc-w) - 100cqw) / 2
	); /* the section's left edge: bounded, so no clip is needed */
	right: calc(100% - 358 * var(--lts-fc-u));
	border-radius: 0 500px 500px 0;
	background: var(--wp--preset--color--contrast);
	pointer-events: none;
}

.lts-feature-cards .lts-feature-cards__intro {
	box-sizing: border-box;
	padding-top: calc(
		202 * var(--lts-fc-u)
	); /* heading top y331 vs cards y129 */
	margin: 0;
}

.lts-feature-cards .lts-feature-cards__title {
	max-width: calc(256 * var(--lts-fc-u));
	margin: 0;
	line-height: 1.0417; /* 50 / 48 */
}

.lts-feature-cards .lts-feature-cards__lead {
	max-width: calc(207 * var(--lts-fc-u));
	margin: 1.125rem 0 0; /* 18 */
	font-weight: 400; /* no regular-weight token */
	line-height: 1.3043; /* 24 / 18.4 */
}

/* -- Grid: 2 columns, 46 x 50 gap -------------------------------------------- */

.lts-feature-cards .kd-card-grid.lts-feature-cards__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	column-gap: var(--lts-fc-gap-x) !important;
	row-gap: var(--lts-fc-gap-y) !important;
	width: 100% !important;
	max-width: none;
	margin: 0 !important;
}

/* Cards are a block each; a last odd card spans both columns (3 or 5 cards). */
.lts-feature-cards
	.kd-card-grid.lts-feature-cards__grid
	> .lts-feature-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

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

.lts-feature-cards .lts-feature-card {
	display: block;
	box-sizing: border-box;
	min-height: calc(280 * var(--lts-fc-u));
	margin: 0;
	padding: 0 0 2.25rem; /* 36 */
	border-radius: 0 var(--wp--custom--radius--card)
		var(--wp--custom--radius--card) var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--card);
}

/* The tab: Horizon pill, 318 of 366 wide, 45 tall, label Medium 14/20 uppercase +1px.
   The 45 floor is the drawn tab height (two label lines fit); it keeps every title at the same top. F2b: kept, it IS the Figma box. */
.lts-feature-cards .lts-feature-card .lts-feature-card__tab {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 86.8852%; /* 318 / 366 */
	min-height: 2.8125rem; /* 45 */
	margin: 0;
	padding: 0 0.75rem 0 var(--lts-fc-pad);
	border-radius: 0 3.125rem 3.125rem 0;
	background: var(--wp--preset--color--tint);
	color: var(--wp--custom--color--small-text);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.4286; /* 20 / 14 */
	letter-spacing: 0.0714em; /* 1px at 14px */
	text-transform: uppercase;
	text-wrap: balance;
}

/* Title: Medium 32 on the drawn 28 line (F2b: was 32 for the old DM Sans stand-in), a two-line slot (2em = 64) so
   the bodies start on one line (148). */
.lts-feature-cards .lts-feature-card .lts-feature-card__title {
	--lts-h3-size: var(--lts-fc-title-size);
	min-height: 2em;
	margin: 1.5625rem var(--lts-fc-pad-end) 0 var(--lts-fc-pad); /* 25 */
	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;
	letter-spacing: 0;
}

/* Body: Regular 18/24, Body ink. */
.lts-feature-cards .lts-feature-card .lts-feature-card__body {
	margin: 0.875rem var(--lts-fc-pad-end) 0 var(--lts-fc-pad); /* 14 */
	color: var(--wp--preset--color--body-ink);
	font-weight: 400; /* no regular-weight token */
	line-height: 1.3043; /* 24 / 18.4 */
}

/* -- Below 1200 (derived): intro stacks above as a Deep pill panel ------------ */

@media (max-width: 1199.98px) {
	.lts-feature-cards {
		--lts-fc-gap-x: 1.5rem;
		--lts-fc-gap-y: 1.5rem;
		--lts-fc-pad: 1.5rem;
		--lts-fc-pad-end: 1.5rem;
		--lts-fc-title-size: clamp(1.75rem, 3vw, 2rem); /* 28 to 32 */
	}

	.lts-feature-cards .lts-feature-cards__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.lts-feature-cards .lts-feature-cards__inner::before {
		content: none;
	}

	/* Bleeds to the left edge through the gutter, curved on the right. */
	.lts-feature-cards .lts-feature-cards__intro {
		margin: 0 0 2.5rem calc(-1 * var(--lts-fc-g));
		padding: 2.5rem 3rem 2.5rem var(--lts-fc-g);
		border-radius: 0 6rem 6rem 0;
		background: var(--wp--preset--color--contrast);
	}

	.lts-feature-cards .lts-feature-cards__title {
		max-width: 20rem;
	}

	.lts-feature-cards .lts-feature-cards__lead {
		max-width: 20rem;
	}

	.lts-feature-cards .lts-feature-card {
		min-height: 0;
	}
}

/* -- Mobile (<= 781): one column ---------------------------------------------- */

@media (max-width: 781.98px) {
	.lts-feature-cards .kd-card-grid.lts-feature-cards__grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.lts-feature-cards .lts-feature-cards__intro {
		padding-block: 2rem;
		padding-right: 2rem;
		border-radius: 0 4rem 4rem 0;
	}

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

	.lts-feature-cards .lts-feature-card {
		--lts-fc-pad: 1.5rem;
		--lts-fc-pad-end: 1.5rem;
	}
}