/**
 * Pattern: Events Archive  (templates/archive-kd_event.html +
 * patterns/event-archive.php + inc/event-archive.php renderers)
 *
 * Figma source (BLGA re-skin, 2026-08-21): nodes 6:285 (toolbar) · 6:286
 * (upcoming grid) · 6:287 (past — NOT built, see flag below). Original build
 * below was against the pre-BLGA wireframe (node 5:1968, file
 * LdwJIRwwEJXAInb2m9V8Dw); this pass re-skins the SAME markup to the BLGA
 * tokens/design in place (card shadow/color/CTA, toggle grouping, search label)
 * — no inc/event-archive.php markup changes, CSS + one small pattern-level
 * (patterns/event-archive.php) heading injection only. See that file's docblock
 * for the injection note.
 *
 * ⚠️ FLAGGED — items 1 and 2 below were RESOLVED in the 2026-08-21
 * events-archive-extras pass (explicitly authorized inc/event-archive.php
 * edit — see that file's docblock + build-tracker.md). 3 and 4 remain
 * unbuilt; 5 is new:
 *   1. ~~No "Past Events" section~~ RESOLVED — blg_event_archive_past_events_html()
 *      (inc/event-archive.php) + §10 PAST EVENTS below.
 *   2. ~~No type-filter chips~~ RESOLVED — blg_event_archive_type_chips_html()
 *      (inc/event-archive.php, via the kd-events plugin's existing
 *      EventQuery::with_type() — no plugin fork) + §9 TYPE FILTER CHIPS below.
 *   3. Card CTA copy is always "Learn more" (inc/event-archive.php's
 *      blg_event_archive_card_html()) — Figma shows "Get Tickets ↗" /
 *      "Details →" varying per event. Styled as a pill either way (see §4
 *      below); copy is a content/inc-logic gap, not a CSS one.
 *   4. View-toggle DOM order is grid/calendar/list (inc-fixed); Figma shows
 *      list/grid/calendar. Cosmetic only — not worth a visual-only `order`
 *      hack that would desync visual order from focus order.
 *   5. Type-filter chips scope the upcoming/default grid + Load More's INITIAL
 *      SSR batch only. Two known gaps, both server-side-filtering-adjacent,
 *      neither fixed here: (a) the AJAX Load More endpoint (inc/card-load-
 *      more.php, shared/unmodified) has no concept of the active type filter,
 *      so pressing Load More after selecting a chip re-includes ALL types in
 *      the next batch; (b) switching to search (?event_s=) resets/ignores the
 *      type filter (chips are omitted from that toolbar entirely, not merely
 *      inert). Past Events is intentionally NEVER filtered by the chips (see
 *      inc/event-archive.php's blg_event_archive_body_html() call site) — the
 *      Figma 6:287 section has no chip row of its own.
 *
 * Figma source: node 5:1968 — "Events" wireframe (Wireframes page,
 * file LdwJIRwwEJXAInb2m9V8Dw). Wireframe-tier frame (not pixel-complete) — the
 * canvas's grey hero band + monochrome-purple card text are placeholder styling;
 * this build applies the real design system instead (see inc/event-archive.php's
 * file-level docblock for the full reasoning).
 *
 * morning-r1 (2026-08-21): two further passes on top of the above —
 *   (a) card restyle to the NHC compact card (LdwJIRwwEJXAInb2m9V8Dw node
 *       5:1636): no more "Learn more" pill, whole card is the link via the
 *       title-anchor stretched-link idiom (see §4 CARD below + this pass
 *       also extends the SAME card-box anatomy to §10 PAST EVENTS, muted).
 *   (b) "Submit an Event" button REMOVED from the toolbar per Alain (not
 *       needed for now) — see §2 TOOLBAR below; the button's CSS is KEPT,
 *       not deleted, documented as currently-unused for a quick re-enable.
 *
 * Sections:
 *   1. HERO           — archive H1 + intro (mirrors .kd-archive--story/--team).
 *   2. TOOLBAR        — search pill + view-toggle buttons + type chips (no
 *                       longer "Submit an Event" — see morning-r1 note above).
 *   3. RESULTS HEADER — search results-only view header.
 *   4. CARD           — .kd-event-card (compact anatomy: image inset, eyebrow,
 *                       title, excerpt, NO button — whole card is the link).
 *                       Grid layout itself reuses the shared .kd-card-grid
 *                       wrapper class from card-grid.css (columns/gap/
 *                       responsive ladder) — only the card's own visual
 *                       treatment lives here.
 *   5. RESPONSIVE     — 1024 / 768 / 375.
 *   6. GRID ALIGNMENT — events-polish fix: cards fill the band edge-to-edge
 *                       (scoped override of card-grid.css's column tracks —
 *                       .kd-card-grid itself is untouched).
 *   7. LIST VIEW      — .is-view-list row layout (image left / content right).
 *   8. CALENDAR EMBED — [kd_calendar] panel chrome (hides the plugin's own
 *                       redundant switcher; sizing to fit the archive band).
 *   9. TYPE CHIPS      — .kd-event-type-chips (Figma 6:285: tint pills, active
 *                       = Deep Petrol — see that section's pixel-sample note).
 *  10. PAST EVENTS     — .blg-past-events (Figma 6:287: muted small cards,
 *                       neutral-300 image well, neutral-500 meta, petrol title).
 *
 * Token rules: only --blg-* custom properties, no hardcoded hex or sizes.
 * Auto-enqueued by inc/enqueue.php (glob patterns/*.css) — no edits to any
 * shared PATTERN stylesheet. Two narrow, precedented shared-file touches
 * elsewhere for this events-polish pass (flagged in the handoff, not in this
 * file): forms.css gained a `:not(.kd-event-search__input)` exclusion
 * (mirrors the pre-existing `:not(.kd-news-search__input)` one — see §2 below)
 * and inc/enqueue.php gained one new archive-scoped script enqueue.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO — archive title + intro
   ══════════════════════════════════════════════════════════════════════════ */

