/**
 * Pattern: Event Card 2-Up — Featured (image-top)  (patterns/event-card-2up.php)
 *
 * BLGA RE-SKIN 2026-08-21 — Figma source now node 6:22 (Home "Events band",
 * file oxWHhReiOOvvipYVTLuMgA), superseding the earlier donor-starter build
 * against "Summer Series" frame 177:3656 (transparent/white-text card on an
 * Accent-Blue band). BLGA's 6:22 card is the OPPOSITE treatment: a SOLID WHITE
 * card (member-card shadow language, petrol/primary text) sitting on a Deep
 * Petrol band — the band shows through the GAPS between cards, not through the
 * cards themselves. Markup (inc/kd-events.php's blg_upcoming_event_2up_card_html(),
 * read-only per this build's lane) is unchanged — image/date/title/excerpt/CTA
 * anatomy stays kd-events-compatible; only the visual treatment below is new.
 *
 * Two consumers share these classes:
 *   - patterns/event-card-2up.php (static design reference) emits .kd-2up-section
 *     so the demo carries its own Petrol band + heading.
 *   - [blg_upcoming_events layout="featured"] (inc/kd-events.php, consumed by
 *     patterns/upcoming-events.php on Home) emits ONLY .kd-2up-grid — the
 *     colour band + heading come from the page section it's placed in
 *     (patterns/upcoming-events.php's own `.blg-upcoming-events` Petrol band).
 *
 * Card anatomy (BLGA 6:22):
 *   Image: full card width, on TOP, flush (card's own overflow:hidden clips it).
 *   Date eyebrow: Inter Bold 14px, Georgia Blue (primary), uppercase — matches
 *     the events-archive.css .kd-event-card__date convention exactly.
 *   Heading (h3): Raleway Bold 24px, Deep Petrol (contrast) — matches
 *     .kd-event-card__title exactly (same H3 spec, same card family).
 *   Excerpt: Inter Regular 16px, body ink.
 *   Button: small filled Georgia-Blue pill, white uppercase text — matches
 *     .kd-event-card__link exactly (same small-pill-CTA convention).
 *   Card: white bg, radius 16px (--blg-radius-card), tight shadow (reuses
 *     member-grid.css's --blg-members-card-shadow* pair — same convention as
 *     events-archive.css's .kd-event-card).
 *
 * a11y: each card is one <article aria-labelledby> with a SINGLE link (the button).
 *   The heading is plain text — no whole-card overlay, no duplicate link.
 *
 * Responsive plan (no mobile Figma frame; derived from desktop + token spec):
 *   1440 / 1024px: 2 columns. ≤768px: a scroll-snap swipe carousel (dots) —
 *   inherited from the original donor build; kept since it still degrades fine
 *   at 2 slides, restyled only where the card itself changed (dots sit on the
 *   band, not the card, so their white styling is untouched and still correct).
 *
 * One pattern = one CSS partial. Auto-enqueued by inc/enqueue.php glob.
 */

/* ── Section band (static pattern only) ─────────────────────────────────────── */

/* The dynamic shortcode does NOT emit .kd-2up-section — its band comes from the
   page (patterns/upcoming-events.php's own `.blg-upcoming-events` band on Home).
   The static demo carries the Deep Petrol band itself so it matches Figma 6:22. */
.kd-2up-section {
	padding-block: var(
		--blg-space-xl
	) !important; /* 64px — matches card-grid-section */
	background-color: var(
		--blg-color-contrast
	); /* BLGA 6:22: Deep Petrol, not accent-1 */
}

/* Two stacked event sections (Main + More Summer Series) read as ONE continuous blue
   band: cancel the global --blg-section-gap rhythm between them. That rhythm is a
   MARGIN (global.css .entry-content > * + *), so it otherwise shows the white page
   background as a gap between the two blue bands. */
.kd-2up-section + .kd-2up-section {
	/* (0,2,0) beats the global owl rule .entry-content > * + * (0,1,0) — no !important needed. */
	margin-block-start: 0;
}

/* Section heading — centered, WHITE, Raleway ExtraBold (BLGA Heading/H2 — same
   sizing as patterns/upcoming-events.php's `.blg-upcoming-events__heading`,
   this static reference just restates it for its own standalone demo band). */
