/* ============================================================
   VertiDesk Curtain Slider Pro for Divi  –  Front-End Styles
   ------------------------------------------------------------
   Author:    Vinod Rawat <hello@vertidesk.com>
   Website:   https://vertidesk.com
   Version:   2.1.0
   License:   GPL-2.0+
   ------------------------------------------------------------
   ARCHITECTURE:
   • .vds-bg-a / .vds-bg-b  — two real divs for true crossfade.
     JS swaps opacity between them; no pseudo-element hacks.
   • .vds-overlay            — dark tint; colour set per-slide
     via an injected <style> scoped to the slider ID.
   • .vds-content-inner      — text layer, z-index 3.
   • Animation class on .vds-curtain-slider drives transitions:
     vds-anim-crossfade | vds-anim-slide | vds-anim-zoom |
     vds-anim-curtain
   ============================================================ */

/* ── Slider container ─────────────────────────────────────── */
.vds-curtain-slider {
	--vds-height:     500px;
	--vds-transition: 800ms;   /* JS overrides per animation */
	width: 100%;
	position: relative;
	overflow: hidden;
	font-family: inherit;
}

.vds-curtain-slider *,
.vds-curtain-slider *::before,
.vds-curtain-slider *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ── Flex shell ───────────────────────────────────────────── */
.vds-slider-wrapper {
	display: flex;
	width: 100%;
	height: var(--vds-height);
	overflow: hidden;
}

