/**
* Pattern: Card Grid — 3-Column Static + Query Loop (patterns/card-grid.php + card-grid-query.php)
*
* Full-bleed purple section band → centred section heading → 3-column CSS-grid
* of white bordered event cards (image + date + title + excerpt) → outline CTA
* button below the grid. Used by BOTH blg/card-grid (static) and
* blg/card-grid (static only; card-grid-query re-scoped to .blg-spotlight__query 2026-08-21). All visual rules live here; query-specific
* overrides go in card-grid-query.css if ever needed.
*
* Figma source: node 2107:3873 — event card full render.
* Card outer (258:2552): 392×582px, border 4px (donor purple), radius 24px,
* box-shadow 0 0 10px 6px rgba(0,0,0,0.05), white bg.
* Image inner (258:2565): 343×295px within 392px card → 24px side padding,
* radius 10px, object-cover, aspect ≈7/6.
* Date (258:2560): Inter Bold, 14px, (donor purple), UPPERCASE, letter-spacing 0.25px.
* Sits ABOVE the title.
* Heading (258:2556): Montserrat Black, 26px, dark ink (--blg-color-contrast),
* line-height 34px. NOT purple — title is the link anchor; purple used for date.
* Paragraph (258:2563): Inter Regular, 16px, body-ink, line-height 26px.
* No button: whole card is clickable via title link + ::after overlay.
* Section heading (258:2617): Montserrat Black, 50px, white, centered, capitalize.
* Section CTA (258:2605): white outline pill, "view events calendar", 18px.
*
* Column gap derivation: cards at x=109, x=526, x=935 (each w=392).
* Gap 1: 526−109−392 = 25px. Gap 2: 935−526−392 = 17px → rounding artifact → 24px.
* Token: --blg-space-md = 1.5rem (24px). ✓
*
* Whole-card click (a11y):
* - Title carries the single per card (wp:post-title isLink:true / static ).
* - Title ::after { position:absolute; inset:0 } stretches over the whole .kd-card
* (which is position:relative).
* - Featured image is NOT a separate link (isLink:false on wp:post-featured-image)
* to avoid duplicate links to the same URL (screen-reader unfriendly).
* - Hover/focus-within: card lifts (translateY -2px + shadow) + title turns purple.
*
* Static grid centering fix:
* - The static .kd-card-grid group uses layout type:default (not flex) so WP does
* NOT inject is-layout-flex / is-content-justification-left classes that fight the
* CSS display:grid. The query version (.wp-block-post-template) is already a grid.
*
* Responsive plan (no mobile frame; derived from desktop + token spec):
* 1440px desktop: 3 columns, gap 24px, full-width purple band.
* ≤1024px tablet: 2 columns, same gap.
* ≤768px mobile: 1 column, cards stack.
* 375px phone: 1 column as above, reduced card padding.
*
* One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
* All responsive media queries for both card-grid patterns live in this file.
*/
/* ── Section band — full-bleed purple ──────────────────────────────────────── */
.kd-card-grid-section {
padding-block: var(--blg-space-xl) !important; /* 64px top + bottom */
}
/* Section heading — "Upcoming Events": Montserrat Black, 50px, white, capitalize. */
.kd-card-grid-section .kd-card-grid-section__heading {
font-size: var(--blg-size-h2-section) !important; /* shared section scale */
font-family: var(--blg-font-heading);
font-weight: var(--blg-fw-heading);
color: var(--blg-color-base) !important;
text-align: center;
text-transform: capitalize;
line-height: 1.15 !important;
margin: 0 0 var(--blg-space-lg);
letter-spacing: 0.15px;
}
/* ── Card grid — 3-column CSS grid ─────────────────────────────────────────── */
/* Shared grid wrapper — static .kd-card-grid uses layout type:default so WP
renders it as a block (no is-layout-flex override). Query Loop post-template
is already a native grid. Both land on this ruleset. */
.kd-card-grid {
/* Was accidentally comma-joined into .kd-card's ruleset below (a CSS comment
does not terminate a selector list), so this never applied and grid consumers
inherited card chrome instead. Split out 2026-08-21 (morning-r1 review find). */
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--blg-space-md);
}
/* .kd-card-grid is is-layout-flow (a type:default group) rendered AS a grid. WP's flow
rule — :where(.is-layout-flow) > * — adds margin-block-start (= the block-gap, 24px)
to every NON-first child, offsetting cards 2+ downward on desktop and double-spacing
the mobile stack. The grid `gap` owns all spacing → zero the flow margins on grid items. */
.kd-card-grid > * {
margin-block-start: 0;
}
/* ── Card — white bordered container (position:relative for ::after overlay) ── */
/* Figma: 392×582, border 4px solid (donor purple), radius 24px,
shadow 0 0 10px 6px rgba(0,0,0,0.05), white background. */
.kd-card {
position: relative; /* anchors the title ::after overlay */
background-color: var(--blg-color-base);
border: 4px solid var(--blg-color-primary);
border-radius: var(--blg-radius-lg); /* 24px */
box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.05);
overflow: hidden; /* clip image corners at the top of the card */
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
height: 100%; /* stretch to match tallest sibling in the grid row */
transition:
transform 0.18s ease,
box-shadow 0.18s ease;
}
/* Hover / focus-within lift — signals the whole card is clickable */
.kd-card:hover,
.kd-card:focus-within {
transform: translateY(-2px);
box-shadow: 0 4px 18px 6px rgba(0, 0, 0, 0.1);
}
/* ── Card image — top of card, 24px inset all around ───────────────────────── */
.kd-card .kd-card__image,
.kd-card .wp-block-post-featured-image {
margin: 1.5rem 1.5rem 0; /* 24px top + sides */
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
}
.kd-card .kd-card__image figure,
.kd-card .wp-block-post-featured-image > img {
display: block;
width: 100%;
}
.kd-card .kd-card__image img,
.kd-card .wp-block-post-featured-image img {
width: 100%;
aspect-ratio: 7 / 6;
object-fit: cover;
display: block;
border-radius: 10px;
}
/* ── Card body — content area below the image ──────────────────────────────── */
.kd-card .kd-card__body {
padding: 1.25rem 1.5rem 1.5rem; /* ~19px top, 24px sides, 24px bottom */
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
flex: 1 1 auto;
}
/* ── Date — Inter Bold 14px, purple, UPPERCASE (Figma 258:2560) ─────────────── */
/* Sits above the title. wp:post-date / static paragraph both get .kd-card__date.
The block attribute textColor:"primary" adds has-primary-color via WP; we
assert here to guarantee it and add the typography treatment. */
.kd-card .kd-card__date,
.kd-card .wp-block-post-date {
font-family: var(--blg-font-body); /* Inter */
font-size: 0.875rem !important; /* 14px */
font-weight: 700 !important;
font-style: normal;
line-height: 1.4;
color: var(--blg-color-primary) !important; /* purple */
text-transform: uppercase;
letter-spacing: 0.25px;
margin: 0 0 0.375rem; /* ~6px gap to title */
text-decoration: none;
}
/* wp:post-date uses isLink:false → renders a plain