/**
 * Pattern: Member Logo Strip  (patterns/logo-strip.php)
 *
 * Figma source: node 6:21 (Home page). WHITE band — centered eyebrow + H2,
 * a row of real member logos (rendered by `[blg_members mode=logos count=6]`,
 * markup `<ul class="blg-members__logo-row"><li class="blg-members__logo-chip">`),
 * and a "See All Our Members" outline pill.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 *
 * afternoon-r1 (2026-08-21): the logo-row/chip rules moved HERE from
 * member-grid.css. They only ever styled this pattern — living in the members
 * partial was the leftover from when the shortcode's `mode=logos` markup was
 * authored there (flagged as a follow-up CSS-only pass in the pattern PHP
 * header). Ownership now matches the one-pattern-one-partial convention, and
 * the duplicates were deleted from member-grid.css in the same commit (they
 * would otherwise win on glob source order: logo-strip.css < member-grid.css).
 */

/* ── White band (2026-08-21, Alain: "make the background white and remove the
   blue, so update button and heading colours + eyebrow accordingly") ──────
   The band was Cloud/surface with a Georgia Blue eyebrow and a Georgia Blue
   outline pill. On white it now follows the SPLIT section's language, which is
   this theme's established treatment for content on a white ground: Deep
   Petrol eyebrow, Deep Petrol heading, Deep Petrol outline pill. Blue is left
   to the roles that still carry it elsewhere (plain-section eyebrows, the stat
   numbers) rather than being the default here too.

   The eyebrow's type spec now comes from the global `.kd-eyebrow` rule; only
   its trailing margin is this pattern's business. */
.kd-logo-strip .kd-logo-strip__eyebrow {
	margin: 0 0 var(--blg-gap-tight); /* 8px — it kicks the H2 below it now */
}

.kd-logo-strip .kd-logo-strip__heading {
	color: var(--blg-color-contrast);
	margin: 0 0 var(--blg-space-lg); /* 40px heading → logo row */
}

/* Outline pill in Deep Petrol rather than the default Georgia Blue. Scoped to
   the pattern + threaded through the real `.wp-block-button` element so it
   reaches the same weight as the global button rules and wins on source order
   — the same idiom cta-band.css and hero-home.css use for their own button
   overrides (a lower-specificity override here computes Georgia Blue). */
.kd-logo-strip
	.kd-logo-strip__cta
	.wp-block-button.is-style-outline
	.wp-block-button__link {
	color: var(--blg-color-contrast);
	border-color: var(--blg-color-contrast);
	background-color: transparent;
}

.kd-logo-strip
	.kd-logo-strip__cta
	.wp-block-button.is-style-outline
	.wp-block-button__link:hover,
.kd-logo-strip
	.kd-logo-strip__cta
	.wp-block-button.is-style-outline
	.wp-block-button__link:focus-visible {
	color: var(--blg-color-base);
	background-color: var(--blg-color-contrast);
	border-color: var(--blg-color-contrast);
}

/* ── Logo row ─────────────────────────────────────────────────────────────
   Grid, not flex (afternoon-r1, Alain's client feedback "the logos are too
   small"). The old rule was a centered flex row of fixed 150×80 chips: at
   1440 that left ~305px of the 1205px content width unused, and 16px of
   padding inside an 80px box capped every square logo at 46×46 rendered.
   Six equal columns spend the whole row instead — each chip lands ≈181×128,
   so a square logo renders 94×94 (≈2×) and a wide one ≈147 (≈1.3×) without
   touching the shortcode or the source images. minmax(0,1fr) keeps a long
   logo from blowing the track out. ─────────────────────────────────────── */
.kd-logo-strip .blg-members__logo-row {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--blg-space-md); /* 24px */
	list-style: none;
	margin: 0;
	padding: 0;
}

.kd-logo-strip .blg-members__logo-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Fixed height, not min-height: the img caps itself with `max-height:100%`,
	   and a percentage max-height only resolves against a definite parent
	   height. With min-height a tall/square logo blew straight past the chip
	   (Ebony Tree Farms rendered 147×153 inside a 128px box). */
	height: 8rem; /* 128px */
	/* Neutral-100 well, not white: the band is white now, so a white chip with
	   a hairline read as a faint outline rather than a tile. This is the same
	   logo well the members directory uses (.blg-members__logo), so a logo
	   looks identical in both places. */
	background-color: var(--blg-color-neutral-100);
	border: 1px solid var(--blg-color-neutral-300);
	border-radius: var(--blg-radius-md);
	padding: var(--blg-space-sm); /* 16px inner air around the logo */
}

.kd-logo-strip .blg-members__logo-chip img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ── Row → CTA ────────────────────────────────────────────────────────────
   Was `margin-top: 0`, which zeroed the block gap the constrained group would
   otherwise have applied — the pill sat flush against the logo row (Alain's
   client feedback, r1). 40px matches .blg-upcoming-events__cta-wrap, the same
   grid→button case one band down. ─────────────────────────────────────── */
.kd-logo-strip .kd-logo-strip__cta {
	margin-top: var(--blg-space-lg); /* 40px logos → button */
}

/* Tablet (≤1024px) — 3 per row. The row is also capped and centred: at three
   tracks the full content width would stretch each chip to ~298px against a
   128px height, so the logo (height-capped) floats in a wide empty box. The
   cap keeps roughly the desktop chip proportion at every tier. */
@media (max-width: 1024px) {
	.kd-logo-strip .blg-members__logo-row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: 45rem; /* 720px → 3 × ~224px chips */
		margin-inline: auto;
	}
}

/* Mobile (≤768px) — 2 per row, shorter chips so three rows don't dominate
   the band. */
@media (max-width: 768px) {
	.kd-logo-strip .blg-members__logo-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 30rem; /* 480px → 2 × ~228px chips */
	}

	.kd-logo-strip .blg-members__logo-chip {
		height: 7rem; /* 112px */
	}
}

/* Small phone (≤375px) — still 2 per row (the content width already sizes the
   tracks below the cap); chip shortened again so the band stays scannable. */
@media (max-width: 375px) {
	.kd-logo-strip .blg-members__logo-chip {
		height: 6rem; /* 96px */
	}
}