/**
 * Pattern: Member Grid — toolbar + member card grid  (`[blg_members]`)
 *
 * NOT a patterns/*.php file — this styles the ALREADY-LIVE, server-rendered
 * BEM markup emitted by `inc/members.php`'s `blg_members_shortcode()` (grid
 * mode, node 6:173 + toolbar node 6:172). The shortcode's `mode=logos` row
 * (`.blg-members__logo-row` / `__logo-chip`) is styled by its only consumer,
 * assets/css/patterns/logo-strip.css — not here (moved in afternoon-r1).
 * READ-ONLY on inc/members.php: no markup/class changes made here, styling
 * only.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 *
 * Small-phone tier is cut at 375px (Figma's smallest frame) rather than the
 * theme's legacy 480px breakpoint — deliberate, not a gap.
 *
 * Mobile collapsible filters land later (markup change on the inc/ side,
 * after this pattern's own merge): the toolbar's category chips will move
 * inside a `<details class="blg-members__filters"><summary
 * class="blg-members__filters-summary">…` on small screens. Style hooks are
 * named already — `.blg-members__filters` / `.blg-members__filters-summary`
 * — for whoever picks that up; no styles written for them yet, nothing to
 * build against until the markup lands.
 */

/* Local, pattern-scoped shadow tokens (not in tokens.css — a card-specific
   tight/crisp lift, deliberately smaller than the shared --blg-shadow-* scale
   which reads as a bigger diffuse glow). color-mix against --blg-color-
   contrast (Deep Petrol) instead of a hardcoded rgba, per the no-hardcoded-
   color rule. Resting = a hairline-soft two-layer shadow; hover (linked
   cards only) nudges both layers up slightly, still crisp not diffuse. */
:root {
	--blg-members-card-shadow:
		0 1px 3px color-mix(in srgb, var(--blg-color-contrast) 14%, transparent),
		0 1px 2px color-mix(in srgb, var(--blg-color-contrast) 8%, transparent);
	--blg-members-card-shadow-hover:
		0 2px 6px color-mix(in srgb, var(--blg-color-contrast) 16%, transparent),
		0 1px 3px color-mix(in srgb, var(--blg-color-contrast) 10%, transparent);
}

/* ── Root — vertical rhythm for the two sub-sections (toolbar, grid) ────────
   No hero/CTA compose on /members/ yet (Phase 5 assembles the full page), so
   this owns its own top/bottom breathing room. Top-of-page clearance above
   this is handled globally by the no-hero page padding token — untouched. */
.blg-members {
	padding-block: var(--blg-space-xl) var(--blg-space-xxl); /* 64 / 96 */
}

/* ── Toolbar (Figma 6:172) — search pill + category chip row ────────────── */
/* Mobile collapsible filters land later (inc/ markup change, after this
   pattern's merge) — chips move inside a <details>/<summary> pair on small
   screens. Style hooks reserved: .blg-members__filters (the <details>),
   .blg-members__filters-summary (the <summary>). Not styled yet — no markup
   to build against. */

.blg-members__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--blg-space-sm); /* 16px */
	margin: 0 0 var(--blg-space-lg); /* 40px — toolbar → grid */
}

/* Search pill. The sitewide input[type=search] rule (forms.css) paints a 2px
   Georgia Blue pill border for form contexts — this toolbar is a plain GET
   filter, not a form-plugin field, and the Figma spec calls for a quieter
   white/neutral-300 hairline. forms.css's matching selector is
   `input[type="search"]:not(.wp-block-search__input):not(.kd-news-search__input):not(.kd-event-search__input)`
   — specificity (0,0,4,1) and loaded AFTER pattern partials (enqueue.php
   order), so an equal-specificity rule here would still lose to source
   order. The extra `[name="member_q"]` attribute (a real attribute on this
   input, not a hack) pushes this selector to (0,0,5,0), which wins outright.
   No !important — computed styles confirmed the 2px blue border's source
   before writing this override. */
