/* ============================================================
   kzs-veranstaltung-slider.css
   Two-row staircase escalator slider
   [kzs_veranstaltung_slider]        — both rows left
   [kzs_veranstaltung_slider_mirror] — row1 left, row2 right
   ============================================================ */

/* ── Defaults ── */
:root {
	--kzs-vs-speed      : 80s;
	--kzs-vs-gap        : 20px;
	--kzs-vs-card-w     : 20vw;
	--kzs-vs-card-h     : 560px;
	--kzs-vs-card-radius: 0px;
	--kzs-vs-row-gap    : 20px;                               /* vertical gap between rows */
	--kzs-vs-stair-drop : calc( var( --kzs-vs-card-h ) * 0.80 ); /* total Y range left→right */
	--kzs-slide-hover-y : 0px;                                /* cursor repulsion offset, set per-slide by JS */
}

/* ── Wrapper ── */
.kzs-vs-wrap {
	width    : 100%;
	overflow : hidden;
	position : relative;
	z-index  : 10; /* sits above [kzs_svg] which uses no explicit z-index */
	/* top padding + enough bottom space for both rows' staircase drops */
	padding  : 24px 0 calc( var( --kzs-vs-stair-drop ) + 48px );	
}

/* ── Rows ── */
.kzs-vs-row {
	overflow: visible;
}

.kzs-vs-row--2 {
	margin-top: var( --kzs-vs-row-gap );
}

/* ── Track ── */
.kzs-vs-track {
	display        : flex;
	flex-direction : row;
	flex-wrap      : nowrap;
	align-items    : flex-start; /* each slide controls its own Y via translateY */
	gap            : var( --kzs-vs-gap );
	width          : max-content;
	will-change    : transform;
	user-select    : none;       /* prevent text selection during drag */
	cursor         : grab;
}

.kzs-vs-track--left {
	animation: kzs-marquee-left var( --kzs-vs-speed ) linear infinite;
}

.kzs-vs-track--right {
	animation: kzs-marquee-right var( --kzs-vs-speed ) linear infinite;
}

/* Clone is transparent to flex layout */
.kzs-vs-clone {
	display: contents;
}

/* ── Pause on hover (not while dragging) ── */
.kzs-vs-wrap:hover:not( .is-dragging ) .kzs-vs-track {
	animation-play-state: paused;
}

/* ── Drag state ── */
.kzs-vs-wrap.is-dragging {
	cursor: grabbing;
}

.kzs-vs-wrap.is-dragging .kzs-vs-track {
	cursor: grabbing;
}

/* ── Slide / Card ── */
.kzs-vs-slide {
	display         : block;
	flex-shrink     : 0;
	width           : var( --kzs-vs-card-w );
	height          : var( --kzs-vs-card-h );
	overflow        : hidden;
	position        : relative;
	text-decoration : none;
	box-shadow      : 0 8px 28px rgba( 0, 0, 0, 0.28 );
	border-radius   : var( --kzs-vs-card-radius );
	z-index         : var( --kzs-slide-z, 1 );
	/* JS sets --kzs-slide-y (staircase) and --kzs-slide-hover-y (cursor repulsion) */
	transform       : translateY( calc( var( --kzs-slide-y, 0px ) + var( --kzs-slide-hover-y, 0px ) ) );
	transition      : box-shadow 0.3s ease, --kzs-slide-hover-y 0s;
}

.kzs-vs-slide:hover {
	transform : translateY( calc( var( --kzs-slide-y, 0px ) + var( --kzs-slide-hover-y, 0px ) ) ) scale( 1 );
	box-shadow: 0 16px 40px rgba( 0, 0, 0, 0.42 );
}

/* Crosshair when hover interaction is enabled */
.kzs-vs-wrap[data-hover="true"] .kzs-vs-track {
	cursor: default;
}

.kzs-vs-wrap[data-hover="true"].is-dragging .kzs-vs-track {
	cursor: grabbing;
}

.kzs-vs-slide img {
	width          : 100%;
	height         : 100%;
	object-fit     : cover;
	display        : block;
	border         : none;
	pointer-events : none; /* prevent browser's native image drag */
}

/* ── Keyframes ── */
@keyframes kzs-marquee-left {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( -50% ); }
}

@keyframes kzs-marquee-right {
	from { transform: translateX( -50% ); }
	to   { transform: translateX( 0 ); }
}

/* ── Reduced motion ── */
@media ( prefers-reduced-motion: reduce ) {
	.kzs-vs-track--left,
	.kzs-vs-track--right {
		animation: none !important;
	}
}

/* ── Responsive ── */
@media ( max-width: 1024px ) {
	:root {
		--kzs-vs-card-w: 28vw;
		--kzs-vs-card-h: 420px;
	}
}

@media ( max-width: 768px ) {
	:root {
		--kzs-vs-card-w   : 160px;
		--kzs-vs-card-h   : 220px;
		--kzs-vs-row-gap  : 12px;
	}
}