/* ============================================================
   VertiDesk Curtain Slider Pro for Divi  –  Front-End Styles
   ------------------------------------------------------------
   Author:    Vinod Rawat <hello@vertidesk.com>
   Website:   https://vertidesk.com
   Version:   2.4.0
   License:   GPL-2.0+
   ------------------------------------------------------------
   LAYOUT 1 — curtain
     Large main panel left + thumbnail strips right.
   LAYOUT 2 — centre_focus
     All slides as full-height panels; active one expands.
   LAYOUT 3 — stage
     1 prev panel left | MAIN fixed at pos 2 | next panels right.
     Navigation rotates a circular slides array.
   ============================================================ */

/* ── Slider container ─────────────────────────────────────── */
.vdsp-curtain-slider {
	--vds-height:     500px;
	--vds-transition: 800ms;
	width: 100%;
	position: relative;
	/* overflow:visible so per-slide box-shadow, border, and border-radius
	   are not clipped by the container. Each panel handles its own clipping. */
	overflow: visible;
	font-family: inherit;
}

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

/* ── Flex shell (shared by all layouts) ───────────────────── */
.vds-slider-wrapper {
	display: flex;
	width: 100%;
	height: var(--vds-height);
	/* overflow:visible so per-slide box-shadow and border-radius are not clipped */
	overflow: visible;
	/* slide gap — set from parent module "Gap Between Slides" field */
	gap: var(--vds-slide-gap, 0px);
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT 1 — CURTAIN (main left, strips right)
   ═══════════════════════════════════════════════════════════ */

.vds-content-area {
	flex: 1.25;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ── Background layers ────────────────────────────────────── */
.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 */
.vds-anim-crossfade .vds-bg-a,
.vds-anim-crossfade .vds-bg-b {
	transition: opacity var(--vds-transition, 800ms) ease;
}

/* Zoom — Ken Burns */
.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 */
.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 */
.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;
}
.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);
}
.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);
}

/* ── Overlay ──────────────────────────────────────────────── */
.vds-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 1;
	transition: background 600ms ease;
}

/* ── Text content ─────────────────────────────────────────── */
/* Placeholder divs output by child render() to anchor Divi VB font sliders.
 * Must be invisible on front end and in the VB canvas. */
.vdsp-slide-placeholder {
	display: none !important;
	visibility: hidden !important;
	position: absolute !important;
	pointer-events: none !important;
}

.vds-content-inner {
	position: relative;
	z-index: 3;
	max-width: 540px;
	padding: 24px 32px; /* default; overridden by per-slide Spacing panel */
	overflow: visible;
}

.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-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;
}

.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-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);     }
}

/* These selectors work for both Layout 1 and Layout 3 since
   the anim class sits on the content area in both cases.
   Layout 2 gets it on the slider container. */
.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;
}
.vds-anim-slide .vds-content-inner.vds-text-enter {
	animation: vds-text-slide 550ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.vds-anim-curtain .vds-content-inner.vds-text-enter {
	animation: vds-text-fade 450ms ease forwards;
	animation-delay: 200ms;
	opacity: 0;
}

/* Text exit */
@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 (Layout 1) ────────────────── */
.vds-panel-area {
	display: flex;
	flex-direction: row;
	flex: 0 0 38%;
	width: 38%;
	/* gap between strip panels — matches slider-level Gap Between Slides setting */
	gap: var(--vds-slide-gap, 0px);
}

/* ── Panel (used by Layout 1 next strips, Layout 3 prev + next) */
.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;
}
.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); }
.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;
}
.vds-panel:hover,
.vds-panel:focus { flex: 1.22; }

/* ── Arrow buttons (shared by Layouts 2 & 3) ─────────────── */
.vds-cf-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	/* Styling from parent module "Navigation Arrows" settings */
	background: var(--vds-arrow-bg,     rgba(0,0,0,0.48));
	color:      var(--vds-arrow-color,  #ffffff);
	width:      var(--vds-arrow-size,   44px);
	height:     var(--vds-arrow-size,   44px);
	border-radius: var(--vds-arrow-radius, 50%);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: filter 0.2s ease, transform 0.2s ease;
	padding: 0;
	line-height: 1;
}
.vds-cf-arrow:hover { filter: brightness(1.35); transform: translateY(-50%) scale(1.08); }
.vds-cf-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vds-cf-arrow-prev { left: 10px; }
.vds-cf-arrow-next { right: 10px; }