.blg-members
	.blg-members__toolbar
	.blg-members__search[type="search"][name="member_q"] {
	flex: 1 1 220px;
	max-width: 22rem; /* ~352px — Figma-measured pill width at 1440 */
	width: auto;
	border: 1px solid var(--blg-color-neutral-300);
	background-color: var(--blg-color-base);
	color: var(--blg-color-body);
	font-size: var(--blg-size-eyebrow); /* 14px, matches chip label size */
	padding: 0.75rem 1.25rem;
}

/* Placeholder color already matches (global forms.css also sets
   neutral-500) — no override needed there. */

.blg-members
	.blg-members__toolbar
	input.blg-members__search[type="search"]:focus {
	border-color: var(--blg-color-primary);
	box-shadow: 0 0 0 3px
		color-mix(in srgb, var(--blg-color-primary) 20%, transparent);
}

.blg-members__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--blg-space-xs); /* 8px */
}

/* global.css's `.entry-content a:not(.wp-element-button):not([class*="kd-btn"])`
   rule (specificity 0,0,3,1) sets link color for all body-content anchors and
   would beat a bare `.blg-members__chip` (0,0,1,0) — coincidentally matching
   the inactive tint-chip's intended petrol color (that rule's --blg-color-link
   token happens to alias --blg-color-contrast) but NOT the active chip's
   intended white. Scoped to the real ancestor chain (0,0,3,1, tied — and
   loaded after global.css in enqueue.php, so it wins on source order) rather
   than left to that coincidence. */
.blg-members .blg-members__chips a.blg-members__chip {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-eyebrow); /* 14px */
	font-weight: 500;
	line-height: 1.2;
	padding: 0.65rem 1.25rem;
	border-radius: var(--blg-radius-pill);
	background-color: var(--wp--preset--color--tint); /* Sky Tint #D3EEFB */
	color: var(--blg-color-contrast); /* Deep Petrol — AA on tint */
	text-decoration: none;
	transition: background-color var(--blg-transition-fast);
}

.blg-members .blg-members__chips a.blg-members__chip:hover {
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--tint) 60%,
		var(--blg-color-primary) 15%
	);
}

.blg-members .blg-members__chips a.blg-members__chip.is-active,
.blg-members .blg-members__chips a.blg-members__chip.is-active:hover {
	background-color: var(--blg-color-primary); /* Georgia Blue */
	color: var(
		--blg-color-base
	); /* white — beats the entry-content link-color rule (0,0,4,1) */
}

/* Active chip sits on the same blue as the sitewide focus-ring color — swap
   to white so keyboard focus stays visible (mirrors global.css's own
   dark-band exception for .kd-mainbar/.kd-topbar/.kd-site-footer). */
.blg-members__chip.is-active:focus-visible {
	outline-color: var(--blg-color-base);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.blg-members__empty {
	color: var(--blg-color-neutral-500);
	font-size: var(--blg-size-body);
	padding: var(--blg-space-lg) 0;
}

/* ── Grid (Figma 6:173) — 4 cols @1440 ───────────────────────────────────── */

.blg-members__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--blg-space-md); /* 24px */
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ── Column modifiers (--cols-N, shortcode `columns` att) ────────────────────
   The shortcode always emits a --cols-N class alongside the base one
   (`columns` att defaults to 4). Default / --cols-4 gets no dedicated rule
   here, so it's untouched: the ladder above stays exactly 4 @1440 → 3 @1024
   → 1 @768 → 1 @375 (one card per row from mobile down, per client direction
   r1 — no in-between 2-up step). --cols-2 / --cols-3 cap the desktop column
   count and are capped again at each narrower tier below so they never show
   MORE columns than the default ladder would at that width (e.g. --cols-3
   still narrows to 1 col at 768px, matching the default tier, instead of
   staying pinned at 3). The compound selector (specificity 0,0,2,0) beats
   the bare `.blg-members__grid` rule (0,0,1,0) outright at every tier;
   among the modifier rules themselves (equal specificity), the same
   last-rule-wins cascade the un-modified ladder already relies on picks the
   narrowest matching breakpoint. */
