/**
 * Showroom slider — vanilla CSS, no framework.
 *
 * Layout is designed for TV displays (1920×1080+). All sizes use clamp()
 * so the layout scales gracefully from a desktop preview down to a TV.
 *
 * @since 1.0.0
 */

/* =============================================================================
 * Custom properties (themed)
 * ========================================================================== */

.keplervo-showroom {
	--ks-bg: #0a0a0a;
	--ks-fg: #ffffff;
	--ks-fg-muted: rgba(255, 255, 255, 0.72);
	--ks-accent: #4da6fd;
	--ks-error-bg: rgba(220, 50, 50, 0.92);
	--ks-card-bg: rgba(255, 255, 255, 0.04);
	--ks-divider: rgba(255, 255, 255, 0.12);

	--ks-slide-transition: 600ms cubic-bezier(0.22, 1, 0.36, 1);
	--ks-photo-transition: 800ms ease-in-out;
}

.keplervo-showroom--light {
	--ks-bg: #f5f5f5;
	--ks-fg: #0a0a0a;
	--ks-fg-muted: rgba(10, 10, 10, 0.72);
	--ks-accent: #4da6fd;
	--ks-card-bg: rgba(10, 10, 10, 0.04);
	--ks-divider: rgba(10, 10, 10, 0.12);
}

/* =============================================================================
 * Container
 * ========================================================================== */

body.page-id-2663 #cmplz-manage-consent {
	display: none !important;
}

.keplervo-showroom {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: var(--ks-bg);
	color: var(--ks-fg);
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, sans-serif;
	line-height: 1.2;
	user-select: none;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

.keplervo-showroom *,
.keplervo-showroom *::before,
.keplervo-showroom *::after {
	box-sizing: inherit;
}

/* Embedded variant: when the shortcode is placed inside a normal template
   (theme header/footer present), the container can't fill the viewport. */
.keplervo-showroom--embedded {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* =============================================================================
 * Loader
 * ========================================================================== */

.keplervo-showroom__loader {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	z-index: 10;
	background: var(--ks-bg);
	transition: opacity 400ms ease;
}

.keplervo-showroom__loader[hidden] {
	display: none;
}

.keplervo-showroom__spinner {
	width: 64px;
	height: 64px;
	border: 4px solid var(--ks-divider);
	border-top-color: var(--ks-accent);
	border-radius: 50%;
	animation: keplervo-ks-spin 1s linear infinite;
}

.keplervo-showroom__loader-text {
	font-size: clamp(16px, 1.4vw, 24px);
	color: var(--ks-fg-muted);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

@keyframes keplervo-ks-spin {
	to {
		transform: rotate(360deg);
	}
}

/* =============================================================================
 * Error banner
 * ========================================================================== */

.keplervo-showroom__error {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 9;
	max-width: 80%;
	padding: 12px 24px;
	background: var(--ks-error-bg);
	color: #ffffff;
	font-size: clamp(14px, 1.2vw, 20px);
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.keplervo-showroom__error[hidden] {
	display: none;
}

/* =============================================================================
 * Stage (slides container)
 * ========================================================================== */

.keplervo-showroom__stage {
	position: absolute;
	inset: 0;
}

/* =============================================================================
 * Slide — base
 * ========================================================================== */

.slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translateX(100%);
	transition:
		opacity var(--ks-slide-transition),
		transform var(--ks-slide-transition);
	will-change: opacity, transform;
}

.slide.is-active {
	opacity: 1;
	transform: translateX(0);
}

.slide.is-leaving {
	opacity: 0;
	transform: translateX(-100%);
}

/* =============================================================================
 * Slide — vehicle
 * ========================================================================== */

.slide--vehicle {
	display: grid;
	grid-template-columns: 60% 40%;
	grid-template-rows: 100%;
}

.slide__photos {
	position: relative;
	overflow: hidden;
	background: #000;
}

.slide__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--ks-photo-transition);
}

.slide__photo.is-active {
	opacity: 1;
}

.slide__info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(24px, 3vw, 64px);
	gap: clamp(16px, 2vw, 32px);
	background: var(--ks-bg);
	overflow: hidden;
}

.slide__header {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 0.8vw, 16px);
}

.slide__title {
	margin: 0;
	font-size: clamp(48px, 5vw, 96px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ks-fg);
	word-break: break-word;
}

.slide__version {
	margin: 0;
	font-size: clamp(42px, 2.3vw, 70px);
	color: var(--ks-fg-muted);
	font-weight: 400;
	line-height: 1.3;
}

.slide__year {
	margin: 0;
	font-size: clamp(36px, 1.6vw, 64px);
	color: var(--ks-fg-muted);
	letter-spacing: 0.1em;
}

.slide__price {
	font-size: clamp(56px, 6vw, 120px);
	font-weight: 800;
	line-height: 1;
	color: var(--ks-accent);
	letter-spacing: -0.02em;
}

.slide__price-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
}

.slide__price-ht {
	margin-left: 0.5em;
	font-size: clamp(20px, 2vw, 38px);
	font-weight: 600;
	font-style: italic;
	line-height: 1;
	color: #9aa0a6;
}

.slide__specs {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 0.8vw, 14px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.slide__specs li::marker,
.slide__options li::marker {
	content: "";
}

.slide__spec {
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: clamp(28px, 2.5vw, 48px);
	color: var(--ks-fg);
	font-weight: 500;
}

.slide__spec-label {
	color: var(--ks-fg-muted);
	font-size: 0.6em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	flex-shrink: 0;
	min-width: 4em;
}

.slide__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.slide__option {
	list-style: none;
	padding: clamp(4px, 0.4vw, 8px) clamp(8px, 0.8vw, 14px);
	background: var(--ks-card-bg);
	border: 1px solid var(--ks-divider);
	border-radius: 999px;
	font-size: clamp(20px, 1.8vw, 32px);
	color: var(--ks-fg);
	white-space: nowrap;
}

/* Portrait fallback: stack photo on top, info below. */
@media (orientation: portrait) {
	.slide--vehicle {
		grid-template-columns: 100%;
		grid-template-rows: 50% 50%;
	}
}

/* =============================================================================
 * Slide — promo
 * ========================================================================== */

.slide--promo {
	background: #000;
}

.slide__promo-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slide__promo-label {
	position: absolute;
	left: 24px;
	bottom: 24px;
	padding: 8px 16px;
	background: rgba(0, 0, 0, 0.65);
	color: #ffffff;
	font-size: clamp(14px, 1.2vw, 22px);
	border-radius: 4px;
	backdrop-filter: blur(4px);
}

/* =============================================================================
 * Empty state slide (no vehicles available)
 * ========================================================================== */

.slide--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ks-bg);
}

.slide--empty .slide__empty-message {
	font-size: clamp(32px, 3vw, 64px);
	color: var(--ks-fg-muted);
	text-align: center;
	padding: 0 32px;
}

/* =============================================================================
 * Reduced motion
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.slide {
		transform: none !important;
		transition: opacity 250ms ease !important;
	}
	.slide.is-active {
		transform: none;
	}
	.slide.is-leaving {
		transform: none;
	}
	.slide__photo {
		transition: opacity 250ms ease;
	}
	.keplervo-showroom__spinner {
		animation: none;
		border-top-color: transparent;
	}
}

/* =============================================================================
 * Fullscreen API native cleanup
 * ========================================================================== */

.keplervo-showroom:fullscreen {
	width: 100vw;
	height: 100vh;
}

.keplervo-showroom:fullscreen .keplervo-showroom--embedded {
	aspect-ratio: auto;
}