/**
 * PPB Core — image gallery slider.
 * Block: ppb-gallery
 * Depends on: splide-core.min.css (structural), ppb-core-tokens
 *
 * Layout: Splide track first, then `.ppb-gallery__nav` below (nav re-used by featured-events
 * with different placement — see featured-events.css).
 */

/* ─── Outer wrapper ─────────────────────────────────────────────────────── */

.ppb-gallery {
	margin: 0;
	/* Align with main vertical rhythm; staggered slides read “tight” without extra air above. */
	padding-block-start: var(--ppb-space-main-gap, clamp(2rem, 5vw, 4rem));
	overflow: hidden; /* keep slides from bleeding outside page width */
	/* Stops horizontal overscroll from chaining to browser back/forward (Chromium/WebKit). */
	overscroll-behavior-x: none;
}

/* ─── Track ─────────────────────────────────────────────────────────────── */

.ppb-gallery__track {
	/* Remove Splide's default overflow so partial slides bleed to viewport edge */
	overflow: visible;
	/* Extra top room: wave offsets read upward; balance with standard stack end padding */
	padding-block-start: clamp(2.25rem, 4.5vw, 3.75rem);
	padding-block-end: clamp(2rem, 4vw, 3.5rem);
	overscroll-behavior-x: none;
}

.ppb-gallery__track .splide__track {
	overflow: visible;
}

/* ─── Slides ────────────────────────────────────────────────────────────── */

.ppb-gallery__slide {
	/* Fixed height; width is auto so portrait/landscape both work */
	height: clamp(280px, 40vw, 480px);
	width: auto;
	flex-shrink: 0;
	border-radius: var(--ppb-radius-card, 0.75rem);
	overflow: hidden;
	transition: transform 0.3s ease;
}

.ppb-gallery__img {
	display: block;
	height: 100%;
	width: auto;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
}

/* ─── Stagger offsets ───────────────────────────────────────────────────── */
/*
 * Three-position cycle gives a gentle wave:
 * 0 = neutral, 1 = shifted down, 2 = shifted up
 */

.ppb-gallery__slide--stagger-0 {
	transform: translateY(0);
}

.ppb-gallery__slide--stagger-1 {
	transform: translateY(clamp(1.5rem, 3vw, 2.5rem));
}

.ppb-gallery__slide--stagger-2 {
	transform: translateY(clamp(-1rem, -2vw, -1.75rem));
}

/* ─── Navigation row (shared chrome for featured-events — same classes, different layout) ─ */

.ppb-gallery__nav {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	/* Space below track — pair with featured-events `row-gap` when nav is above the track */
	margin-block-start: var(--ppb-space-stack-lg, 2rem);
	padding-block: var(--ppb-space-stack-sm, 1rem);
	padding-inline: var(--ppb-space-stack-md, 1.5rem);
	max-width: 72rem;
	margin-inline: auto;
}

/* ─── Prev / Next buttons ───────────────────────────────────────────────── */

.ppb-gallery__nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--font-body, inherit);
	font-size: var(--ppb-text-xs, 0.75rem);
	font-weight: var(--ppb-font-weight-display-soft, 600);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ppb-color-text-muted, #333);
	transition:
		color var(--ppb-transition-fast),
		transform var(--ppb-transition-fast);
	flex-shrink: 0;
}

.ppb-gallery__nav-btn:hover,
.ppb-gallery__nav-btn:focus-visible {
	color: var(--color-secondary, #1E374B);
	transform: translateY(-1px);
}

.ppb-gallery__nav-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.ppb-gallery__nav-btn svg {
	display: block;
	flex-shrink: 0;
}

/* ─── Progress bar ──────────────────────────────────────────────────────── */

.ppb-gallery__progress-track {
	flex: 1;
	height: 2px;
	background: var(--ppb-color-border-subtle, rgba(0, 0, 0, 0.12));
	border-radius: 1px;
	overflow: hidden;
}

.ppb-gallery__progress-bar {
	height: 100%;
	background: var(--color-secondary, #8b7355);
	border-radius: 1px;
	width: 0%;
	transition: width 0.3s ease;
}

/* ─── Variant: rooms ─────────────────────────────────────────────────────
 * Fixed 6/4 aspect slides, full-width single slide, nav overlaid on image,
 * light nav/progress on dark gradient.
 */

.ppb-image-gallery--rooms {
	padding: 0;
}

.ppb-image-gallery--rooms .ppb-gallery {
	position: relative;
	padding: 0;
	margin: 0;
}

.ppb-image-gallery--rooms .ppb-gallery__track {
	width: 100%;
	padding-block-start: 0;
	padding-block-end: 0;
}

.ppb-image-gallery--rooms .splide__slide {
	width: 100%;
	aspect-ratio: 6 / 4;
	overflow: hidden;
}

.ppb-image-gallery--rooms .ppb-gallery__slide {
	height: auto;
	width: 100%;
	border-radius: 0;
}

.ppb-image-gallery--rooms .ppb-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ppb-image-gallery--rooms .ppb-gallery__nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--ppb-space-stack-md) clamp(1rem, 3vw, 1.5rem);
	margin: 0;
	margin-block-start: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
	z-index: 2;
}

.ppb-image-gallery--rooms .ppb-gallery__nav-btn {
	color: var(--ppb-color-footer-fg);
}

.ppb-image-gallery--rooms .ppb-gallery__nav-btn:hover,
.ppb-image-gallery--rooms .ppb-gallery__nav-btn:focus-visible {
	color: var(--ppb-color-footer-fg);
	opacity: 0.85;
}

.ppb-image-gallery--rooms .ppb-gallery__nav-btn:disabled {
	opacity: 0.4;
}

.ppb-image-gallery--rooms .ppb-gallery__progress-track {
	background: rgba(255, 255, 255, 0.3);
}

.ppb-image-gallery--rooms .ppb-gallery__progress-bar {
	background: var(--ppb-color-footer-fg);
}