/**
 * P8 Side-bar cards (Figma About 140:1821 numbered; Board 145:2540 and Events
 * 210:6337 plain).
 *
 * Skin for the parent's kds/stats-row grid markup (.kd-stats-grid > .kd-stat-item >
 * number / title / desc), opt-in by `.lts-sidebar-cards` so the parent's bare
 * classes are never restyled. Card = Clear, 22px radius (square top-left), card
 * shadow, a coloured bar on the left (Hearth, Dusk, Tide) that carries the
 * optional number (`.has-number`, Clear 36px on a wider bar).
 *
 * 1440 geometry (Figma): card 366 x 233, gap 59, bar 26 (71 with number), text
 * starts 33 (25) after the bar, 21 right pad (8 on the numbered cards, see below), title top 36, body top 82.
 *
 * Per-card colour: set `--lts-sc-colour` on the card (`.lts-sidebar-card`), not on the grid.
 *
 * Specificity: the parent's stats-row.css (basename sorts AFTER this file, so it
 * wins ties) states grid, gap, margin, number and title with `!important`
 * (0,1,0 and 0,2,0 in its mobile query). Every rule that fights it here is
 * `.kd-stats-grid.lts-sidebar-cards ...` (0,2,0 to 0,3,0) AND `!important`, so
 * specificity decides, not order.
 *
 * Responsive (derived, no frames): 3-up from 1200; below that one column, cards
 * capped at 46rem and centred (3-up at 1024 leaves a 130px text column).
 */

.kd-stats-grid.lts-sidebar-cards {
	--lts-sc-bar: 1.625rem; /* 26 */
	--lts-sc-gap-x: 2.0625rem; /* 33 bar -> text */
	--lts-sc-title-top: 2rem; /* centres the title line on Figma's y 50 */
	--lts-sc-title-gap: 0.925rem;
	--lts-sc-title-size: clamp(1.625rem, 2.2222vw, 2rem); /* 32 at 1440 */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	justify-content: stretch;
	gap: clamp(1.5rem, 4.097vw, 3.6875rem) !important; /* 59 at 1440 */
}

.kd-stats-grid.lts-sidebar-cards.has-number {
	--lts-sc-bar: 4.4375rem; /* 71 */
	--lts-sc-gap-x: 1.5625rem; /* 25 */
	--lts-sc-title-top: 1.875rem;
	--lts-sc-title-gap: 0.775rem;
	--lts-sc-title-size: clamp(1.75rem, 2.5vw, 2.25rem); /* 36 at 1440 */
}

.kd-stats-grid.lts-sidebar-cards > .lts-sidebar-card {
	--lts-sc-colour: var(--wp--preset--color--accent);
	position: relative;
	display: block;
	min-height: 14.5625rem; /* 233 */
	margin: 0;
	padding: var(--lts-sc-title-top) 1.3125rem 2rem
		calc(var(--lts-sc-bar) + var(--lts-sc-gap-x));
	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);
	text-align: left;
	overflow: clip;
}

.kd-stats-grid.lts-sidebar-cards.has-number > .lts-sidebar-card {
	/* Figma pad 21 (text box 249). Halyard at the 18.4px body token wraps card 1's last line to a 6th
	   (F2b: text 258 is the smallest that keeps the drawn 5 lines; 8 leaves ~3px headroom for other renderers), so the card
	   stays 233 tall instead of 258. */
	padding-right: 0.5rem;
	padding-bottom: 1.9375rem; /* 31: five 23.9px lines then 31 = the drawn 233 */
}

.kd-stats-grid.lts-sidebar-cards > .lts-sidebar-card:nth-child(2) {
	--lts-sc-colour: var(--wp--preset--color--secondary);
}

.kd-stats-grid.lts-sidebar-cards > .lts-sidebar-card:nth-child(3) {
	--lts-sc-colour: var(--wp--preset--color--primary);
}

/* The bar. */
.kd-stats-grid.lts-sidebar-cards > .lts-sidebar-card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--lts-sc-bar);
	background: var(--lts-sc-colour);
}

.kd-stats-grid.lts-sidebar-cards .kd-stat-item__number {
	position: absolute;
	inset: var(--lts-sc-title-top) auto auto 0;
	width: var(--lts-sc-bar);
	margin: 0 !important;
	/* Clear on Hearth is 3.03:1: passes only as large text (>= 24px). Never size the number below 24px. */
	color: var(--wp--preset--color--base) !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: var(--lts-sc-title-size) !important;
	font-weight: var(--wp--custom--typography--weight-medium) !important;
	line-height: 1.1 !important;
	letter-spacing: 0.03em; /* 1px at 36px */
	text-align: center;
}

.kd-stats-grid.lts-sidebar-cards .kd-stat-item__title {
	--lts-h3-size: var(--lts-sc-title-size);
	margin: 0 0 var(--lts-sc-title-gap) !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: var(--lts-h3-size) !important;
	font-weight: var(--wp--custom--typography--weight-medium) !important;
	line-height: 1.1 !important;
	letter-spacing: 0;
	text-align: left;
	text-wrap: balance;
}

.kd-stats-grid.lts-sidebar-cards .kd-stat-item__desc {
	max-width: none;
	margin: 0 !important;
	color: var(--wp--preset--color--body-ink);
	font-weight: var(
		--wp--custom--typography--weight-regular,
		400
	); /* Figma Halyard Regular; the parent sets 500 */
	line-height: 1.3; /* 24 / 18.4 */
	text-align: left;
}

/* One column below 1200 (derived). */
@media (max-width: 1199.98px) {
	.kd-stats-grid.lts-sidebar-cards {
		--lts-sc-title-size: var(--wp--preset--font-size--xx-large);
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 1.5rem !important;
		max-width: 46rem;
	}

	.kd-stats-grid.lts-sidebar-cards.has-number {
		--lts-sc-title-size: var(--wp--preset--font-size--xx-large);
	}

	.kd-stats-grid.lts-sidebar-cards > .lts-sidebar-card {
		min-height: 0;
	}
}

/* Mobile (derived): narrower bar, tighter padding. */
@media (max-width: 781.98px) {
	.kd-stats-grid.lts-sidebar-cards {
		--lts-sc-bar: 1rem;
		--lts-sc-gap-x: 1.25rem;
		max-width: none;
	}

	.kd-stats-grid.lts-sidebar-cards.has-number {
		--lts-sc-bar: 3.25rem;
		--lts-sc-gap-x: 1.125rem;
	}

	.kd-stats-grid.lts-sidebar-cards > .lts-sidebar-card {
		--lts-sc-title-top: 1.5rem;
		padding-block-end: 1.5rem;
		padding-inline-end: 1.25rem;
	}
}