.blg-members__grid.blg-members__grid--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blg-members__grid.blg-members__grid--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Border → shadow per client direction (r1, final card spec): the neutral-300
   hairline is dropped in favour of a tight/crisp local shadow (see the
   --blg-members-card-shadow* pair up top — client asked for tighter than the
   shared --blg-shadow-* scale reads). box-sizing:border-box (global.css) +
   these cards already stretching to fill their grid track means dropping a
   1px border doesn't reflow the grid: the outer box stays pinned to the
   track, only the inner content edge moves 1px — confirmed via
   getBoundingClientRect before/after, no compensating width tweak needed.
   Hover lift only for cards that actually link out (:has() is an existing
   theme convention — see hero-home.css/global.css) — unlinked cards keep the
   resting shadow so hover doesn't imply a click affordance that isn't there. */
.blg-members__card {
	display: flex;
	flex-direction: column;
	background-color: var(--blg-color-base);
	border-radius: var(--blg-radius-card); /* 16px */
	padding: var(--blg-space-md); /* 24px */
	box-shadow: var(--blg-members-card-shadow);
	transition: box-shadow var(--blg-transition-fast);
}

.blg-members__card:has(.blg-members__link):hover {
	box-shadow: var(--blg-members-card-shadow-hover);
}

/* Logo well — Neutral 100, consistent height band, logo contained w/ padding
   so any source aspect ratio sits centered without distortion or cropping.
   (A white-fill + neutral-300 hairline variant was tried per client feedback
   during r1 addendum review, then reverted — client compared live and
   preferred the grey well; back to the original build exactly. Checked
   whether the hairline was still worth keeping ON the grey well as the
   Global Galactics white-logo safeguard: live-compared and it isn't — the
   Neutral 100 fill already reads as a contained box against the white card,
   and Global Galactics' near-white wordmark is faintly but legibly visible
   against it (same as Impact Pathways' light logo two rows down); adding
   the hairline back here just doubled the well's edge for no gain, so left
   off.) */
.blg-members__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 140px, up from 100px (Alain: "can we make the logo bigger or take more
	   space naturally in the container"). MEASURED cause: the well is ~235px
	   wide, so at 100px tall with 16px padding the usable box was 203x68 — a
	   3:1 slot. Any logo squarer than that was height-capped, and a square
	   logo rendered 68x68, filling 33% of the box (39-logo average: 44%).
	   At 140px tall with 14px padding the box is 207x112: a square logo now
	   renders 112 (+65%) and fills ~60%. Wide logos were already width-bound
	   and are unaffected, so nothing gets cropped or upscaled — the cap is
	   still max-width/max-height with object-fit:contain. */
	height: 8.75rem; /* 140px */
	margin: 0 0 var(--blg-space-md);
	background-color: var(--blg-color-neutral-100);
	border-radius: var(--blg-radius-md);
	padding: 0.875rem; /* 14px inner air around the logo */
	overflow: hidden;
}

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

.blg-members__logo-fallback {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body);
	font-weight: 600;
	/* AA fix (review kickback r1): neutral-500 on neutral-100 measured ≈4.08:1,
	   below the 4.5:1 text threshold. neutral-700 clears it. */
	color: var(--blg-color-neutral-700);
	text-align: center;
}

.blg-members__name {
	font-family: var(--blg-font-heading);
	font-weight: 700; /* Raleway Bold — Figma "H3" treatment */
	font-size: var(
		--blg-size-body-lg
	); /* 18px, per spec (not the 24px H3 token) */
	line-height: 1.3;
	color: var(--blg-color-contrast);
	margin: 0 0 var(--blg-gap-tight);
}

.blg-members__tag {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-eyebrow); /* 14px — Body/Small */
	color: var(--blg-color-primary); /* Georgia Blue */
	margin: 0 0 var(--blg-gap-normal);
}

/* Same global.css entry-content link-color rule (0,0,3,1) noted above on the
   chips also matches this anchor — scope to the real card ancestor so the
   neutral-500 "Visit site" color (not the link-color token) actually wins. */
