/**
 * DPRTE Video Slider widget styles.
 */

.dprte-vs {
	--dprte-vs-navy: #0A2540;
	--dprte-vs-teal: #00B5C2;
	--dprte-vs-text: #1A1A1A;
	--dprte-vs-on-overlay: #FFFFFF;
	--dprte-vs-radius: 12px;
	--dprte-vs-overlay-alpha: 0.55;
	--dprte-vs-gap: 20px;
	--dprte-vs-nav-size: 44px;

	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding-block: 8px;
}

.dprte-vs *,
.dprte-vs *::before,
.dprte-vs *::after {
	box-sizing: border-box;
}

.dprte-vs__viewport {
	width: 100%;
	overflow: hidden;
}

/* Override Swiper's default height chain. Without these, `.swiper-slide` inherits
 * `height: 100%` from `.swiper-wrapper`, which evaluates to `auto` (then 0) when
 * `.swiper` has no explicit height — and the card's aspect-ratio can't take effect
 * because the parent slide collapses. Forcing height:auto everywhere lets the card
 * size itself via aspect-ratio + width:100%, and the slide & wrapper grow to fit. */
.dprte-vs .swiper,
.dprte-vs .swiper-wrapper {
	height: auto;
}
/* Don't stretch slides — each slide takes the card's natural (aspect-ratio derived)
 * height, so the image (absolute, inset:0) covers the entire visible area. */
.dprte-vs .swiper-wrapper {
	align-items: flex-start;
}

.dprte-vs__slide {
	height: auto;
}

.dprte-vs__card {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--dprte-vs-radius);
	background: var(--dprte-vs-navy);
	color: var(--dprte-vs-on-overlay);
	text-decoration: none;
	transition: transform 220ms ease, box-shadow 220ms ease;
	box-shadow: 0 6px 18px rgba(10, 37, 64, 0.12);
}

.dprte-vs--aspect-16-9 .dprte-vs__card {
	aspect-ratio: 16 / 9;
}

.dprte-vs--aspect-9-16 .dprte-vs__card {
	aspect-ratio: 9 / 16;
}

/* Padding-top fallback to guarantee the card has a height even when
 * `aspect-ratio` fails to resolve — which happens in the Elementor editor
 * preview if Swiper sets the slide width AFTER initial layout (the card's
 * aspect-ratio computes against an indefinite width and snaps to 0, leaving
 * the slider visually empty). Percentage padding always re-resolves against
 * the parent's current width on every layout pass, so it can't get stuck at 0.
 *
 * The image (absolute, inset:0) covers the padded space; nothing else in the
 * card flows so this never adds visual padding. 56.25% = 9/16, 177.78% = 16/9. */
.dprte-vs--aspect-16-9 .dprte-vs__card::before {
	content: '';
	display: block;
	padding-top: 56.25%;
}

.dprte-vs--aspect-9-16 .dprte-vs__card::before {
	content: '';
	display: block;
	padding-top: 177.78%;
}

.dprte-vs__card:hover,
.dprte-vs__card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(10, 37, 64, 0.22);
	outline: none;
}

.dprte-vs__card:focus-visible {
	box-shadow: 0 0 0 3px var(--dprte-vs-teal), 0 14px 30px rgba(10, 37, 64, 0.22);
}

.dprte-vs__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Higher-specificity + !important on the image's border-radius so it beats
 * Elementor Pro / theme rules that target `<img>` elements directly (e.g.
 * `.elementor-element img { border-radius: 0 }`). The user observed that the
 * scrim (a <div>) was rounding correctly while the image (an <img>) wasn't,
 * which points squarely at an img-specific override. With both class names
 * in the selector we're at (0,3,0) plus !important, which is essentially
 * uncontestable in any reasonable cascade. */
.dprte-vs .dprte-vs__card .dprte-vs__poster {
	border-radius: inherit !important;
}

.dprte-vs__scrim {
	position: absolute;
	inset: 0;
	border-radius: inherit !important;
	/* Two-stop gradient: full overlay alpha at the bottom, transparent at 70%
	 * up the card. The earlier 0.55 multiplier on a middle stop made the
	 * overlay-opacity control feel muted (changes to opacity barely visible
	 * because the middle stop dominated the perceived strength). Linear
	 * gradient with one alpha value is cleaner and matches the slider value
	 * 1:1. */
	background: linear-gradient(
		to top,
		rgba(10, 37, 64, var(--dprte-vs-overlay-alpha)) 0%,
		transparent 70%
	);
	pointer-events: none;
}

.dprte-vs__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px 18px 18px;
	z-index: 1;
}

