/**
 * P7 Values row (Figma About "What we believe" 145:2306).
 *
 * Skin for the parent's kds/values-row markup (.kd-values-section > heading +
 * .kd-values-row > .kd-value-item: icon, title, text), opt-in by `.lts-values` on the
 * section so the parent's bare classes are never restyled. The parent is a Cobalt-style
 * 4-up accent band; here it is a transparent (page Clear) band with a centred H2 and
 * FIVE items laid out 3 + 2, both rows centred.
 *
 * Icons: the five Figma vectors (assets/images/values/*.svg), decorative, each at its
 * drawn size (63x63, 67x55, 66x63, 64x64, 73x53) and bottom-aligned in a 64px-tall box
 * (Figma icon bottoms sit 23-24 above the title).
 *
 * 1440 geometry (Figma): H2 48/50 Medium Deep, top 88; icon box 64 at +51; title
 * 32 Medium Deep 23 below the icon; body 18/24 Regular Body 18 below the title;
 * row 1 item pitch ~375 (text 273-275 wide), row 2 pitch 466 (text 293-296 wide,
 * titles up to 341 wide, F2b: back to the drawn 341 box), row gap 45; band bottom padding 101.
 *
 * Specificity: the parent's values-row.css (basename sorts AFTER this file, so it wins
 * ties) states padding, heading, grid, item, icon and title rules with !important at
 * (0,1,0) to (0,2,0). Every rule here that fights it is `.kd-values-section.lts-values ...`
 * (0,2,0 for the section itself, 0,3,0 or more below it) AND !important where the parent
 * is, so specificity decides, not order.
 * The parent's grid becomes a centred wrapping flex row (3 + 2 needs centring of the
 * short last row, which a grid cannot do for 5 items).
 * The row-2 widening is tuned for exactly 5 items and gated by `:has()` on the row;
 * any other count wraps evenly on the 300px basis.
 *
 * Responsive (derived, no frames; designer review): 3 + 2 from 1200 (item widths fluid),
 * 2 columns from 782 to 1199 (2 + 2 + 1, last centred), 1 column at <= 781.
 */

.kd-values-section.lts-values {
	--lts-v-gap-x: clamp(2rem, 5.2083vw, 4.6875rem); /* 75 at 1440 */
	--lts-v-gap-y: 2.8125rem; /* 45 */
	--lts-v-item: 18.75rem; /* 300: row-1 item box */
	--lts-v-item-wide: 21.3125rem; /* 341: row-2 item box (Figma title boxes 341; the widest title, 310, stays on one line) */
	--lts-v-row2-m: 1.5625rem; /* 25: 341 + 75 + 2 x 25 = the Figma 466 pitch */
	--lts-v-title-size: clamp(1.625rem, 2.2222vw, 2rem); /* 32 at 1440 */
	display: block;
	min-height: 0;
	background-color: transparent;
	color: var(--wp--preset--color--body-ink);
	padding-block: clamp(3rem, 6.1111vw, 5.5rem)
		clamp(3.5rem, 7.0139vw, 6.3125rem) !important; /* 88 / 101 */
}

/* Heading: H2 48/50 Medium Deep, 51 to the icons. */
.kd-values-section.lts-values .kd-values-section__heading {
	margin: 0 auto clamp(2rem, 3.5417vw, 3.1875rem) !important; /* auto inline: re-centres the max-width box the constrained layout would have centred */
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: var(--wp--preset--font-size--section-title) !important;
	font-weight: var(--wp--custom--typography--weight-medium) !important;
	line-height: 1.0417 !important;
	text-align: center !important;
}

/* The row: centred wrapping flex (3 + 2). */
.kd-values-section.lts-values .kd-values-row {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lts-v-gap-y) var(--lts-v-gap-x) !important;
	margin: 0 auto !important;
	width: 100% !important;
}

/* Above 1440 the page column widens and would fit four items (4 + 1): cap the row at three
   (+2px rounding slack). Only up here: at 1440 and below four never fit, and the cap's
   sub-pixel centring would move the items. */
@media (min-width: 1440.02px) {
	.kd-values-section.lts-values .kd-values-row {
		max-width: calc(3 * var(--lts-v-item) + 2 * var(--lts-v-gap-x) + 2px);
	}
}