/* margin-top:auto pushes this to the bottom of the flex column (original
   build). A bottom-right (align-self:flex-end) variant was tried per client
   feedback during r1 addendum review, then reverted — client compared live
   and preferred bottom-left, i.e. the default flex-start; back to the
   original build exactly. .blg-members__card is a CSS Grid item with the
   default align-items:stretch, so every card in a grid row is already
   stretched to that row's tallest card — a card with no
   `.blg-members__link` (16 members have no URL) simply has no element to
   push down, but its own height still matches its row-mates regardless of
   this rule. */
.blg-members .blg-members__card a.blg-members__link {
	margin-top: auto;
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-eyebrow); /* 14px — Body/Small */
	/* AA fix (review kickback r1): neutral-500 on white @14px measured ≈4.42:1,
	   below the 4.5:1 text threshold. neutral-700 clears it. */
	color: var(--blg-color-neutral-700);
	text-decoration: none;
}

.blg-members .blg-members__card a.blg-members__link:hover,
.blg-members .blg-members__card a.blg-members__link:focus-visible {
	color: var(--blg-color-primary);
	text-decoration: underline;
}

/* ── Logo strip mode (`[blg_members mode=logos]`) ──────────────────────────
   Markup only. The `.blg-members__logo-row` / `__logo-chip` styles moved to
   assets/css/patterns/logo-strip.css in afternoon-r1 — that pattern is their
   only consumer, and one-pattern-one-partial is the convention. Do not
   re-add them here: member-grid.css enqueues after logo-strip.css (glob is
   alphabetical), so a copy in this file silently wins. ─────────────────── */

/* ── Tablet (≤1024px) — 3 cols ────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.blg-members__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ── Mobile (≤768px) — 1 col per client direction (r1), toolbar chips wrap
   under a full-width search ──────────────────────────────────────────────── */
@media (max-width: 768px) {
	.blg-members__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* --cols-2/--cols-3 (desktop values 2/3) both narrow to match this tier's
	   1-col default — one card per row on mobile, no in-between 2-up step. */
	.blg-members__grid.blg-members__grid--cols-2,
	.blg-members__grid.blg-members__grid--cols-3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.blg-members
		.blg-members__toolbar
		.blg-members__search[type="search"][name="member_q"] {
		flex-basis: 100%;
		max-width: none;
	}
}

/* ── Small phone (≤375px) — still 1 col (same as the 768px tier; kept as its
   own block so the small-phone cut stays documented as its own tier even
   though the grid value didn't change) ──────────────────────────────────── */
@media (max-width: 375px) {
	.blg-members__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.blg-members__grid.blg-members__grid--cols-2,
	.blg-members__grid.blg-members__grid--cols-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Collapsible category filters (shared pass 3) ─────────────────────────────
   Markup: inc/members.php wraps the chips in <details class="blg-members__filters" open>
   with a <summary>. Desktop: summary hidden, chips always visible (details is
   server-rendered open). Mobile ≤768px: summary renders as a tint pill toggle.
   Recovery guard: if a user collapses on mobile then widens the viewport, the
   summary re-appears at desktop width for any non-open state. */
.blg-members__filters {
	width: 100%;
}

.blg-members__filters-summary {
	display: none;
	list-style: none;
}

.blg-members__filters-summary::-webkit-details-marker {
	display: none;
}

@media (min-width: 769px) {
	.blg-members__filters:not([open]) .blg-members__filters-summary {
		display: inline-flex;
	}
}

@media (max-width: 768px) {
	.blg-members__filters-summary {
		display: inline-flex;
		align-items: center;
		gap: var(--blg-space-xs, 0.5rem);
		cursor: pointer;
		padding: 0.625rem 1.25rem;
		border-radius: var(--blg-radius-pill);
		background: var(--blg-color-tint);
		color: var(--blg-color-contrast);
		font-family: var(--blg-font-body);
		font-size: var(--blg-size-eyebrow, 0.875rem);
		font-weight: 600;
	}

	.blg-members__filters-summary::after {
		content: "▾";
	}

	.blg-members__filters[open] .blg-members__filters-summary::after {
		content: "▴";
	}

	.blg-members__filters[open] .blg-members__chips {
		margin-top: var(--blg-space-sm, 1rem);
	}
}