/* ═══════════════════════════════════════════════════════════
   LAYOUT 2 — CENTRE FOCUS (all panels, active expands)
   ═══════════════════════════════════════════════════════════ */

.vdsp-curtain-slider.vds-layout-centre .vds-slider-wrapper { overflow: visible; }

.vds-cf-panel {
	/*
	 * flex: 1 1 0% means panels share remaining space equally when
	 * inactive. The active panel overrides to flex: 0 0 62% which
	 * pins it at exactly 62% — matching Layout 1's main panel width —
	 * regardless of how many slides are in the set.
	 */
	flex: 1 1 0%;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
	cursor: pointer;
	outline: none;
	transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	min-width: 0;
}
.vds-cf-panel.vds-cf-active {
	flex: 0 0 62%;
	cursor: default;
}

.vds-cf-panel-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
	transition: background 0.45s ease;
	z-index: 1;
	pointer-events: none;
}
.vds-cf-panel.vds-cf-active .vds-cf-panel-overlay { background: transparent !important; }
.vds-cf-panel:not(.vds-cf-active):hover .vds-cf-panel-overlay { background: rgba(0,0,0,0.20) !important; }

.vds-cf-caption {
	position: absolute;
	bottom: 16px;
	left: 6px;
	right: 6px;
	z-index: 3;
	padding: 5px 7px;
	border-radius: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

/* Hide caption on the active (expanded) panel in Layout 2 */
.vds-cf-panel.vds-cf-active .vds-cf-caption {
	opacity: 0;
	pointer-events: none;
}

.vds-cf-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: 56px 64px;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.35s ease 0.1s;
	pointer-events: none;
}
.vds-cf-panel.vds-cf-active .vds-cf-content { opacity: 1; pointer-events: auto; }

.vds-cf-content h1, .vds-cf-content h2, .vds-cf-content h3,
.vds-cf-content h4, .vds-cf-content h5, .vds-cf-content 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-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;
}
.vds-cf-content 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-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;
}

.vds-cf-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--vds-progress-height, 3px);
	background: var(--vds-progress-bg, rgba(255,255,255,0.22));
	z-index: 20;
	overflow: hidden;
}
.vds-cf-progress-fill {
	height: 100%;
	background: var(--vds-progress-color, rgba(255,255,255,0.88));
	width: 0%;
}

