/**
 * Pattern: Event Card 2-Up — Featured (image-top)  (patterns/event-card-2up.php)
 *
 * Figma source: campaign events frame 177:3656 — "Main Events" section.
 *
 * REWORKED 2026-06-23: the earlier build rendered these as horizontal cards
 * (image left / content right) on a white bordered card. The Figma truth is an
 * IMAGE-TOP VERTICAL card, 2-up, sitting directly on the Accent-Blue band
 * (#0974bc, node 273:5360) with NO border and a TRANSPARENT background — the band
 * shows through and all card text is WHITE.
 *
 * Two consumers share these classes:
 *   - patterns/event-card-2up.php (static design reference) emits .kd-2up-section
 *     so the demo carries its own blue band + heading.
 *   - [kds_upcoming_events layout="featured"] (inc/kd-events.php) emits ONLY
 *     .kd-2up-grid — the colour band + section heading come from the page section
 *     it's placed in (same arrangement the grid layout uses). Because the cards
 *     are transparent with white text, the featured layout MUST sit on a dark /
 *     colour band.
 *
 * Card anatomy (Figma):
 *   Image (e.g. 223:2039): 550×295 (~16:9), full card width, on TOP, radius 12px.
 *   Date eyebrow (223:2037): Inter Bold 14px, WHITE, uppercase, +0.25px.
 *   Heading (223:2036): Montserrat Black 26px, WHITE, line-height 34px, +0.25px.
 *   Excerpt (223:2038): Inter Regular 16px, WHITE, line-height 26px.
 *   Button (223:2073): filled primary pill (radius 200px), white Montserrat
 *     Black 15px uppercase. On the featured card this is the event's custom CTA.
 *   Inter-card gap: 70px at the 1440px canvas.
 *
 * 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: 1 column, max 600px centered.
 *
 * 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. The static demo carries the Accent-Blue band itself so it matches Figma. */
.kd-2up-section {
	padding-block: var(
		--kd-space-xl
	) !important; /* 64px — matches card-grid-section */
	background-color: var(--kd-color-accent-1); /* Figma 273:5360 */
}

/* Two stacked event sections (Main + More events) read as ONE continuous blue
   band: cancel the global --kd-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, Montserrat Black. */
.kd-2up-section .kd-2up-section__heading {
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading); /* 900 / Black */
	font-size: clamp(1.875rem, 3.5vw, 3.125rem) !important; /* 30px → 50px */
	line-height: 1.15;
	color: var(--kd-color-base) !important; /* white */
	text-align: center;
	text-transform: capitalize;
	letter-spacing: 0.15px;
	margin: 0 0 var(--kd-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: 4.375rem !important; /* 70px — Figma inter-card gap at 1440px */
	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, transparent, no border ─────────────────────── */

.kd-2up-card {
	position: relative;
	background-color: transparent; /* band shows through — Figma: no card bg */
	border: 0; /* Figma: no border */
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	height: 100%; /* equal-height cards in a row */
	transition: transform 0.18s ease;
}

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

/* Subtle hover/focus lift (no shadow — the card is transparent on the band). */
.kd-2up-card:hover,
.kd-2up-card:focus-within {
	transform: translateY(-2px);
}

/* 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. */
.kd-2up-card__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

/* ── Image — full width, on top ─────────────────────────────────────────────── */

.kd-2up-card__image,
.kd-2up-card .wp-block-image {
	margin: 0 0 var(--kd-space-md); /* 24px image → date */
	border-radius: 12px;
	overflow: hidden;
	flex-shrink: 0;
}

.kd-2up-card__image img,
.kd-2up-card .wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 9; /* Figma 550×295 ≈ 16:9 */
	object-fit: cover;
	display: block;
	border-radius: 12px;
}

/* ── Date eyebrow — white, 14px Bold uppercase ─────────────────────────────── */

.kd-2up-card__date {
	font-family: var(--kd-font-body); /* Inter */
	font-size: 0.875rem !important; /* 14px */
	font-weight: 700 !important;
	font-style: normal;
	line-height: 1.4;
	color: var(--kd-color-base) !important; /* white */
	text-transform: uppercase;
	letter-spacing: 0.25px;
	margin-bottom: 0.375rem !important; /* ~6px date → title */
	text-decoration: none;
}

/* ── Heading — h3, Montserrat Black 26px, white ────────────────────────────── */

.kd-2up-card__heading {
	font-family: var(--kd-font-heading) !important;
	font-weight: var(--kd-fw-heading) !important; /* 900 / Black */
	font-size: 1.625rem !important; /* 26px */
	line-height: 1.31 !important; /* 34/26 — Figma */
	letter-spacing: 0.25px;
	color: var(--kd-color-base) !important; /* white */
	margin-bottom: var(--kd-gap-tight) !important; /* 8px heading → excerpt */
}

/* ── Excerpt — white, 16px Regular ─────────────────────────────────────────── */

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

/* ── CTA button — filled primary pill ───────────────────────────────────────── */

/* CTA row — the "Event Details" button + an optional "extra link" sit side by side
   (Figma 177:3656). 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(--kd-space-md); /* 24px button → link */
	margin-top: auto;
}

/* Primary button — filled primary pill. Colour from the markup
   (.has-primary-background-color + .has-base-color); this owns the pill + type. */
.kd-2up-card__btn {
	margin: 0 !important;
}

.kd-2up-card__btn .wp-block-button__link {
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	font-size: 0.9375rem; /* 15px */
	line-height: 1.6;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	border-radius: 200px; /* full pill */
	padding: 0.5rem 1.5rem;
}

/* Extra link — the per-event custom CTA, shown beside the button. White uppercase
   Montserrat Black with a 3px white underline (Figma 223:2080). 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(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	font-size: 0.9375rem; /* 15px */
	line-height: 1.33;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	color: var(--kd-color-base); /* white */
	text-decoration: none;
	border-bottom: 3px solid var(--kd-color-base); /* white underline */
	padding-bottom: 2px;
	transition: opacity var(--kd-transition-fast);
}

.kd-2up-card__link-secondary a:hover,
.kd-2up-card__link-secondary a:focus-visible {
	opacity: 0.85;
}

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

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

	.kd-2up-section .kd-2up-section__heading {
		font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
	}
}

/* ── 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;
	}

	.kd-2up-section .kd-2up-section__heading {
		font-size: clamp(1.5rem, 6vw, 2rem) !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 primary colour) for the band. */
.kd-2up-carousel .kd-carousel__dots {
	display: none;
}

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

.kd-2up-carousel .kd-carousel__dot.is-active {
	background-color: var(--kd-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(--kd-gap-normal); /* 12px when stacked */
	}
}