/* query-title isn't .wp-block-post-title, so the global hero-interior title rule
   doesn't reach it — restate the H1 treatment for the archive title. Mirrors
   .kd-archive--story / .kd-archive--team .kd-hero-interior .wp-block-query-title
   exactly (same system-wide interior-hero H1 size, independent of this one
   Figma frame's 56px label — the shipped archives already established the
   banner-size H1 as the interior-hero convention). */
.kd-archive--event .kd-hero-interior .wp-block-query-title {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-banner);
	line-height: var(--blg-lh-tight);
	color: var(--blg-color-base); /* white */
	margin: 0;
}

/* Intro line — white 18px below the H1 (injected by
   blg_event_archive_intro_subtitle). Mirrors .kd-story-archive__intro /
   .kd-team-archive__intro. Empty by default (Customizer-editable). */
.kd-event-archive__intro {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body-lg); /* 18px */
	font-weight: 400;
	line-height: 1.65;
	color: var(--blg-color-base);
	max-width: var(--blg-measure-intro); /* intro measure — ~574px */
	margin: var(--blg-space-sm) 0 0; /* 16px gap from H1 */
}

@media (max-width: 767.98px) {
	.kd-event-archive__intro {
		font-size: var(--blg-size-body);
		max-width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. TOOLBAR — search + view-toggle chrome + type-filter chips
   Figma 5:1968/6:285: "Search" label (visually hidden — see below) above a
   pill input beside the view-toggle group and type chips.
   morning-r1 (2026-08-21): the "Submit an Event" button that used to sit
   right-aligned via a `.kd-event-toolbar__left`/`.kd-event-toolbar__right`
   split is REMOVED (Alain: not needed for now — see inc/event-archive.php's
   blg_event_archive_toolbar_html() docblock). `.kd-event-toolbar` now wraps
   a single visible row (the old `__left` column wrapper is gone — its only
   children were the visually-hidden label + the row, which don't need a
   flex-column parent); `.kd-event-toolbar__right` is KEPT below (not
   deleted) — it's still what the button's markup note says to re-wrap the
   button in if it comes back.
   ══════════════════════════════════════════════════════════════════════════ */

.kd-event-toolbar {
	margin-bottom: var(--blg-space-xl); /* 64px — toolbar → grid */
}

/* "Search" label — visually hidden (BLGA 6:285 shows no visible label over the
   pill, just the placeholder text) but kept in the DOM + screen-reader-visible
   for the input's accessible name. Same visually-hidden technique as
   .kd-event-search__submit below. */
.kd-event-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.kd-event-toolbar__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--blg-space-md); /* 24px — search pill → view toggle → chips */
}

/* Currently UNUSED — kept for the "Submit an Event" button's return (see the
   §2 docblock above + inc/event-archive.php). Not rendered by
   blg_event_archive_toolbar_html() since morning-r1. */
.kd-event-toolbar__right {
	display: flex;
	align-items: center;
}

/* ── Search form — pill input, magnifier icon inside, visible label above ──── */

.kd-event-search {
	display: flex;
	align-items: center;
}

/* events-view.js hides the search form + label in calendar view via the
   native [hidden] attribute. An author rule's `display` always beats the
   UA stylesheet's `[hidden] { display: none }` (author origin outranks UA
   origin regardless of specificity) — confirmed live: .kd-event-search's own
   `display: flex` above left the "hidden" search pill still visibly flexed.
   Restate display:none for the hidden state so JS's native-attribute
   approach actually works (mirrors the belt-and-suspenders
   .kd-event-view-panel[hidden] rule in §8 CALENDAR EMBED). */