.kd-values-section.lts-values .kd-values-row > .kd-value-item {
	flex: 0 1 min(var(--lts-v-item), calc((100% - 2 * var(--lts-v-gap-x)) / 3));
	margin-block: 0 !important;
	align-items: center !important;
	text-align: center;
}

/* Row 2 (items 4 + 5, only when there are exactly 5): wider boxes, pushed apart to the
   Figma 466 pitch; the basis leaves room for the two 25 margins. */
.kd-values-section.lts-values
	.kd-values-row:has(> .kd-value-item:nth-child(5):last-child)
	> .kd-value-item:nth-child(n + 4) {
	flex-basis: min(
		var(--lts-v-item-wide),
		calc((100% - var(--lts-v-gap-x) - 2 * var(--lts-v-row2-m)) / 2)
	);
}

.kd-values-section.lts-values
	.kd-values-row:has(> .kd-value-item:nth-child(5):last-child)
	> .kd-value-item:nth-child(4) {
	margin-inline-end: var(
		--lts-v-row2-m
	) !important; /* 341 + 75 + 50 = 466 pitch */
}

.kd-values-section.lts-values
	.kd-values-row:has(> .kd-value-item:nth-child(5):last-child)
	> .kd-value-item:nth-child(5) {
	margin-inline-start: var(--lts-v-row2-m) !important;
}

/* Icon: 64-tall box, bottom-aligned, flat, decorative. */
.kd-values-section.lts-values .kd-value-item .kd-value-icon {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 4rem;
	margin: 0 0 1.2rem !important; /* 23 icon -> title box (title line box is taller than Figma's 28) */
}

.kd-values-section.lts-values .kd-value-item .kd-value-icon img {
	flex: none;
	filter: none;
}

/* Title: 32 Medium Deep, no uppercase. An h3: sized by the hook var (the global h3 shrink is !important). */
.kd-values-section.lts-values .kd-value-item__title {
	--lts-h3-size: var(--lts-v-title-size);
	margin: 0 0 0.9rem !important; /* 18 title box -> body */
	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 !important;
	text-transform: none;
	text-align: center;
}

/* Body: 18/24 Regular Body (the parent's 16/26 is replaced). Same values as the hub card answer. */
.kd-values-section.lts-values .kd-value-item__text {
	max-width: 17.625rem; /* 282 (Figma 273-275; 279 is the minimum that keeps the drawn break after "is how" in item 2 at 18.4px) */
	color: var(--wp--preset--color--body-ink);
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--typography--weight-regular, 400);
	line-height: 1.3043; /* 24 / 18.4 */
	text-align: center;
}

.kd-values-section.lts-values
	.kd-values-row:has(> .kd-value-item:nth-child(5):last-child)
	> .kd-value-item:nth-child(n + 4)
	.kd-value-item__text {
	max-width: 19.4375rem; /* 311 (Figma 293-296; 307 is the minimum that keeps the drawn breaks after "let other" / "the room," at 18.4px) */
}

/* Tablet: 2 columns, the last item centred. */
@media (max-width: 1199.98px) {
	.kd-values-section.lts-values {
		--lts-v-gap-x: 2.5rem;
		--lts-v-gap-y: 3rem;
	}

	.kd-values-section.lts-values .kd-values-row > .kd-value-item,
	.kd-values-section.lts-values
		.kd-values-row:has(> .kd-value-item:nth-child(5):last-child)
		> .kd-value-item:nth-child(n + 4) {
		flex-basis: calc((100% - var(--lts-v-gap-x)) / 2);
		margin-inline: 0 !important;
	}

	.kd-values-section.lts-values .kd-value-item__text,
	.kd-values-section.lts-values
		.kd-values-row:has(> .kd-value-item:nth-child(5):last-child)
		> .kd-value-item:nth-child(n + 4)
		.kd-value-item__text {
		max-width: 20rem;
	}
}

/* Mobile: one column. */
@media (max-width: 781.98px) {
	.kd-values-section.lts-values {
		--lts-v-gap-y: 2.5rem;
	}

	.kd-values-section.lts-values .kd-values-row > .kd-value-item,
	.kd-values-section.lts-values
		.kd-values-row:has(> .kd-value-item:nth-child(5):last-child)
		> .kd-value-item:nth-child(n + 4) {
		flex-basis: 100%;
	}
}