.kd-2up-section .kd-2up-section__heading {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: var(--blg-size-h2-section) !important; /* shared section scale */
	line-height: var(--blg-lh-h2-section);
	color: var(--blg-color-base) !important; /* white */
	text-align: center;
	letter-spacing: normal;
	margin: 0 0 var(--blg-space-lg); /* 40px heading → grid */
}

/* ── 2-column grid ──────────────────────────────────────────────────────────── */

.kd-2up-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr; /* all rows equal height → all cards the same size */
	gap: var(
		--blg-space-lg
	) !important; /* 40px — token-driven, not a magic number */
	margin: 0 auto !important;
	padding: 0 !important;
	width: 100% !important;
}

/* Kill WP flow rule: :where(.is-layout-flow) > * adds margin-block-start to every
   non-first child. The grid `gap` owns spacing → zero the flow margins. */
.kd-2up-grid > * {
	margin-block: 0 !important;
}

/* ── Card — image-top vertical, SOLID WHITE, member-card shadow language ─────
   BLGA 6:22: the band shows through the GRID GAPS, not through the card — the
   opposite of the old donor treatment. Shadow reuses member-grid.css's
   --blg-members-card-shadow* pair (root-scoped, always enqueued — see
   events-archive.css's .kd-event-card for the same convention on the archive's
   upcoming-grid cards). */

.kd-2up-card {
	position: relative;
	background-color: var(--blg-color-base);
	border-radius: var(--blg-radius-card); /* 16px */
	box-shadow: var(--blg-members-card-shadow);
	overflow: hidden;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	height: 100%; /* equal-height cards in a row */
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
}

/* WP flex child margin reset. */
.kd-2up-card > * {
	margin-block: 0 !important;
}

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

/* Content column fills the card below the image (flex:1) and is itself a flex
   column, so .kd-2up-card__cta-row's margin-top:auto pins the CTA to the bottom —
   buttons line up across equal-height cards. Padded (the card is now a solid
   white surface, not a transparent overlay on the band). */
/* Left-aligned (Alain, 2026-08-21: "make the content to the left"). The card
   inherits `text-align: center` from the band — the section head is centred by
   design — and the card content was silently picking it up. Card copy reads as
   a list of facts (date, title, blurb) and wants a single left edge to scan
   down; only the head stays centred. */
.kd-2up-card__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	flex: 1 1 auto;
	min-width: 0;
	padding: 1.25rem 1.5rem 1.5rem; /* matches .kd-event-card__body exactly */
}

/* ── Image — full width, flush at the card top (the card's own overflow:hidden
   clips the top corners; no separate image radius/inset needed now that the
   card is opaque). ───────────────────────────────────────────────────────── */

.kd-2up-card__image,
.kd-2up-card .wp-block-image {
	margin: 0;
	flex-shrink: 0;
}

.kd-2up-card__image img,
.kd-2up-card .wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

/* ── Date eyebrow — Georgia Blue, 14px Bold uppercase (matches
   .kd-event-card__date exactly — same card family). ────────────────────── */

.kd-2up-card__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;
	text-transform: uppercase;
	letter-spacing: 0.25px;
	margin-bottom: 0.375rem !important; /* ~6px date → title */
	text-decoration: none;
}

/* ── Heading — h3, Raleway Bold 24px, Deep Petrol (matches
   .kd-event-card__title exactly — same H3 spec, same card family). ───────── */

.kd-2up-card__heading {
	font-family: var(--blg-font-heading) !important;
	font-weight: 700 !important; /* Bold — Figma Heading/H3, not the 900/Black button weight */
	font-size: var(--blg-size-h3); /* 1.5rem / 24px */
	line-height: 1.42; /* 34/24 — matches .kd-event-card__title */
	color: var(--blg-color-contrast) !important;
	margin-bottom: var(--blg-gap-tight) !important; /* 8px heading → excerpt */
}

/* ── Excerpt — body ink, 16px Regular ───────────────────────────────────────── */

.kd-2up-card__excerpt {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body) !important; /* 1rem / 16px */
	font-weight: 400;
	line-height: 1.625;
	color: var(--blg-color-body);
	margin-bottom: var(--blg-space-md) !important; /* 24px excerpt → button */
}

/* ── CTA button — small filled Georgia-Blue pill (matches
   .kd-event-card__link exactly — same small-pill-CTA convention). ─────────── */

/* CTA row — the "Event Details" button + an optional "extra link" sit side by side.
   margin-top:auto pins the row to the card bottom so it aligns across a grid
   row of unequal-length cards. */