.kd-event-search[hidden] {
	display: none;
}

.kd-event-search__inner {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	background: var(--blg-color-base);
	border: 1px solid var(--blg-color-neutral-500, var(--blg-color-neutral-300));
	border-radius: var(--blg-radius-pill);
	padding: 0.75rem 1.25rem;
	min-width: 15.625rem; /* ~250px */
	transition:
		border-color var(--blg-transition-fast),
		box-shadow var(--blg-transition-fast);
}

/*
 * Keyboard/focus indicator lives on the WRAPPER, not the input (events-polish
 * fix #1). Mirrors .kd-news-search__inner:focus-within exactly.
 */
.kd-event-search__inner:focus-within {
	border-color: var(--blg-color-primary);
	box-shadow: 0 0 0 3px
		color-mix(in srgb, var(--blg-color-primary) 15%, transparent);
	outline: 2px solid var(--blg-color-primary);
	outline-offset: 2px;
}

.kd-event-search__icon {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	color: var(
		--blg-color-neutral-500,
		var(--blg-color-body)
	); /* BLGA 6:285: muted icon, not brand blue */
}

/*
 * events-polish fix #1 (double border): this rule already asked for a
 * borderless/transparent input, but the global input[type=search] rule in
 * forms.css (2px purple pill border) has higher specificity and rendered a
 * second purple pill INSIDE .kd-event-search__inner's own pill — confirmed via
 * computed styles (input showed a 1.7px solid purple border it never declared
 * here). Fixed at the source: forms.css now excludes
 * .kd-event-search__input the same way it already excludes
 * .kd-news-search__input (both the base input[type=search] rule and the
 * input:focus rule) — so this rule is now the ONLY thing touching the input's
 * border, and it stays borderless/outline-less at every state, matching the
 * news-search precedent exactly.
 */
.kd-event-search__input {
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body); /* 16px */
	color: var(--blg-color-body);
	flex: 1 1 auto;
	min-width: 0;
}

.kd-event-search__input::placeholder {
	color: var(--blg-color-neutral-500, var(--blg-color-body));
	opacity: 1; /* Firefox resets opacity on placeholders */
}

/* Visually hidden — no-JS fallback; form submits on enter or click. */
.kd-event-search__submit {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── View-toggle — grid / calendar / list (events-polish fix #3: WIRED) ──────
   Real <button> elements now (was decorative aria-hidden chrome — see
   inc/event-archive.php's updated file-level docblock). A toggle-button-group
   pattern (role="group" wrapper + aria-pressed per button) rather than a full
   ARIA tablist — simpler, still keyboard-operable (native <button>) and
   correctly announced. Active state keys off [aria-pressed="true"] directly
   (assets/js/events-view.js sets it) so there is one source of truth instead
   of a class kept in sync with the attribute. */

/* BLGA 6:285: the 3 icons sit INSIDE one grouped neutral-100 pill (not 3
   separate circles with gaps) — the active view is a filled Georgia-Blue
   rounded-square inset within that pill. Same DOM (role="group" wrapper +
   per-button aria-pressed, inc/event-archive.php, untouched), CSS-only regroup. */
.kd-event-view-toggle {
	display: flex;
	align-items: center;
	gap: 0.125rem;
	background: var(--blg-color-neutral-100);
	border-radius: var(--blg-radius-pill);
	padding: 0.25rem;
}

.kd-event-view-toggle__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem; /* 36px */
	height: 2.25rem;
	border: none;
	border-radius: var(--blg-radius-md); /* 12px — squarish, not circular */
	background: transparent;
	color: var(--blg-color-neutral-500, var(--blg-color-body));
	cursor: pointer;
	transition:
		background-color var(--blg-transition-fast),
		color var(--blg-transition-fast);
}

.kd-event-view-toggle__btn:hover {
	background: var(--blg-color-neutral-300, var(--blg-color-neutral-100));
}

.kd-event-view-toggle__btn svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* Active view = filled Georgia Blue (Figma shows the grid icon filled by default). */
.kd-event-view-toggle__btn[aria-pressed="true"] {
	background: var(--blg-color-primary);
	color: var(--blg-color-base);
}

.kd-event-view-toggle__btn[aria-pressed="true"]:hover {
	background: var(--blg-color-primary);
}

.kd-event-view-toggle__btn:focus-visible {
	outline: 2px solid var(--blg-color-primary);
	outline-offset: 2px;
}

/* ── Submit an Event — filled purple pill + trailing icon ─────────────────────
   Currently UNUSED — the button was removed from the toolbar morning-r1
   (2026-08-21, Alain: not needed for now). Kept, not deleted, for a one-line
   re-enable (see inc/event-archive.php's blg_event_archive_toolbar_html()
   docblock for exactly what to restore). ─────────────────────────────────── */

.kd-event-archive__submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}

.kd-event-archive__submit-icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. RESULTS HEADER — search results-only view (mirrors .kd-news-results-header)
   ══════════════════════════════════════════════════════════════════════════ */

.kd-event-results-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--blg-space-sm);
	margin-bottom: var(--blg-space-lg); /* 40px → grid */
}