/* Ken Burns for Layout 2 zoom mode */
.vdsp-curtain-slider.vds-layout-centre.vds-anim-zoom .vds-cf-panel.vds-cf-active {
	animation: vds-cf-kenburns 6000ms ease forwards;
}
@keyframes vds-cf-kenburns {
	from { background-size: 105% auto; }
	to   { background-size: 112% auto; }
}
.vdsp-curtain-slider.vds-layout-centre.vds-anim-zoom .vds-cf-panel:not(.vds-cf-active) {
	animation: none;
	background-size: cover;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT 3 — STAGE
   Position: [prev panel] [MAIN area] [next panels...]
   The prev panel and next panels share .vds-panel styles.
   The main area shares .vds-content-area styles.
   Only the flex widths differ from Layout 1.
   ═══════════════════════════════════════════════════════════ */

/*
 * PREV PANEL — always 1 narrow strip on the left.
 * Override .vds-panel flex: 1 with a fixed width so it
 * doesn't compete with the main area for space.
 */
.vdsp-curtain-slider.vds-layout-stage .vds-stage-prev-panel {
	flex: 0 0 13%;
	max-width: 13%;
	/* inherits all visual styles from .vds-panel */
}

/*
 * MAIN AREA — slightly wider than Layout 1's 1.25 to make
 * the centre focus more prominent with strips on both sides.
 */
.vdsp-curtain-slider.vds-layout-stage .vds-stage-main-area {
	flex: 1.6;
}

/*
 * NEXT PANELS AREA — slightly narrower than Layout 1 to make
 * room for the prev panel on the left.
 */
.vdsp-curtain-slider.vds-layout-stage .vds-stage-next-area {
	flex: 0 0 25%;
	width: 25%;
	/* inherits display: flex; flex-direction: row from .vds-panel-area */
}

/* Arrows for Layout 3 are the same .vds-cf-arrow at
   far left/right of the slider container. */


/* ═══════════════════════════════════════════════════════════
   CTA BUTTON — .vdsp-slide-btn
   Base structural styles only. All visual design (colours,
   padding, border, font) is generated by Divi's CSS pipeline
   targeting the module's order class (vdsp_curtain_slide_N).
   When no custom styling is set, PHP render() outputs default
   CSS via set_style() that matches Divi's standard button look.
   ═══════════════════════════════════════════════════════════ */
.vdsp-slide-btn {
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	vertical-align: middle;
	/* Ensure transition is set even before Divi CSS loads */
	transition: all 300ms ease;
}
.vds-btn-wrapper {
	margin-top: 1.2rem;
	/* Prevents Divi's global * reset from collapsing the wrapper */
	display: block;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT 4 — GALLERY SLIDER
   Full-screen bg image. Content overlays bottom-left.
   2 full + 1 half portrait thumbnail cards float right.
   Card height = clamp(180px, 60% of slider height, 360px).
   Card width = 180px (fixed). Third card half-clipped by overflow.
   ═══════════════════════════════════════════════════════════ */

.vds-layout-gallery .vds-slider-wrapper {
	overflow: visible; /* allow card box-shadows to show */
	position: relative;
}

/* Full-width main panel */
.vds-gallery-main {
	position: relative;
	width: 100%;
	height: var(--vds-height);
	overflow: hidden;
}

/* bg layers inherit animation classes from the main panel */
.vds-gallery-main .vds-bg-a,
.vds-gallery-main .vds-bg-b {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	will-change: opacity;
}

/* Content block — caption + title + desc + button, bottom-left */
.vds-gallery-inner {
	position: absolute !important;
	bottom: 90px;
	left: 0;
	z-index: 3;
	max-width: 44%;
	padding: 0 60px !important;
	width: 44%;
}

/* Small caption line above the title (Gallery only) */
.vds-gallery-main-caption {
	display: block;
	margin-bottom: 6px;
	opacity: 0.85;
}

/* ── Thumbnail panel ── */
.vds-gallery-thumbs {
	position: absolute;
	right: 0;
	bottom: 4px; /* flush near progress bar */
	z-index: 10;
}

/* Cards row — overflow:hidden clips 3rd card to half */
.vds-gallery-cards {
	display: flex;
	gap: 12px;
	/* 2 full (180px) + 1 half (90px) + 2 gaps (12px) = 474px */
	width: 474px;
	overflow: hidden;
}

/* Individual portrait card — height 50% of slider keeps cards lower */
.vds-gallery-card {
	flex: 0 0 180px;
	height: clamp(160px, calc(var(--vds-height) * 0.5), 300px);
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	outline: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vds-gallery-card:hover,
.vds-gallery-card:focus {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

/* Card background image */
.vds-gallery-card-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
}

/* Gradient overlay for text legibility */
.vds-gallery-card-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 70%;
	background: linear-gradient(transparent, rgba(0,0,0,0.75));
	z-index: 1;
}

/* Card text info */
.vds-gallery-card-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 10px 12px;
}
.vds-gallery-card-caption {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.75);
	margin-bottom: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vds-gallery-card-title {
	/* Multiline — allow up to 3 lines, no single-line truncation */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-size: 12px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	word-break: break-word;
	white-space: normal;
}

/* Card entrance animation on slide change */
@keyframes vds-card-in {
	from { opacity: 0; transform: translateX(16px); }
	to   { opacity: 1; transform: translateX(0); }
}
.vds-gallery-card {
	animation: vds-card-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Navigation arrows — left and right of the thumbnail card strip ── */
/* Arrows are appended to .vds-gallery-main (which has overflow:hidden)
   positioned so prev sits left of the first card, next sits at the right
   of the visible card area. Both vertically centred on the cards. */
.vds-layout-gallery .vds-gallery-arrow-prev,
.vds-layout-gallery .vds-gallery-arrow-next {
	position: absolute;
	top: auto;
	transform: none;
	/* Vertical: centre of cards — cards bottom 4px, height 50% of slider */
	bottom: calc(4px + clamp(80px, var(--vds-height) * 0.25, 150px));
	z-index: 30;
}
.vds-layout-gallery .vds-gallery-arrow-prev {
	/* Left of first card (474px from right + arrow width + small gap) */
	right: calc(474px + 8px);
	left: auto;
}
.vds-layout-gallery .vds-gallery-arrow-next {
	/* Right edge — sits within the half-visible 3rd card */
	right: 8px;
	left: auto;
}
.vds-layout-gallery .vds-gallery-arrow-prev:hover,
.vds-layout-gallery .vds-gallery-arrow-next:hover {
	filter: brightness(1.3);
}

/* ── Responsive: Tablet ≤ 900px ── */
@media (max-width: 900px) {
	.vds-gallery-main { height: auto; min-height: var(--vds-height); }
	.vds-gallery-inner { position: static !important; max-width: 100%; width: 100%; bottom: auto; padding: 32px 32px 16px !important; }
	.vds-gallery-thumbs { position: static; bottom: auto; width: 100%; }
	.vds-gallery-cards { width: 100%; overflow-x: auto; }
	.vds-gallery-nav   { width: 100%; }
}
@media (max-width: 600px) {
	.vds-gallery-card { flex: 0 0 140px; }
	.vds-gallery-inner { padding: 20px 20px 12px !important; }
}






/* ── Button wrapper (render_button() output injected by JS) ──── */
/* The actual button styling is generated by Divi's render_button() PHP helper.
 * The order_class is added to the slide panel in JS, so Divi's scoped CSS
 * (e.g. .et_pb_vdsp_curtain_slide_1 .et_pb_button:hover) applies correctly. */
.vds-btn-wrapper {
	margin-top: 1.2rem;
}
/* Ensure Divi's button base styles load in slider context */


/* ── Custom button hover (via CSS custom props set by JS) ──── */

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet ≤ 900px ───────────────────────────────────────── */
@media (max-width: 900px) {

	/* Layout 1 */
	.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: 20px 24px; max-width: 100%; }
	.vds-panel-area     { flex: none; width: 100%; height: 130px; }
	.vds-panel::after   { bottom: 10px; padding: 4px 5px; }

	/* Layout 2 */
	.vdsp-curtain-slider.vds-layout-centre .vds-slider-wrapper { flex-direction: column; height: auto; min-height: var(--vds-height); overflow: hidden; }
	.vds-cf-panel       { flex: none !important; width: 100%; height: 110px; transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; }
	.vds-cf-panel.vds-cf-active { height: 60% !important; min-height: 260px; }
	.vds-cf-content     { padding: 20px 24px; }

	/* Layout 3 — stack vertically: prev on top, main middle, next at bottom */
	.vdsp-curtain-slider.vds-layout-stage .vds-slider-wrapper {
		flex-direction: column;
		height: auto;
		min-height: var(--vds-height);
	}
	.vdsp-curtain-slider.vds-layout-stage .vds-stage-prev-panel {
		flex: none !important;
		max-width: 100% !important;
		width: 100%;
		height: 110px;
	}
	.vdsp-curtain-slider.vds-layout-stage .vds-stage-main-area {
		flex: none;
		width: 100%;
		min-height: 55%;
	}
	.vdsp-curtain-slider.vds-layout-stage .vds-stage-next-area {
		flex: none !important;
		width: 100% !important;
		height: 130px;
	}

	/* Arrows */
	.vds-cf-arrow { width: 36px; height: 36px; }
	.vds-cf-arrow-prev { left: 8px; }
	.vds-cf-arrow-next { right: 8px; }
}

/* ── Mobile ≤ 600px ───────────────────────────────────────── */
@media (max-width: 600px) {

	/* Layout 1 */
	.vds-content-inner  { padding: 16px 18px; min-height: 160px; }
	.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; }

	/* Layout 2 */
	.vds-cf-panel { height: 80px; }
	.vds-cf-panel.vds-cf-active { height: 55% !important; min-height: 200px; }
	.vds-cf-content  { padding: 16px 18px; }
	.vds-cf-content h1, .vds-cf-content h2, .vds-cf-content h3,
	.vds-cf-content h4, .vds-cf-content h5, .vds-cf-content h6 {
		font-size: max(18px, calc(var(--vds-title-size, 36px) * 0.62)) !important;
	}
	.vds-cf-content p { font-size: max(13px, calc(var(--vds-desc-size, 17px) * 0.85)) !important; }
	.vds-cf-caption  { font-size: 10px; bottom: 8px; padding: 3px 4px; letter-spacing: 0; }

	/* Layout 3 */
	.vdsp-curtain-slider.vds-layout-stage .vds-stage-prev-panel { height: 80px; }
	.vdsp-curtain-slider.vds-layout-stage .vds-stage-next-area  { height: 86px; }

	.vds-cf-arrow { width: 32px; height: 32px; }
}

