/**
 * Pattern: Logo / client grid  (P4)
 *   patterns/logo-strip.php  — 6×2 strip  (.kd-logo-strip)          — Home
 *   patterns/logo-grid.php   — 3×4 grid   (.kd-logo-strip--grid)    — About / Portfolio
 *
 * SELF-CONTAINED partial (glob-enqueued). Full re-skin of the old NHC
 * "Partner Logo Strip" — all carousel cruft removed (arrows, dot indicators,
 * scroll-snap track, purple pill CTA, Montserrat 50px heading, 8px/50% radii).
 * Gracie is a simple STATIC logo grid: a heading + a grid of square logo tiles.
 *
 * Design source (file g3BMymX7x188yz0AGwEMkL):
 *   • Home strip  heading 2:779 + tiles 2:781–2:792  (6 cols × 2 rows) — PRIMARY
 *   • About grid  tiles 2:1006–2:1017                (3 cols × 4 rows, right column)
 *   • Portfolio   tiles 23:865–23:876                (3 cols × 4 rows, right column)
 *
 * Verified node values (1440 canvas):
 *   Heading  2:779 — "Trusted by 50+ organizations": Public Sans MEDIUM (500),
 *            #900000 (maroon), centred. Figma size 22px is OFF the Gracie 6-value
 *            scale (15/16/17/20/30/36) → mapped to the nearest token 20px
 *            (--kd-size-contact-info), same convention tokens.css uses for the
 *            other off-scale legacy sizes. Renders as <h2>, which already inherits
 *            Public Sans 500 + maroon from theme.json — only the size is overridden.
 *   Tiles    flat #d9d9d9 grey placeholders → nearest token --kd-color-neutral-300
 *            (#D4D4D8, imperceptible delta). SHARP-SQUARE corners (--kd-radius-0),
 *            NO shadow (decision-log square rule).
 *   Ratio    home tiles 181×99 (1.828), grid tiles 154×84 (1.833) — same aspect;
 *            one aspect-ratio (181/99) drives both. Fluid 1fr columns make each
 *            variant reproduce its comp tile size at its own container width
 *            (6-up in 1216 → ~182px; 3-up in a ~505px column → ~154px).
 *   Gaps     Figma placement is imprecise (strip ≈26px col / 30px row; grid ≈21/16)
 *            → normalised to the single token --kd-space-md (24px) for both axes.
 *   Head→grid  ~23px → --kd-space-md (24px).
 *
 * Section vertical rhythm is NOT set here — the outer .kd-section defers to the
 * global owl selector (--kd-section-gap: 100px ≥768 / 64px <768).
 *
 * Every value references a --kd-*/--wp--preset--* token. Prefix: .kd-logo-strip*.
 */

/* ── Outer section ─────────────────────────────────────────────────────────── */

.kd-logo-strip {
	width: 100%;
}

/* ── Section heading (strip variant only) ──────────────────────────────────────
   <h2> already inherits Public Sans Medium 500 + maroon (#900000) from theme.json;
   we only override the size (30 → 20px token) and centre it. */
.kd-logo-strip .kd-logo-strip__heading {
	font-size: var(--kd-size-contact-info); /* 20px — nearest Gracie token to the comp's off-scale 22px */
	line-height: var(--kd-lh-mid); /* 1.3 — single line; margin below sets the rhythm */
	text-align: center;
	margin: 0 0 var(--kd-space-md); /* 24px heading → grid (comp ~23px) */
}

/* ── Logo grid ─────────────────────────────────────────────────────────────────
   6 equal columns (strip). Fluid 1fr tracks shrink with the container so tiles
   never force horizontal scroll. */
.kd-logo-strip .kd-logo-strip__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr); /* 6-up strip (structural; grid variant overrides) */
	gap: var(--kd-space-md); /* 24px both axes */
	align-items: center;
	margin: 0;
}

/* Grid variant — 3 columns × 4 rows (About / Portfolio). */
.kd-logo-strip--grid .kd-logo-strip__grid {
	grid-template-columns: repeat(3, 1fr);
}

/* ── Logo tiles — square grey placeholders ─────────────────────────────────────
   aspect-ratio holds the 181:99 shape as the 1fr column width flexes; SHARP-SQUARE
   corners; no shadow. Real logos replace these post-launch (placeholder-grade). */
.kd-logo-strip .kd-logo-strip__tile {
	aspect-ratio: 181 / 99; /* shared by both variants (154/84 ≈ 181/99) */
	background: var(--kd-color-neutral-300); /* #D4D4D8 ≈ comp #d9d9d9 */
	border-radius: var(--kd-radius-0); /* SQUARE — never rounded/circle */
}

/* ── Tablet/mobile reflow ──────────────────────────────────────────────────────
   No mobile frame exists for the logo strip (derived per CLAUDE.md). Tiles keep
   their square aspect; fewer columns as width drops; 20px edge gutter <768 comes
   from the global --kd-gutter override. No horizontal scroll at any width. */

/* ≤768 — strip drops 6 → 3 columns (grid variant already 3-up). Uses ≤768
   (not the global 767.98 type break) so the tablet/mobile boundary itself reflows
   to fewer columns per the brief: 6-up holds through the 1024 band (~121px tiles),
   3-up from 768 down (~196px tiles) reads far better than 6-up's ~86px. */
@media (max-width: 768px) {
	.kd-logo-strip .kd-logo-strip__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Small phones — strip drops 3 → 2 columns (grid variant stays 3-up: it is already
   compact and column-embedded on its pages). */
@media (max-width: 479.98px) {
	.kd-logo-strip:not(.kd-logo-strip--grid) .kd-logo-strip__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}