.kd-event-results-header__title {
	margin: 0;
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2rem); /* 24 → 32px */
	line-height: 1.25;
	color: var(--blg-color-contrast);
}

.kd-event-results-header__title span {
	color: var(--blg-color-primary);
}

.kd-event-results-header__clear {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body);
	font-weight: 700;
	color: var(--blg-color-primary);
	text-decoration: none;
	white-space: nowrap;
}

.kd-event-results-header__clear:hover,
.kd-event-results-header__clear:focus-visible {
	text-decoration: underline;
}

.kd-event-no-results {
	margin: var(--blg-space-lg) 0 0;
	text-align: center;
	font-size: var(--blg-size-body-lg);
	color: var(--blg-color-body);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3b. SECTION EYEBROW — "Upcoming" (BLGA 6:286)
   Injected ahead of the default grid panel by patterns/event-archive.php (not
   inc/event-archive.php — see that pattern file's docblock). morning-r6:
   font-family/weight unified to .kd-split__eyebrow's exact spec site-wide
   (Raleway 900 — Alain's picked "Why B Local" weight), Georgia Blue color
   kept. Was Inter SemiBold/600.
   ══════════════════════════════════════════════════════════════════════════ */

.blg-event-archive__section-eyebrow {
	/* Type comes from the shared `.kd-eyebrow` rule (global.css); colour and
	   rhythm are this pattern's own. */
	line-height: 1.43;
	color: var(--blg-color-primary);
	margin: 0 0 var(--blg-space-sm); /* 16px eyebrow → grid */
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. CARD — .kd-event-card
   morning-r1 (2026-08-21): restyled to the NHC compact card (file
   LdwJIRwwEJXAInb2m9V8Dw, node 5:1636 — 392×480, radius ~16). Image top
   rounded inset (343×220, 10px radius — unchanged from the prior build,
   already matched that node's own inset exactly) → small uppercase date
   eyebrow → H3 title → short excerpt → NO button, whole card is the link
   (was: a "Learn more" pill below the excerpt — removed). NHC's node gives
   the LAYOUT only; BLGA tokens are unchanged (Georgia Blue date eyebrow,
   Deep Petrol title, member-card shadow — see the box-shadow note below).
   Grid wrapper reuses the shared .kd-card-grid class (card-grid.css) for the
   3→2→1 column ladder + gap — only the card's own look lives here.
   ══════════════════════════════════════════════════════════════════════════ */

/* Border → tight shadow, matching the member-card language (BLGA 6:286: "white
   cards, tight shadow" — client asked for a crisper lift than a hairline
   border reads). Reuses member-grid.css's --blg-members-card-shadow* pair
   (root-scoped custom props, color-mix against --blg-color-contrast) rather
   than redefining an equivalent shadow locally — same visual system, one
   source of truth. member-grid.css is always enqueued (inc/enqueue.php globs
   every patterns/*.css on every page), so the custom properties are available
   here regardless of load order. */
.kd-event-card {
	position: relative;
	/* `border: none` fights a leaked 4px solid Georgia-Blue border from
	   card-grid.css's `.kd-card-grid > *` (this card's parent grid also
	   carries the bare `.kd-card-grid` class) — same root-cause shared-file
	   bug as §6 GRID ALIGNMENT's docblock explains; this card never declared
	   its own `border` before, so nothing previously overrode the leak.
	   Verified live (computed style showed the 4px primary border before this
	   line existed); flagged there, not re-flagged twice. */
	border: none;
	background-color: var(--blg-color-base);
	border-radius: var(
		--blg-radius-card
	); /* 16px — matches member-grid cards */
	box-shadow: var(--blg-members-card-shadow);
	overflow: hidden;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	height: 100%;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
}

.kd-event-card:hover,
.kd-event-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--blg-members-card-shadow-hover);
}

/* ── Image — 24px inset, 343/220 aspect (Figma 40:4494) ─────────────────────── */

.kd-event-card .kd-event-card__image {
	margin: 1.5rem 1.5rem 0;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
}

.kd-event-card__image img {
	width: 100%;
	aspect-ratio: 343 / 220;
	object-fit: cover;
	display: block;
	border-radius: 10px;
}

.kd-event-card__image--placeholder {
	aspect-ratio: 343 / 220;
	background-color: var(
		--blg-color-neutral-100
	); /* #F9F9FF — Figma 40:4494 */
	border-radius: 10px;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.kd-event-card__body {
	padding: 1.25rem 1.5rem 1.5rem;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	flex: 1 1 auto;
}

/* ── Date eyebrow — Inter/Montserrat Bold 14px, purple, UPPERCASE ───────────── */

.kd-event-card__date {
	font-family: var(--blg-font-body);
	font-size: 0.875rem !important; /* 14px */
	font-weight: 700 !important;
	line-height: 1.4;
	color: var(--blg-color-primary) !important;
	text-transform: uppercase;
	letter-spacing: 0.25px;
	margin: 0 0 0.375rem;
}

/* ── Title — Bold 24px, petrol (BLGA 6:286: "H3 petrol", not primary blue).
   The title's <a> is now the card's single interactive element (morning-r1:
   NO button, whole card is the link) — same stretched-link idiom already
   established by card-grid.css/card-grid-query.css: the anchor's ::after
   stretches over the whole .kd-event-card (position:relative, above). ──── */

.kd-event-card__title {
	font-family: var(--blg-font-heading) !important;
	font-weight: 700 !important;
	font-size: var(--blg-size-h3); /* 1.5rem / 24px */
	line-height: 1.42; /* 34/24 */
	margin: 0 0 var(--blg-gap-tight); /* 8px title → excerpt */
}

.kd-event-card__title-link {
	color: var(--blg-color-contrast) !important;
	text-decoration: none;
}

.kd-event-card__title-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--blg-radius-card);
	z-index: 1;
}

.kd-event-card__title-link:focus-visible::after {
	outline: 3px solid var(--blg-color-primary);
	outline-offset: -3px;
}

.kd-event-card:hover .kd-event-card__title-link,
.kd-event-card:focus-within .kd-event-card__title-link {
	color: var(--blg-color-primary) !important;
}

/* ── Excerpt — body ink (see deviation note: inc/event-archive.php). Last
   element in the card now (no CTA below it) — no bottom margin needed, the
   body's own padding-bottom closes out the card. ───────────────────────── */

.kd-event-card__excerpt {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body); /* 16px */
	font-weight: 400;
	line-height: 1.625;
	color: var(--blg-color-body);
	margin: 0;
	flex: 1 1 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1023.98px) ─────────────────────────────────────────────────── */

@media (max-width: 1023.98px) {
	.kd-event-toolbar {
		margin-bottom: var(--blg-space-lg); /* 40px */
	}
}

/* ── Mobile (≤767.98px) — toolbar stacks, search full-width ─────────────────── */

@media (max-width: 767.98px) {
	/* .kd-event-toolbar itself is no longer display:flex (morning-r1 — see §2
	   TOOLBAR), so it needs no flex-direction/align-items override here; only
	   the row inside it still needs to wrap. */
	.kd-event-toolbar__row {
		flex-wrap: wrap;
	}

	.kd-event-search {
		width: 100%;
	}

	.kd-event-search__inner {
		width: 100%;
		min-width: 0;
	}

	/* Currently unused (see §2 TOOLBAR) — kept for the Submit button's return. */
	.kd-event-toolbar__right {
		width: 100%;
	}

	.kd-event-archive__submit {
		width: 100%;
		justify-content: center;
	}

	.kd-event-card .kd-event-card__image {
		margin: 1.25rem 1.25rem 0;
	}

	.kd-event-card__body {
		padding: 1rem 1.25rem 1.25rem;
	}
}

/* ── Small phone (≤375px) ────────────────────────────────────────────────── */

@media (max-width: 375px) {
	.kd-event-search__inner {
		padding: 0.625rem 1rem;
	}

	.kd-event-view-toggle__btn {
		width: 2.5rem;
		height: 2.5rem;
	}

	.kd-event-card .kd-event-card__image {
		margin: 1rem 1rem 0;
	}

	.kd-event-card__body {
		padding: 0.875rem 1rem 1rem;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. GRID ALIGNMENT — events-polish fix #2: cards fill the band edge-to-edge
   ══════════════════════════════════════════════════════════════════════════
   Figma 5:1968 shows the card trio flush with the toolbar: first card's left
   edge = search's left edge, last card's right edge = "Submit an Event"'s
   right edge. Confirmed live @2560 BEFORE this fix: the .kd-event-grid
   CONTAINER already lands exactly on the band (left/right = 516.57/2028.57px,
   matching the toolbar and --blg-content-max — the constrained-layout parent
   handles that correctly). The mismatch was inside it: card-grid.css's shared
   `.kd-card-grid` ruleset caps each column at `minmax(0, 24.5rem)` (Figma's
   392px static-card spec) with `justify-content: center`, so once the 3-col
   trio's natural width (3×392 + 2×24 gap = 1224px) is narrower than the 1512px
   band, the trio centers — 144px inset on each side @2560, 660.57 vs the
   516.57 container edge.

   Fix: let THIS archive's grid stretch its columns to 1fr instead of capping
   them at 24.5rem, at each of card-grid.css's own column-count breakpoints —
   only the column WIDTH changes; the 3→2→2→1 column-COUNT ladder (driven by
   the shared `.kd-card-grid--cols-3` class + its media queries) is untouched.
   Scoped to `.kd-archive--event .kd-event-grid` only — story/news/team
   archives keep the shared centered behaviour (card-grid.css untouched,
   per instruction; that centering is flagged system-wide as its own separate,
   deferred design decision — see build-tracker.md's "Finding #2").

   !important is required: card-grid.css asserts `grid-template-columns`
   `!important` on `.kd-card-grid--cols-3` (unconditional) and again inside
   each of its own breakpoints, so only an equally-`!important` rule can win —
   confirmed via computed styles before writing this (not a blind override).
   Source order also favours this file (events-archive.css loads after
   card-grid.css — enqueue.php's pattern glob is alphabetical), so plain class
   specificity would already be enough even without the breakpoint's own
   `!important`; the `!important` here matches the base file's own convention
   for this exact property rather than introducing a new one.

   ⚠️ FOUND + WORKED AROUND HERE, FLAGGED FOR A SHARED-FILE FIX (morning-r1,
   2026-08-21): card-grid.css's own base ruleset —
     .kd-card-grid,
     .kd-card-grid > *,
     .kd-card { display: flex !important; ... border: 4px solid primary;
     box-shadow: ...; border-radius: 24px; overflow: hidden; height: 100%; }
   — is a single comma-joined selector list spanning several CSS comments
   (comments don't break a selector list, only a real selector/`{` does), so
   `.kd-card-grid` and `.kd-card-grid > *` accidentally inherit ALL of
   `.kd-card`'s CARD box styling instead of getting their own `display: grid`
   (there is no `display: grid` declaration anywhere else in that file —
   confirmed via grep). Verified live via computed styles: `.kd-event-grid`
   (which carries the bare `.kd-card-grid` class per this archive's docblock)
   computed `display: flex`, not `grid`, before this fix — collapsing the
   3-up grid into a single full-width flex column with a leaked 4px
   Georgia-Blue border + box-shadow around the whole grid. This is NOT a
   regression from morning-r1's own edits (git diff confirms card-grid.css is
   untouched by this pass) — it's a pre-existing authoring bug in a SHARED
   file, out of this builder's lane to fix at the source. Reset here, scoped
   to `.kd-archive--event .kd-event-grid` only (does not touch card-grid.css
   or any other `.kd-card-grid` consumer — story/news/team archives and the
   static blg/card-grid pattern are untouched and may carry the same latent
   bug; flagging for a separate serialized fix in card-grid.css itself:
   giving `.kd-card-grid`/`.kd-card-grid > *` their own `{ display: grid;
   gap: ...; }` block, separated from `.kd-card`'s selector list). */

.kd-archive--event .kd-event-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: var(--blg-space-md) !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	height: auto !important;
}

@media (max-width: 1024px) {
	.kd-archive--event .kd-event-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 767.98px) {
	.kd-archive--event .kd-event-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. LIST VIEW — .is-view-list (events-polish fix #3)
   ══════════════════════════════════════════════════════════════════════════
   A CSS-only variant of the SAME grid + SAME .kd-event-card markup (no new
   query, no new PHP renderer) — assets/js/events-view.js toggles this class on
   .kd-event-grid. Row layout: image fixed-width left column, content fills the
   rest. Card, search, and Load More markup/behaviour are completely unchanged;
   Load More-appended cards inherit the row layout automatically since they
   land inside the same .is-view-list grid. No mobile-list Figma frame exists
   (this is a builder-derived interaction, not in 5:1968) — below tablet width
   a "row" reads too cramped, so list collapses back to the same stacked
   image-over-content look as grid view; flagged for designer review. */

.kd-event-grid.is-view-list {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--blg-space-md) !important;
}

.kd-event-grid.is-view-list .kd-event-card {
	/* The base rule's `height: 100%` is a CSS-Grid stretch convention (matches
	   the tallest sibling in a grid ROW). Carried into this flex COLUMN
	   container it becomes a percentage against an indefinite ancestor height.
	   `height: auto` alone did NOT fully neutralise it live — the image's own
	   `height: 100%` (below) still fed a percentage-height chain back into this
	   card's own content-size computation, and every row rendered ~1501px tall
	   (an equal 1/9th split of the grid's own auto-height: a flex
	   percentage-height cyclic quirk, confirmed via computed styles). Fixing
	   the image to a definite, non-percentage height (below) removes the
	   percentage chain at its source, so `auto` here now behaves as expected:
	   each row hugs max(image height, body's natural content height). */
	flex-direction: row !important;
	height: auto !important;
}

.kd-event-grid.is-view-list .kd-event-card .kd-event-card__image {
	margin: 0;
	flex: 0 0 16rem; /* fixed left column */
	height: auto;
	border-radius: 0; /* the card's own overflow:hidden clips the outer corner */
}

.kd-event-grid.is-view-list .kd-event-card__image img,
.kd-event-grid.is-view-list .kd-event-card__image--placeholder {
	aspect-ratio: auto;
	width: 100%;
	/* Definite (not percentage) height — see the .kd-event-card note above.
	   16rem keeps the row a comfortable list-row size; if the excerpt text
	   runs longer than that the row (and this image) grow to match it via
	   align-self: stretch, which is fine since it resolves against the row's
	   OWN already-computed content height at that point, not a live cycle. */
	height: 16rem;
	object-fit: cover;
	border-radius: 0;
}

.kd-event-grid.is-view-list .kd-event-card__body {
	flex: 1 1 auto;
}

@media (max-width: 767.98px) {
	/* Collapse the row back to the grid card's stacked layout — a 16rem image
	   column reads as a thin sliver at phone widths. */
	.kd-event-grid.is-view-list .kd-event-card {
		flex-direction: column !important;
	}

	.kd-event-grid.is-view-list .kd-event-card .kd-event-card__image {
		flex: 0 0 auto;
		margin: 1.25rem 1.25rem 0;
		border-radius: 10px;
	}

	.kd-event-grid.is-view-list .kd-event-card__image img,
	.kd-event-grid.is-view-list .kd-event-card__image--placeholder {
		aspect-ratio: 343 / 220;
		height: auto;
		border-radius: 10px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. CALENDAR EMBED — .kd-event-view-panel--calendar (events-polish fix #3)
   ══════════════════════════════════════════════════════════════════════════
   Wraps the server-rendered [kd_calendar view="calendar" nav="true"] output
   (inc/event-archive.php's blg_event_archive_calendar_html()). The plugin
   renders its OWN list/grid/calendar switcher when nav="true" (needed for the
   AJAX month prev/next to work) — that switcher is redundant next to this
   toolbar's switcher, so it is hidden here, scoped to this embed only (a
   plain descendant-selector display:none — the plugin's own .kde-switcher
   rule carries no !important, so no override contest). Everything else
   (month grid, day-detail panel, agenda) is the plugin's untouched CSS —
   confirmed live on the pre-existing /events-demo/ page (kd-events
   3474731): AJAX month-nav round-trips via /wp-json/kd-events/v1/calendar
   with no console errors. */

.kd-event-view-panel[hidden] {
	display: none !important; /* belt-and-suspenders vs. any future
		display:* rule landing on this wrapper and beating the native
		[hidden] behaviour */
}

.kd-event-view-panel--calendar .kde-switcher {
	display: none;
}

.kd-event-view-panel--calendar {
	margin-top: var(--blg-space-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. TYPE FILTER CHIPS — .kd-event-type-chips (Figma 6:285)
   ══════════════════════════════════════════════════════════════════════════
   Tint pills (Sky Tint bg, Deep Petrol text); the active chip is FILLED Deep
   Petrol / white text — pixel-sampled directly from the Figma render
   (rgb(10,46,64) = #0A2E40 = --blg-color-contrast), which is the design's
   actual active-chip color even though the build brief described it as
   Georgia Blue. Built to match the Figma pixels, not the brief's paraphrase —
   flagged in the handoff.
   ══════════════════════════════════════════════════════════════════════════ */

.kd-event-type-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.kd-event-type-chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--blg-font-body);
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
	color: var(--blg-color-contrast);
	background-color: var(--blg-color-tint);
	border-radius: var(--blg-radius-pill);
	padding: 0.5rem 1.125rem;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--blg-transition-fast),
		color var(--blg-transition-fast);
}

.kd-event-type-chip:hover {
	background-color: color-mix(
		in srgb,
		var(--blg-color-tint) 60%,
		var(--blg-color-neutral-300)
	);
}

.kd-event-type-chip.is-active {
	background-color: var(--blg-color-contrast);
	color: var(--blg-color-base);
}

.kd-event-type-chip.is-active:hover {
	background-color: var(--blg-color-contrast);
}

.kd-event-type-chip:focus-visible {
	outline: 2px solid var(--blg-color-primary);
	outline-offset: 2px;
}

@media (max-width: 767.98px) {
	.kd-event-type-chips {
		width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. PAST EVENTS — .blg-past-events (Figma 6:287)
   ══════════════════════════════════════════════════════════════════════════
   Muted/small variant, sits under the upcoming grid + calendar panel. Not a
   .kd-event-view-panel (always visible regardless of the grid/list/calendar
   toggle — matches the Figma layout, where Past Events is a fixed section
   below the toggled area, not one of the toggled views itself).

   Card treatment pixel-verified against 6:287:
     - image well: rgb(217,222,227) = #D9DEE3 = --blg-color-neutral-300 (NOT
       neutral-100 — the build brief said neutral-100; the Figma pixels say
       neutral-300, flagged in the handoff, built to match the pixels).
     - eyebrow "PAST EVENTS": rgb(108,122,132) = #6C7A84 = --blg-color-neutral-500.
     - title (darkest sampled pixel): rgb(10,46,64) = #0A2E40 = --blg-color-contrast.

   morning-r1 (2026-08-21): the "compact card" restyle (NHC file
   LdwJIRwwEJXAInb2m9V8Dw node 5:1636 — see §4 CARD above for the upcoming
   card) extends here too, per the brief ("past cards stay muted but same
   compact anatomy") — judgment call: gave the past card the same physical
   card-box anatomy as the upcoming compact card (white bg, 16px radius,
   member-card shadow, 24px image inset, padded body) so the two grids read
   as one system, WITHOUT touching the parts of this card that were already
   pixel-verified against 6:287 above (neutral-300 image well, neutral-500
   meta, contrast title) and WITHOUT adding an excerpt or a whole-card link —
   6:287 shows no click affordance on these cards and no excerpt row; that
   call stands, this pass only unifies the box/inset proportions. No excerpt
   text exists in the data model for past events either, so inventing one
   would be fabricated content, not a restyle.
   ══════════════════════════════════════════════════════════════════════════ */

.blg-past-events {
	margin-top: var(
		--blg-space-xxl
	); /* 96px — clears the toggled view panels above */
}

/* morning-r6: font-family/weight unified to .kd-split__eyebrow's exact spec
   site-wide (Raleway 900 — Alain's picked "Why B Local" weight). The
   neutral-500 color stays — that's the pixel-verified-against-6:287 value
   noted above, untouched. Was Inter/600. */
.blg-past-events__eyebrow {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-eyebrow); /* 14px */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blg-color-neutral-500);
	margin: 0 0 var(--blg-space-md); /* 24px eyebrow → grid */
}

.blg-past-events__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--blg-space-md); /* 24px */
}

/* Card box — same anatomy/proportions as .kd-event-card (24px image inset,
   16px radius, member-card shadow) so the past grid reads as the same
   compact-card system; muted CONTENT stays muted (image well/meta/eyebrow
   colors below, pixel-verified against 6:287, unchanged). */
.blg-past-event-card {
	display: flex;
	flex-direction: column;
	background-color: var(--blg-color-base);
	border-radius: var(--blg-radius-card); /* 16px — matches .kd-event-card */
	box-shadow: var(--blg-members-card-shadow);
	overflow: hidden;
}

.blg-past-event-card__image {
	aspect-ratio: 343 / 220;
	border-radius: 10px;
	overflow: hidden;
	margin: 1.5rem 1.5rem 0; /* 24px inset — matches .kd-event-card__image */
}

.blg-past-event-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blg-past-event-card__image--placeholder {
	width: 100%;
	height: 100%;
	background-color: var(--blg-color-neutral-300);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--blg-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--blg-color-neutral-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.blg-past-event-card__body {
	padding: 1.25rem 1.5rem 1.5rem; /* matches .kd-event-card__body */
}

.blg-past-event-card__meta {
	font-family: var(--blg-font-body);
	font-size: 0.8125rem; /* 13px */
	font-weight: 700;
	color: var(--blg-color-neutral-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 0.25rem;
}

.blg-past-event-card__title {
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: 1.125rem; /* 18px — smaller than the upcoming card's 24px title */
	line-height: 1.35;
	color: var(--blg-color-contrast);
	margin: 0;
}

@media (max-width: 1024px) {
	.blg-past-events__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.blg-past-events {
		margin-top: var(--blg-space-xl); /* 64px */
	}

	.blg-past-events__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.blg-past-event-card__image {
		margin: 1.25rem 1.25rem 0; /* matches .kd-event-card__image at this tier */
	}

	.blg-past-event-card__body {
		padding: 1rem 1.25rem 1.25rem;
	}
}

@media (max-width: 375px) {
	.blg-past-event-card__image {
		margin: 1rem 1rem 0;
	}

	.blg-past-event-card__body {
		padding: 0.875rem 1rem 1rem;
	}
}