/**
 * PPB Core — featured events slider.
 * Block: ppb-featured-events
 *
 * Splide + prev/next/progress uses the same markup hooks as the image gallery (`.ppb-gallery__nav`,
 * `.ppb-gallery__nav-btn`, `.ppb-gallery__progress-*` — see image-gallery.css).
 *
 * Layout differs from `.ppb-gallery`: there the track comes first and nav sits *below* the strip;
 * here a two-column grid puts nav in row 1 / column 2 *above* the carousel so the intro column
 * can align with the card tops. Reset gallery nav margins here — the grid `row-gap` replaces
 * `.ppb-gallery__nav`’s `margin-block-start` (space between track and nav in the gallery).
 *
 * Top spacing: match `.ppb-gallery` — `padding-block-start: var(--ppb-space-main-gap)` on the
 * section (in addition to `.ppb-site-main > * + *` margin between siblings).
 *
 * ≤48rem: prev/next + progress bar hidden; cards use drag, swipe, wheel, and keyboard only.
 */

/* ─── Layout ────────────────────────────────────────────────────────────── */

.ppb-featured-events {
	margin: 0;
	padding-block-start: var(--ppb-space-main-gap, clamp(2rem, 5vw, 4rem));
	/*
	 * Same as `.ppb-gallery`: clip the Splide strip + full-bleed track margin so the document
	 * does not gain a horizontal scrollbar (`.splide__track` stays overflow:visible for partial slides).
	 */
	overflow: hidden;
	/* Match image gallery: horizontal wheel/trackpad gestures don’t chain to browser back/forward. */
	overscroll-behavior-x: none;
}

.ppb-featured-events__inner {
	display: grid;
	grid-template-columns: clamp(220px, 26%, 320px) minmax(0, 1fr);
	column-gap: clamp(2rem, 5vw, 4rem);
	/* Match gallery: nav↔track spacing uses --ppb-space-stack-lg (see .ppb-gallery__nav margin-block-start) */
	row-gap: var(--ppb-space-stack-lg, 2rem);
	align-items: start;
	padding: 0;
}

/* Intro + cards share row 2; nav sits row 1 only in column 2 (above cards). */
.ppb-featured-events__intro {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding-inline-start: var(--ppb-home-wrap-padding-inline, 1.5rem);
	max-width: 22rem;
	min-width: 0;
}

/*
 * Nav shares .ppb-gallery__nav rules; reset margins that assume nav-below-track.
 * Keep flex/gap/padding in sync with image-gallery nav row.
 */
.ppb-featured-events .ppb-featured-events__nav.ppb-gallery__nav {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	align-self: start;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	width: 100%;
	max-width: 37.5rem; /* 600px — nav bar width cap; gallery uses 72rem centred */
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: auto;
	margin-inline-end: var(--ppb-home-wrap-padding-inline, 1.5rem);
	padding-block: var(--ppb-space-stack-sm, 1rem);
	padding-inline: 0;
}

.ppb-featured-events__slider-wrap {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	/* Section is overflow:hidden; room so card hover box-shadow isn’t clipped at the bottom. */
	padding-block-end: 1rem;
}

/* Narrow column: slightly smaller display title; neutral text — not venue primary (ACF). */
.ppb-featured-events__intro .ppb-section-heading__title {
	font-size: clamp(1.5rem, 2.5vw, var(--ppb-text-3xl, 1.875rem));
	line-height: 1.15;
	color: var(--ppb-color-text, #1a1a1a);
}

.ppb-featured-events .ppb-gallery__progress-track {
	min-width: 4rem;
	flex: 1;
}

/* ─── Intro ─────────────────────────────────────────────────────────────── */

.ppb-featured-events__description {
	color: var(--ppb-color-text-muted, #333);
	font-size: var(--ppb-text-base, 1rem);
	line-height: 1.6;
}

/* ─── Splide track (flush viewport right — partial next card) ───────────── */

.ppb-featured-events__track {
	overflow: visible;
	width: 100%;
	margin-inline-end: calc(50% - 50vw);
	padding-inline-end: max(env(safe-area-inset-right, 0px), 0px);
	overscroll-behavior-x: none;
}

.ppb-featured-events__track .splide__track {
	overflow: visible;
}

.ppb-featured-events__track .splide__list {
	align-items: stretch;
}

.ppb-featured-events__slide {
	display: flex;
	height: auto;
}

.ppb-featured-events__slide .ppb-event-card {
	width: 100%;
	max-width: none;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 48rem) {
	.ppb-featured-events__inner {
		grid-template-columns: 1fr;
		padding-inline: 0;
	}

	.ppb-featured-events__intro {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
		max-width: none;
		padding-inline: var(--ppb-home-wrap-padding-inline, 1.5rem);
	}

	.ppb-featured-events .ppb-featured-events__nav--top.ppb-gallery__nav {
		display: none;
	}

	.ppb-featured-events__slider-wrap {
		grid-column: 1;
		grid-row: 2;
		padding-inline: var(--ppb-home-wrap-padding-inline, 1.5rem);
		padding-inline-end: max(env(safe-area-inset-right, 0px), var(--ppb-home-wrap-padding-inline, 1.5rem));
	}

	.ppb-featured-events__track {
		margin-inline-end: 0;
		padding-inline-end: 0;
	}
}