/**
 * Pattern: Values Row  (patterns/values-row.php)
 *
 * Figma 226:2311 — "Our Values" section on the About Us page.
 * A full-width accent band with a centered heading + 4-up row of
 * scalloped-blob icon + uppercase title + body text. All white on the accent.
 *
 * Background: --kd-color-accent-4 (Figma 276:5372).
 * Blobs:      --kd-color-primary (Figma 226:2597).
 * Icons:      white inline SVG placeholders — SWAP when licensed icon set
 *             ships (Q10 icon-licence blocker). Each icon lives directly in
 *             the .kd-value-blob__icon <svg>; no external sprite or font.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 * No --kds-* tokens; --kd-* only.
 */

/* ── Section band ──────────────────────────────────────────────────────────── */

.kd-values-section {
	background-color: var(--kd-color-accent-4);
	color: var(--kd-color-base);
	text-align: center;
	/* Figma 276:5372: 602px band. min-height ensures the section keeps presence
	   even before real icons are loaded (icon set pending Q10 licence). */
	min-height: 560px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: clamp(3.75rem, 6.5vw, 5.25rem) !important; /* 60 → 84px */
}

/* ── Section heading ───────────────────────────────────────────────────────── */

.kd-values-section__heading {
	font-family: var(--kd-font-heading) !important;
	font-weight: var(--kd-fw-heading) !important;
	/* Figma: 50px desktop — clamp down to keep legible at tablet/mobile. */
	font-size: clamp(2rem, 3.5vw, 3.125rem) !important; /* 32 → 50px */
	line-height: 1.15 !important;
	color: var(--kd-color-base) !important;
	text-align: center !important;
	margin: 0 0 clamp(2.5rem, 4.5vw, 3.5rem); /* 40 → 56px heading→grid (Figma ~57px) */
}

/* ── 4-column item grid ────────────────────────────────────────────────────────
   WP group type:default = is-layout-flow. We render it as a CSS grid.
   `justify-content:center` keeps the 4-up capped and centered (same fix as
   .kd-tall-card-grid). margin-block:0 on children kills WP block-gap offset. */

.kd-values-row {
	display: grid !important;
	grid-template-columns: repeat(
		4,
		minmax(0, 18rem)
	); /* cap each col ≈280px */
	justify-content: center;
	gap: var(--kd-space-lg) var(--kd-space-md) !important; /* 40px row / 24px col */
	margin: 0 auto !important;
	width: 100% !important;
}

.kd-values-row > * {
	margin-block: 0 !important;
}

/* ── Single value item — vertical stack ────────────────────────────────────── */

.kd-value-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0 !important;
}

/* ── Value icon (theme-asset SVG: brand-colour blob + white glyph) ───────────────────
   assets/images/value-*.svg — a self-contained 180×179 image referenced as a
   block image. Sized to 160px; the drop-shadow on the <img> follows the blob edge. */

.kd-value-item .kd-value-icon {
	width: 160px;
	max-width: 100%;
	flex-shrink: 0;
	margin: 0 0 var(--kd-space-md) 0 !important; /* 24px icon → title (Figma ~23px) */
}

.kd-value-item .kd-value-icon img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15)); /* Figma blob shadow */
}

/* ── Item title — uppercase Montserrat Black ───────────────────────────────── */

.kd-value-item__title {
	font-family: var(--kd-font-heading) !important;
	font-weight: var(--kd-fw-heading) !important;
	font-size: 1.625rem !important; /* 26px — Figma */
	line-height: 1.31 !important; /* 34/26 */
	color: var(--kd-color-base) !important;
	text-transform: uppercase;
	letter-spacing: 0.063rem; /* 1px */
	text-align: center;
	margin: 0 0 var(--kd-gap-tight) !important; /* 8px title → body (Figma ~5px) */
}

/* ── Item body text ────────────────────────────────────────────────────────── */

.kd-value-item__text {
	font-family: var(--kd-font-body);
	font-weight: 400;
	font-size: var(--kd-size-body); /* 16px */
	line-height: 1.625; /* 26/16 — Figma */
	color: var(--kd-color-base);
	text-align: center;
	margin: 0 !important;
}

/* ── Tablet ≤1024px — 2 columns ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.kd-values-row {
		grid-template-columns: repeat(2, minmax(0, 18rem)) !important;
		gap: var(--kd-space-xl) var(--kd-space-lg) !important; /* 64px row / 40px col */
	}

	.kd-values-section__heading {
		font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
	}
}

/* ── Mobile ≤600px — 1 column ───────────────────────────────────────────────── */

@media (max-width: 600px) {
	.kd-values-row {
		grid-template-columns: minmax(0, 20rem) !important;
		gap: var(--kd-space-xl) 0 !important; /* 64px between stacked items */
	}

	.kd-values-section__heading {
		font-size: clamp(1.5rem, 6vw, 2rem) !important;
	}

	.kd-value-blob {
		width: 140px;
		height: 140px;
	}
}

/* ── Reusable icon blob ───────────────────────────────────────────────────────
   The scalloped blob on its own (assets/images/icon-blob.svg, colour-free), drawn
   as a CSS ALPHA MASK on a ::before so `background-color` supplies the brand
   colour — re-skinning is a theme.json change, not an SVG edit. The mask sits on
   the pseudo-element, not the root, so the icon in the centre is never masked.

   Why: the four value-*.svg files bake blob and glyph into one file, so the icon
   can only change by editing the SVG. Here the blob is decoration in CSS and the
   centre holds a real image block, so swapping the icon is Replace → Media
   Library, no code and no deploy.

   SVG upload is off by default in WordPress, so a replacement icon should be PNG
   or WebP. Ship defaults as theme assets.

   The existing values row is deliberately NOT migrated to this — use it for new
   icon slots. */
.kd-icon-blob {
	inline-size: 10rem; /* 160px — matches .kd-value-icon */
	aspect-ratio: 180 / 179; /* the blob's own canvas */
	display: grid;
	place-items: center;
	margin-inline: auto;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
}

.kd-icon-blob::before {
	content: "";
	grid-area: 1 / 1;
	inline-size: 100%;
	block-size: 100%;
	background-color: var(--kd-color-primary);
	-webkit-mask: url("../../images/icon-blob.svg") center / contain no-repeat;
	mask: url("../../images/icon-blob.svg") center / contain no-repeat;
}

/* The icon sits inside the blob's flat middle, not its scalloped edge — 46% of
   the box keeps a replacement clear of the points. */
.kd-icon-blob .kd-icon-blob__icon {
	grid-area: 1 / 1;
	position: relative;
	inline-size: 46%;
	margin: 0 !important;
}

.kd-icon-blob .kd-icon-blob__icon img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

@media (max-width: 782px) {
	.kd-icon-blob {
		inline-size: 8.75rem; /* 140px — matches the values-row breakpoint */
	}
}