/* ── Main content panel ───────────────────────────────────── */
.vds-content-area {
	flex: 1.25;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ── Background layers — the true crossfade engine ───────── */
/*
 * Two sibling divs sit at position:absolute inset:0.
 * Active layer = opacity 1, inactive = opacity 0.
 * JS swaps which is "active" on each transition.
 * Both carry the same background-size/repeat settings.
 */
.vds-bg-a,
.vds-bg-b {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	will-change: opacity;
}

/* Crossfade — smooth opacity swap */
.vds-anim-crossfade .vds-bg-a,
.vds-anim-crossfade .vds-bg-b {
	transition: opacity var(--vds-transition, 800ms) ease;
}

/* Zoom — crossfade + Ken Burns on incoming layer */
.vds-anim-zoom .vds-bg-a,
.vds-anim-zoom .vds-bg-b {
	transition: opacity var(--vds-transition, 800ms) ease,
	            transform calc(var(--vds-transition, 800ms) + 3000ms) ease;
}
.vds-anim-zoom .vds-bg-a.vds-bg-active,
.vds-anim-zoom .vds-bg-b.vds-bg-active {
	animation: vds-kenburns calc(var(--vds-transition, 800ms) + 4000ms) ease forwards;
}
@keyframes vds-kenburns {
	from { transform: scale(1);    }
	to   { transform: scale(1.08); }
}

/* Slide — incoming bg slides in from right */
.vds-anim-slide .vds-bg-a,
.vds-anim-slide .vds-bg-b {
	transition: opacity var(--vds-transition, 800ms) ease,
	            transform var(--vds-transition, 800ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.vds-anim-slide .vds-bg-a.vds-bg-entering,
.vds-anim-slide .vds-bg-b.vds-bg-entering {
	transform: translateX(6%);
}

/* Curtain — new bg reveals from left like a curtain opening */
.vds-anim-curtain .vds-bg-a,
.vds-anim-curtain .vds-bg-b {
	transition: clip-path var(--vds-transition, 800ms) cubic-bezier(0.77, 0, 0.18, 1),
	            opacity 0ms 0ms; /* instant — clip-path drives reveal */
}
.vds-anim-curtain .vds-bg-a.vds-bg-entering,
.vds-anim-curtain .vds-bg-b.vds-bg-entering {
	clip-path: inset(0 100% 0 0); /* hidden, right edge to right edge */
}
.vds-anim-curtain .vds-bg-a.vds-bg-active,
.vds-anim-curtain .vds-bg-b.vds-bg-active {
	clip-path: inset(0 0% 0 0);   /* fully revealed */
}

/* ── Overlay — colour driven per-slide via injected <style> ─ */
.vds-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45); /* default; overridden per-slide */
	z-index: 1;
	transition: background 600ms ease;
}

/* ── Text content layer ───────────────────────────────────── */
.vds-content-inner {
	position: relative;
	z-index: 3;
	max-width: 540px;
	padding: 56px 64px;
	/* justify-content set per-slide by JS */
}

/* Title */
/* Title — targets whichever heading tag the user chose (h1–h6) */
.vds-content-inner h1,
.vds-content-inner h2,
.vds-content-inner h3,
.vds-content-inner h4,
.vds-content-inner h5,
.vds-content-inner h6 {
	font-family:     var(--vds-title-font,      inherit)     !important;
	color:           var(--vds-title-color,     #ffffff)     !important;
	font-size:       var(--vds-title-size,      36px)        !important;
	font-weight:     var(--vds-title-weight,    700)         !important;
	font-style:      var(--vds-title-style,     normal)      !important;
	text-decoration-line:  var(--vds-title-deco,            none)         !important;
	text-decoration-style: var(--vds-title-deco-style,         solid)        !important;
	text-decoration-color: var(--vds-title-deco-color,   currentColor)       !important;
	text-transform:  var(--vds-title-transform, none)        !important;
	text-align:      var(--vds-title-align,     left)        !important;
	line-height:     var(--vds-title-lh,        1.2em)       !important;
	letter-spacing:  var(--vds-title-ls,        0px)         !important;
	text-shadow:     var(--vds-title-shadow,    none)        !important;
	margin-bottom: 14px !important;
}

/* Description */
.vds-content-inner p {
	font-family:     var(--vds-desc-font,      inherit)     !important;
	color:           var(--vds-desc-color,     #ffffff)     !important;
	font-size:       var(--vds-desc-size,      17px)        !important;
	font-weight:     var(--vds-desc-weight,    400)         !important;
	font-style:      var(--vds-desc-style,     normal)      !important;
	text-decoration-line:  var(--vds-desc-deco,             none)         !important;
	text-decoration-style: var(--vds-desc-deco-style,          solid)        !important;
	text-decoration-color: var(--vds-desc-deco-color,    currentColor)       !important;
	text-transform:  var(--vds-desc-transform, none)        !important;
	text-align:      var(--vds-desc-align,     left)        !important;
	line-height:     var(--vds-desc-lh,        1.65em)      !important;
	letter-spacing:  var(--vds-desc-ls,        0px)         !important;
	text-shadow:     var(--vds-desc-shadow,    none)        !important;
	max-width: 420px;
}

/* ── Text entrance animations ─────────────────────────────── */
@keyframes vds-text-rise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: translateY(0);    }
}
@keyframes vds-text-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes vds-text-slide {
	from { opacity: 0; transform: translateX(-28px); }
	to   { opacity: 1; transform: translateX(0);     }
}

/* Default text entrance (crossfade + zoom use rise) */
.vds-anim-crossfade .vds-content-inner.vds-text-enter,
.vds-anim-zoom      .vds-content-inner.vds-text-enter {
	animation: vds-text-rise 550ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Slide uses matching horizontal enter */
.vds-anim-slide .vds-content-inner.vds-text-enter {
	animation: vds-text-slide 550ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Curtain uses simple fade */
.vds-anim-curtain .vds-content-inner.vds-text-enter {
	animation: vds-text-fade 450ms ease forwards;
	animation-delay: 200ms;
	opacity: 0;
}

/* Text exit — quick fade out */
@keyframes vds-text-exit {
	from { opacity: 1; transform: translateY(0);   }
	to   { opacity: 0; transform: translateY(-8px); }
}
.vds-content-inner.vds-text-exit {
	animation: vds-text-exit 220ms ease forwards;
	pointer-events: none;
}

/* ── Thumbnail strip panel area ───────────────────────────── */
.vds-panel-area {
	display: flex;
	flex-direction: row;
	flex: 0 0 38%;
	width: 38%;
}

/* Individual strip */
.vds-panel {
	flex: 1;
	position: relative;
	background-size: cover;
	background-position: center center;
	cursor: pointer;
	overflow: hidden;
	transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	min-width: 0;
	outline: none;
}

/* Strip overlay */
.vds-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.32);
	transition: background 0.3s ease;
	z-index: 0;
}
.vds-panel:hover::before,
.vds-panel:focus::before {
	background: rgba(0,0,0,0.10);
}

/* Caption label */
.vds-panel::after {
	content: attr(data-caption);
	position: absolute;
	bottom: 16px;
	left: 6px;
	right: 6px;
	font-family:     var(--vds-caption-font,      inherit);
	color:           var(--vds-caption-color,     #ffffff);
	font-size:       var(--vds-caption-size,      12px);
	font-weight:     var(--vds-caption-weight,    600);
	font-style:      var(--vds-caption-style,     normal);
	text-decoration-line:  var(--vds-caption-deco,          none);
	text-decoration-style: var(--vds-caption-deco-style,      solid);
	text-decoration-color: var(--vds-caption-deco-color, currentColor);
	text-transform:  var(--vds-caption-transform, uppercase);
	text-align:      var(--vds-caption-align,     center);
	background:      var(--vds-caption-bg,        rgba(0,0,0,0.55));
	letter-spacing:  var(--vds-caption-ls,        0.05em);
	text-shadow:     var(--vds-caption-shadow,    none);
	padding: 5px 7px;
	border-radius: 5px;
	z-index: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Hover expand */
.vds-panel:hover,
.vds-panel:focus {
	flex: 1.22;
}

/* ── Responsive: Tablet ≤ 900px ──────────────────────────── */
@media (max-width: 900px) {
	.vds-slider-wrapper {
		flex-direction: column;
		height: auto;
		min-height: var(--vds-height);
	}
	.vds-content-area {
		flex: none;
		width: 100%;
		min-height: 55%;
	}
	.vds-content-inner {
		padding: 36px 32px;
		max-width: 100%;
	}
	.vds-panel-area {
		flex: none;
		width: 100%;
		height: 130px;
	}
	.vds-panel::after {
		bottom: 10px;
		padding: 4px 5px;
	}
}

/* ── Responsive: Mobile ≤ 600px ──────────────────────────── */
@media (max-width: 600px) {
	.vds-content-inner {
		padding: 26px 20px;
		min-height: 200px;
	}
	.vds-content-inner h1,
	.vds-content-inner h2,
	.vds-content-inner h3,
	.vds-content-inner h4,
	.vds-content-inner h5,
	.vds-content-inner h6 {
		font-size: max(18px, calc(var(--vds-title-size, 36px) * 0.62)) !important;
		margin-bottom: 10px !important;
	}
	.vds-content-inner p {
		font-size: max(13px, calc(var(--vds-desc-size, 17px) * 0.85)) !important;
	}
	.vds-panel-area {
		height: 86px;
	}
	.vds-panel::after {
		font-size: 10px;
		bottom: 8px;
		padding: 3px 4px;
		letter-spacing: 0;
	}
}

/* ── Responsive: Large ≥ 1400px ──────────────────────────── */
@media (min-width: 1400px) {
	.vds-content-inner {
		padding: 72px 80px;
	}
}

/* ── Divi VB empty-state placeholder ─────────────────────── */
.vds-vb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 200px;
	background: #f5f5f5;
	border: 2px dashed #ccc;
	color: #999;
	font-family: sans-serif;
	font-size: 14px;
}

/* ── Reduced-motion: respect user preference ─────────────── */
@media (prefers-reduced-motion: reduce) {
	.vds-bg-a,
	.vds-bg-b,
	.vds-overlay,
	.vds-panel,
	.vds-content-inner {
		transition-duration: 0ms !important;
		animation-duration:  0ms !important;
		animation-delay:     0ms !important;
	}
}