/* ── Large ≥ 1400px ───────────────────────────────────────── */
@media (min-width: 1400px) {
	.vds-content-inner { padding: 32px 48px; }
	.vds-cf-content    { padding: 32px 48px; }
}

/* ── Divi VB 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 ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.vds-bg-a, .vds-bg-b, .vds-overlay, .vds-panel, .vds-content-inner,
	.vds-cf-panel, .vds-cf-panel-overlay, .vds-cf-content, .vds-cf-progress-fill {
		transition-duration: 0ms !important;
		animation-duration:  0ms !important;
		animation-delay:     0ms !important;
	}
}

/* ── Button hover (CSS custom properties set inline by PHP) ──── */

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Tablet ≤980px, Phone ≤767px
   ═══════════════════════════════════════════════════════════ */

/* ── Layout 1 (Curtain) — mobile ──────────────────────────── */
@media only screen and (max-width: 980px) {
	.vds-layout-curtain .vds-slider-wrapper {
		flex-direction: column;
	}
	.vds-layout-curtain .vds-content-area.vds-main-panel {
		flex: none !important;
		width: 100% !important;
		min-height: 380px;
	}
	.vds-layout-curtain .vds-panel-area {
		flex: none !important;
		width: 100% !important;
		height: auto;
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.vds-layout-curtain .vds-panel {
		flex: 0 0 140px !important;
		min-height: 100px;
	}
}
@media only screen and (max-width: 767px) {
	.vds-layout-curtain .vds-panel { flex: 0 0 110px !important; min-height: 85px; }
}

/* ── Layout 2 (Centre Focus) — mobile ────────────────────── */
@media only screen and (max-width: 980px) {
	.vds-layout-centre .vds-slider-wrapper {
		flex-direction: column;
	}
	.vds-layout-centre .vds-centre-panel {
		flex: none !important;
		width: 100% !important;
		height: 220px !important;
		min-height: 0 !important;
		overflow: hidden;
	}
	.vds-layout-centre .vds-centre-panel.vds-active {
		height: auto !important;
		min-height: 350px !important;
	}
	/* Content inner visible only on active panel */
	.vds-layout-centre .vds-centre-panel:not(.vds-active) .vds-content-inner {
		display: none;
	}
}
@media only screen and (max-width: 767px) {
	.vds-layout-centre .vds-centre-panel        { height: 80px !important; }
	.vds-layout-centre .vds-centre-panel.vds-active { min-height: 280px !important; }
}

/* ── Layout 3 (Stage) — mobile ───────────────────────────── */
@media only screen and (max-width: 980px) {
	.vds-layout-stage .vds-stage-wrapper { flex-direction: column; }
	.vds-layout-stage .vds-stage-prev,
	.vds-layout-stage .vds-stage-next    { display: none !important; }
	.vds-layout-stage .vds-stage-main-area {
		width: 100% !important;
		min-height: 340px;
	}
}

/* ── Layout 4 (Gallery) — mobile ─────────────────────────── */
@media only screen and (max-width: 980px) {
	/* Gallery: column stack — main image on top, thumb strip below */
	/* galleryMain and galleryThumbs are now SIBLINGS inside .vds-slider-wrapper */
	.vds-layout-gallery .vds-slider-wrapper {
		flex-direction: column !important;
	}
	.vds-layout-gallery .vds-gallery-main {
		width: 100% !important;
		min-height: 300px;
		flex: none !important;
		position: relative;
	}
	/* Content (title/desc/button) visible at bottom-left on mobile */
	.vds-layout-gallery .vds-gallery-inner,
	.vds-layout-gallery .vds-content-inner {
		position: absolute !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: 100% !important;
		padding: 16px !important;
		background: linear-gradient(to top, rgba(0,0,0,0.7), transparent) !important;
	}
	/* Thumb strip: horizontal scrollable row below main image */
	.vds-layout-gallery .vds-gallery-thumbs {
		width: 100% !important;
		height: 100px !important;
		flex: none !important;
		position: relative !important;
	}
	.vds-layout-gallery .vds-gallery-cards {
		position: relative !important;
		width: 100% !important;
		height: 100px !important;
		display: flex !important;
		flex-direction: row !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		top: auto !important; right: auto !important; bottom: auto !important;
	}
	.vds-layout-gallery .vds-gallery-card {
		width: 90px !important;
		height: 90px !important;
		flex: 0 0 90px !important;
		min-height: 0 !important;
	}
	/* Hide arrows on mobile — use horizontal scroll or tap */
	.vds-layout-gallery .vds-gallery-arrow-prev,
	.vds-layout-gallery .vds-gallery-arrow-next { display: none !important; }
}
@media only screen and (max-width: 767px) {
	.vds-layout-gallery .vds-gallery-main { min-height: 280px; }
	.vds-layout-gallery .vds-gallery-cards { height: 90px !important; }
	.vds-layout-gallery .vds-gallery-card  { width: 80px !important; flex: 0 0 80px !important; height: 80px !important; }
}


/* ── Custom button hover (via CSS custom props set by JS) ──── */

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — mobile / tablet overrides
   ═══════════════════════════════════════════════════════════ */

/* ── Tablet (≤980px) ─────────────────────────────────────── */
@media (max-width: 980px) {
	/* Layout 1: stack panel strip below main image */
	.vds-layout-curtain .vds-slider-wrapper { flex-direction: column; }
	.vds-layout-curtain .vds-content-area { flex: none; min-height: 60vw; width: 100%; }
	.vds-layout-curtain .vds-panel-area    { flex: none; flex-direction: row; height: 80px; width: 100%; }
	.vds-layout-curtain .vds-panel        { flex: 1; height: 80px; min-width: 0; }
	.vds-layout-curtain .vds-panel-caption { font-size: 10px; }

	/* Layout 2 (Centre Focus): panels stack as full-width overlapping layers.
	 * Only the active panel (.vds-cf-active) is shown via opacity. */
	.vds-layout-centre .vds-slider-wrapper {
		display: block; position: relative; min-height: 55vw; overflow: hidden;
	}
	.vds-layout-centre .vds-cf-panel {
		position: absolute !important; inset: 0 !important;
		width: 100% !important; height: 100% !important;
		min-height: 55vw !important;
		opacity: 0 !important; transition: opacity 0.4s ease !important;
		pointer-events: none !important; flex: none !important;
	}
	.vds-layout-centre .vds-cf-panel.vds-cf-active {
		opacity: 1 !important; pointer-events: auto !important; z-index: 2 !important;
	}
	/* Centre content positioned to fill panel */
	.vds-layout-centre .vds-cf-content { width: 100%; height: 100%; }

	/* Layout 3: hide side panels, show only main area */
	.vds-layout-stage .vds-stage-prev-wrap,
	.vds-layout-stage .vds-stage-next-wrap { display: none !important; }
	.vds-layout-stage .vds-stage-main      { flex: 1 !important; min-height: 55vw; }

	/* Layout 4: single main panel only, dots for nav, no card strip */
	.vds-layout-gallery .vds-gallery-main  { min-height: 60vw; }
	.vds-layout-gallery .vds-gallery-thumbs { display: none !important; }
}

/* ── Mobile (≤767px) ─────────────────────────────────────── */
@media (max-width: 767px) {
	/* Layout 1 */
	.vds-layout-curtain .vds-content-area  { min-height: 80vw; }
	.vds-layout-curtain .vds-panel-area    { height: 60px; }
	.vds-layout-curtain .vds-panel        { height: 60px; }
	.vds-layout-curtain .vds-panel-caption { display: none; }

	/* Layout 2 */
	.vds-layout-centre .vds-cf-panel,
	.vds-layout-centre .vds-cf-panel.vds-cf-active { min-height: 80vw !important; }

	/* Layout 3 */
	.vds-layout-stage .vds-stage-main { min-height: 75vw; }

	/* Layout 4 */
	.vds-layout-gallery .vds-gallery-main  { min-height: 75vw; }

	/* Gallery dot nav (shown on mobile instead of cards) */
	.vds-gallery-dots {
		display: flex !important; justify-content: center; gap: 8px;
		position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
		z-index: 20; flex-wrap: wrap;
	}
	.vds-gallery-dot {
		width: 10px; height: 10px; border-radius: 50%;
		background: rgba(255,255,255,0.5); border: 2px solid rgba(255,255,255,0.8);
		cursor: pointer; padding: 0; transition: background 0.2s;
	}
	.vds-gallery-dot.vds-dot-active { background: #fff; }

	/* Content inner — tighter on narrow screens */
	.vds-content-inner { max-width: 100% !important; }
	.vds-slide-title   { font-size: clamp(1rem, 4vw, 1.5rem) !important; }
	.vds-slide-desc    { font-size: clamp(0.8rem, 3vw, 1rem) !important; }
	.vds-btn-wrapper   { margin-top: 0.8rem; }
}