.kd-2up-card__cta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--blg-space-md); /* 24px button → link */
	margin-top: auto;
}

/* Primary button — small filled Georgia-Blue pill. Colour from the markup
   (.has-primary-background-color + .has-base-color) still applies (correct
   already); this rule just sizes it down to the small-pill-CTA convention. */
.kd-2up-card__btn {
	margin: 0 !important;
}

.kd-2up-card__btn .wp-block-button__link {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading); /* 900 */
	font-size: 0.8125rem; /* 13px — matches .kd-event-card__link */
	line-height: 1.6;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	border-radius: var(--blg-radius-pill);
	padding: 0.5em 1.25em;
}

/* Extra link — the per-event custom CTA, shown beside the button. Georgia-Blue
   underlined text (was white-on-transparent; the card is opaque white now).
   A distinct destination from the button → two real links, not a duplicate. */
.kd-2up-card__link-secondary {
	margin: 0 !important;
}

.kd-2up-card__link-secondary a {
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: 0.9375rem; /* 15px */
	line-height: 1.33;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	color: var(--blg-color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding-bottom: 2px;
	transition: color var(--blg-transition-fast);
}

.kd-2up-card__link-secondary a:hover,
.kd-2up-card__link-secondary a:focus-visible {
	color: var(--blg-color-secondary);
}

/* ── Tablet (≤1024px) — still 2 columns, tighter gap ───────────────────────── */

@media (max-width: 1024px) {
	.kd-2up-grid {
		gap: 2.5rem !important; /* 40px */
	}
}

/* ── Phone (≤768px) — 1 column ─────────────────────────────────────────────── */

@media (max-width: 768px) {
	.kd-2up-grid {
		grid-template-columns: 1fr !important;
		gap: 2.5rem !important; /* 40px between rows */
		max-width: 600px;
		margin-inline: auto !important;
	}
}

/* ── Mobile carousel (layout 2 → swipe + dots ≤768px) ───────────────────────
   Desktop/tablet keep the 2-up grid: .kd-2up-grid's `display:grid !important`
   wins over the shared .kd-carousel__track flex. At ≤768 the track becomes a
   scroll-snap carousel with dots + native swipe (NO arrows) — card-carousel.js
   (per-slide mode) syncs the active dot to the scrolled card. Dots show only at
   mobile and are white to read on the colour band. No-JS baseline = swipe. */

/* Neutralize the shared track chrome at desktop (8px pad, scroll, snap). */
.kd-2up-carousel .kd-carousel__track {
	overflow: visible;
	scroll-snap-type: none;
	padding-block: 0;
}

/* Dots: hidden on desktop; white (override the carousel's purple) for the band. */
.kd-2up-carousel .kd-carousel__dots {
	display: none;
}

.kd-2up-carousel .kd-carousel__dot {
	border-color: var(--blg-color-base);
}

.kd-2up-carousel .kd-carousel__dot.is-active {
	background-color: var(--blg-color-base);
}

@media (max-width: 768px) {
	/* Track → horizontal scroll-snap carousel (overrides .kd-2up-grid's 1-col grid). */
	.kd-2up-carousel .kd-carousel__track {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch; /* equal-height cards across the row */
		gap: 1rem !important; /* 16px between cards (grid-template-columns is inert under flex) */
		max-width: none !important;
		margin-inline: 0 !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		padding-inline-end: 2.5rem; /* peek the next card → signals swipe */
	}

	.kd-2up-carousel .kd-carousel__track::-webkit-scrollbar {
		display: none;
	}

	/* Each card is a snap target sized so the next one peeks. height:auto (not the
	   base 100%) lets align-items:stretch equalise the heights → uniform cards. */
	.kd-2up-carousel .kd-2up-card {
		flex: 0 0 85%;
		height: auto;
		scroll-snap-align: start;
	}

	/* Reveal the dots on mobile. */
	.kd-2up-carousel .kd-carousel__dots {
		display: flex;
	}

	/* Two-link CTA: stack the button + extra link on mobile (button on top, link
	   left-aligned below) so a long extra-link label never wraps awkwardly beside
	   the button. Predictable at any label length; desktop keeps them side by side. */
	.kd-2up-card__cta-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--blg-gap-normal); /* 12px when stacked */
	}
}