/**
 * Stacked Slider - Frontend Styles
 *
 * Key CSS variables (set via Elementor controls):
 *   --stack-gap   : gap between each stacked slide on the LEFT
 *   --next-gap    : gap between the active slide and the peeking slide on the RIGHT
 *   --stack-scale : how much each left-stack slide shrinks per step
 */

.stacked-slider-wrapper {
	--stack-gap: 20px;
	--next-gap: 20px;
	--stack-scale: 0.05;
	--stack-blur: 3px;
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 60px;
}

/* Clip the peeking right slide at the wrapper edge */
.stacked-slider-container {
	position: relative;
	height: 450px;
	overflow: hidden;
}

.stacked-slider-track {
	position: relative;
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------
   Base slide styles
   All slides are positioned at left: 0, width is 75% of container.
   CSS transforms move them into place.
--------------------------------------------------------------- */
.stacked-slider-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 75%;
	height: 100%;
	background-color: #f0f0f0;
	border-radius: 10px;
	box-shadow: none;
	overflow: hidden;
	display: flex;
	flex-direction: column;

	/* Hidden by default — positioned far off-screen to the right */
	opacity: 0;
	transform: translateX(200%);
	z-index: 1;

	/*
	 * z-index 0s 0.5s means:
	 *   - Change z-index instantly (0s duration)
	 *   - But wait until AFTER the move animation ends (0.5s delay)
	 * This stops an outgoing slide from dropping under others mid-animation.
	 */
	transition: transform 0.5s ease-in-out, opacity 0.4s ease-in-out, filter 0.4s ease-in-out, z-index 0s 0.5s;
}

/* ---------------------------------------------------------------
   Image & Content inside each slide
--------------------------------------------------------------- */
.stacked-slider-image {
	width: 100%;
	height: 55%;
	overflow: hidden;
	flex-shrink: 0;
}

.stacked-slider-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.stacked-slider-content {
	padding: 20px;
	overflow: hidden;
}

.stacked-slider-title {
	margin-top: 0;
	margin-bottom: 10px;
}

.stacked-slider-description {
	margin: 0;
}

/* ---------------------------------------------------------------
   SLIDE STATES
--------------------------------------------------------------- */

/* ACTIVE slide — no blur, z-index rises IMMEDIATELY */
.stacked-slider-item.is-active {
	opacity: 1;
	transform: translateX(calc(var(--stack-gap) * 3));
	transition: transform 0.5s ease-in-out, opacity 0.4s ease-in-out, filter 0.4s ease-in-out, z-index 0s 0s;
	z-index: var(--active-z-index, 100);
	filter: none;
}

/* ---------------------------------------------------------------
   LEFT STACK — slides before the active slide.
   Each step back: shift further left & scale down.
--------------------------------------------------------------- */
.stacked-slider-item.is-prev-1 {
	opacity: 1;
	transform: translateX(calc(var(--stack-gap) * 2)) scale(calc(1 - var(--stack-scale) * 1));
	z-index: 40;
	filter: blur(var(--stack-blur));
}

.stacked-slider-item.is-prev-2 {
	opacity: 1;
	transform: translateX(calc(var(--stack-gap) * 1)) scale(calc(1 - var(--stack-scale) * 2));
	z-index: 30;
	filter: blur(calc(var(--stack-blur) * 1.5));
}

.stacked-slider-item.is-prev-3 {
	opacity: 1;
	transform: translateX(0) scale(calc(1 - var(--stack-scale) * 3));
	z-index: 20;
	filter: blur(calc(var(--stack-blur) * 2));
}

/* Slides deeper in the left stack */
.stacked-slider-item.is-prev-older {
	opacity: 0.4;
	transform: translateX(calc(var(--stack-gap) * -1)) scale(calc(1 - var(--stack-scale) * 4));
	z-index: 10;
	filter: blur(calc(var(--stack-blur) * 2.5));
}

/* ---------------------------------------------------------------
   RIGHT PEEK — full size, no blur (same treatment as active)
--------------------------------------------------------------- */
.stacked-slider-item.is-next-1 {
	opacity: 1;
	transform: translateX(calc(var(--stack-gap) * 3 + 100% + var(--next-gap)));
	z-index: 5;
	filter: none;
}

/* Slides further right — hidden completely off screen */
.stacked-slider-item.is-next-2,
.stacked-slider-item.is-next-3,
.stacked-slider-item.is-next-newer {
	opacity: 0;
	transform: translateX(200%);
	z-index: 1;
}

/* ---------------------------------------------------------------
   NAVIGATION BUTTONS
--------------------------------------------------------------- */
.stacked-slider-nav {
	position: absolute;
	bottom: 0;
	/* Align nav below the active slide center */
	left: calc(var(--stack-gap) * 3);
	width: 75%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
}

.stacked-slider-nav button {
	background-color: #e8e8e8;
	border: none;
	border-radius: 6px;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.25s, box-shadow 0.25s, border-color 0.25s, color 0.25s;
	flex-shrink: 0;
}

.stacked-slider-nav button:hover {
	background-color: #d5d5d5;
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.stacked-slider-nav button:focus {
	outline: 2px solid #aaa;
	outline-offset: 2px;
}

.stacked-slider-nav button svg {
	width: 18px;
	height: 18px;
	/* color is controlled via Elementor — do not hardcode here */
	display: block;
	transition: color 0.25s;
}

/* ---------------------------------------------------------------
   PREVENT ANIMATION ON LOAD
--------------------------------------------------------------- */
.stacked-slider-wrapper:not(.is-initialized) .stacked-slider-item {
	transition: none !important;
}