.dprte-vs__title {
	margin: 0;
	color: var(--dprte-vs-on-overlay);
	font-family: inherit;
	font-weight: 700;
	font-size: clamp(14px, 1.05vw + 8px, 20px);
	line-height: 1.25;
	letter-spacing: 0.005em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dprte-vs__nav {
	/* Reset Swiper's bundled `.swiper-button-prev`/`.swiper-button-next` CSS,
	 * which sets position:absolute, top:50%, left/right:10px, margin-top.
	 * Both classes live on the same element (Swiper needs them to bind nav)
	 * and the equal-specificity cascade meant Swiper's positioning was
	 * silently winning whenever my rules didn't explicitly override it. */
	position: static;
	top: auto;
	left: auto;
	right: auto;
	margin: 0;

	width: var(--dprte-vs-nav-size);
	height: var(--dprte-vs-nav-size);
	border-radius: 50%;
	border: 0;
	background: #C8AD91;
	color: #000000;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	transition: transform 180ms ease;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.dprte-vs__nav::after {
	font-family: 'swiper-icons';
	font-size: 16px;
	font-weight: 700;
	color: inherit;
	text-transform: none;
}

/* Background and arrow colours stay constant across hover/focus/blur — only
 * the focus-visible outline ring changes (kept for accessibility). The
 * Elementor `nav_bg_color` / `nav_icon_color` controls inject CSS that ALSO
 * targets :hover/:focus/:focus-visible so they don't get colour-swapped. */

.dprte-vs__nav:focus-visible {
	outline: 2px solid #C8AD91;
	outline-offset: 3px;
}

.dprte-vs__nav.swiper-button-disabled {
	opacity: 0;
	pointer-events: none;
}

/* ============================================================
 * NAV BAR — base
 * The bar wraps the prev + next <button> elements in PHP. Layout is driven by
 * compound modifier classes on the wrapper:
 *   .dprte-vs--vpos-{above|middle|below}
 *   .dprte-vs--hpos-{left|right|space-between}
 *
 * Above/below: bar is in document flow as a flex item of the wrapper.
 *              Its WIDTH must be 100% so JC alignments produce visible
 *              clustering (left), right-clustering (right), or full-width
 *              spread (space-between).
 *
 * Middle:      bar is absolutely positioned on the wrapper. The wrapper
 *              gets horizontal padding so the slider doesn't get covered
 *              by the arrows.
 * ============================================================ */
.dprte-vs__nav-bar {
	display: flex;
	gap: 8px;
}

/* === VPOS: above / below — wrapper becomes flex column, bar in flow === */
.dprte-vs--vpos-above,
.dprte-vs--vpos-below {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dprte-vs--vpos-above .dprte-vs__nav-bar,
.dprte-vs--vpos-below .dprte-vs__nav-bar {
	width: 100%;            /* explicit so JC has room to spread or cluster */
	align-self: stretch;    /* belt-and-braces against any flex shrink */
	flex-shrink: 0;
}
.dprte-vs--vpos-above .dprte-vs__nav-bar { order: -1; }
.dprte-vs--vpos-below .dprte-vs__nav-bar { order: 1; }
.dprte-vs--vpos-above .dprte-vs__viewport,
.dprte-vs--vpos-below .dprte-vs__viewport { order: 0; }

/* HPOS combinations for above/below */
.dprte-vs--vpos-above.dprte-vs--hpos-left .dprte-vs__nav-bar,
.dprte-vs--vpos-below.dprte-vs--hpos-left .dprte-vs__nav-bar {
	justify-content: flex-start;
}
.dprte-vs--vpos-above.dprte-vs--hpos-right .dprte-vs__nav-bar,
.dprte-vs--vpos-below.dprte-vs--hpos-right .dprte-vs__nav-bar {
	justify-content: flex-end;
}
.dprte-vs--vpos-above.dprte-vs--hpos-space-between .dprte-vs__nav-bar,
.dprte-vs--vpos-below.dprte-vs--hpos-space-between .dprte-vs__nav-bar {
	justify-content: space-between;
}

/* === VPOS: middle — bar absolutely positioned, vertically centred === */
.dprte-vs--vpos-middle { position: relative; }
.dprte-vs--vpos-middle .dprte-vs__nav-bar {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	pointer-events: none;
}
.dprte-vs--vpos-middle .dprte-vs__nav { pointer-events: auto; }

/* hpos = space-between → bar spans wrapper width, arrows pinned to edges.
 *
 * NOTE: Earlier versions added wrapper-padding here (`calc(var(--dprte-vs-nav-size)
 * + 12px)` per side) to push the slider inwards so the arrows wouldn't overlap
 * the cards. That broke layout inside Elementor's `e-flex` containers: the
 * flex algorithm sized the widget to min-content = padding-only = 112px,
 * collapsing the slider to 0 wide. Now we keep zero wrapper-padding and let
 * the arrows overlay the slider edges (the standard carousel pattern).
 * pointer-events: none on the bar + auto on the buttons keeps the centre of
 * the slide clickable. */
.dprte-vs--vpos-middle.dprte-vs--hpos-space-between .dprte-vs__nav-bar {
	left: 8px;
	right: 8px;
	justify-content: space-between;
}

/* hpos = left → both arrows clustered on left of the slider area */
.dprte-vs--vpos-middle.dprte-vs--hpos-left .dprte-vs__nav-bar {
	left: 8px;
	justify-content: flex-start;
}

/* hpos = right → both arrows clustered on right of the slider area */
.dprte-vs--vpos-middle.dprte-vs--hpos-right .dprte-vs__nav-bar {
	right: 8px;
	justify-content: flex-end;
}

/* === Show next only ===
 * Hide the prev button (also not rendered server-side; this is defensive).
 * Let hpos still control where the single next button sits — only override
 * for space-between (one button can't spread; default to right edge). */
.dprte-vs--next-only .dprte-vs__nav--prev { display: none; }
.dprte-vs--next-only.dprte-vs--hpos-space-between .dprte-vs__nav-bar {
	justify-content: flex-end;
}

@media (max-width: 600px) {
	.dprte-vs__caption {
		padding: 12px 14px 14px;
	}
	/* Reduce wrapper edge padding on mobile in middle position */
	.dprte-vs--vpos-middle.dprte-vs--hpos-space-between {
		padding-left: calc(var(--dprte-vs-nav-size) + 4px);
		padding-right: calc(var(--dprte-vs-nav-size) + 4px);
	}
}

.dprte-vs .swiper-slide {
	transition: opacity 220ms ease;
}