/* DUX Content Slider — front-end styles */

/* The full-bleed breakout below (100vw + negative margins) makes the
   slider run edge-to-edge, but 100vw measures the true viewport width
   including the scrollbar's own width — on a page with a vertical
   scrollbar that's a few pixels wider than what's actually visible,
   which is what was showing up as a horizontal scrollbar. This file
   only loads on pages that actually use the slider, so it's safe to
   fix it here rather than needing a theme-level change. */
body {
	overflow-x: hidden;
}

.dux-slider {
	--dux-ink: #ffffff;
	--dux-ink-soft: rgba(255, 255, 255, 0.68);
	--dux-accent: #3a71ff;
	--dux-accent-strong: #2c5ce0;
	--dux-on-accent: #ffffff;
	--dux-surface: #050505;
	--dux-surface-inactive: #2c2c2e;
	--dux-line: rgba(255, 255, 255, 0.14);
	--dux-dot: #4a4a4a;
	--dux-shadow: rgba(0, 0, 0, 0.4);

	--dux-gap: 24px;
	/* The one active card's size on a big screen — 960x560, kept in
	   proportion (12:7) as it shrinks on smaller ones. */
	--dux-card-max-w: 960px;

	box-sizing: border-box;
	/* Break out of whatever column/max-width the theme's content area
	   imposes, so the track runs edge-to-edge — the active card still
	   sits centered inside it, but the neighbor now peeks in from the
	   true edge of the screen instead of a boxed-in 1300px stage. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0 12px;
}
.dux-slider *,
.dux-slider *::before,
.dux-slider *::after {
	box-sizing: inherit;
}

/* progress */
.dux-slider__progress {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 20px;
}
.dux-slider__count {
	font-family: "Courier New", monospace;
	font-size: 12px;
	color: var(--dux-ink-soft);
	font-variant-numeric: tabular-nums;
	min-width: 52px;
}
.dux-slider__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}
.dux-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--dux-dot);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: width 0.35s ease, background-color 0.35s ease;
}
.dux-slider__dot:focus-visible {
	outline: 2px solid var(--dux-accent);
	outline-offset: 3px;
}
.dux-slider__dot[aria-current="true"] {
	width: 26px;
	background: var(--dux-accent);
}

/* stage — spans the outer width; the active card sits centered inside it, with its neighbor peeking in at the edge */
.dux-slider__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.dux-slider__track {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.dux-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #000000;
	border: 1px solid var(--dux-line);
	color: var(--dux-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 40;
	box-shadow: 0 6px 16px var(--dux-shadow);
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.dux-slider__arrow:hover {
	border-color: var(--dux-accent);
	color: var(--dux-accent);
}
.dux-slider__arrow:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.dux-slider__arrow:disabled:hover {
	border-color: var(--dux-line);
	color: var(--dux-ink);
}
.dux-slider__arrow:focus-visible {
	outline: 2px solid var(--dux-accent);
	outline-offset: 2px;
}
.dux-slider__arrow:active {
	transform: translateY(-50%) scale(0.94);
}
.dux-slider__arrow--prev {
	left: -8px;
}
.dux-slider__arrow--next {
	right: -8px;
}
.dux-slider__arrow svg {
	width: 18px !important;
	height: 18px !important;
	display: block !important;
	flex-shrink: 0;
	overflow: visible;
	pointer-events: none;
}
.dux-slider__arrow svg path {
	stroke: #ffffff !important;
	fill: none !important;
}
.dux-slider__arrow:hover svg path {
	stroke: var(--dux-accent) !important;
}
 
/* Only one card is ever fully in view — 960x560 on a big screen,
   proportionally smaller (12:7) on anything narrower. Its neighbor
   sits directly beside it, off to the edge of the track, so only a
   sliver of it peeks in; the track's overflow:hidden crops the rest,
   it isn't shrunk or faded to achieve that. */
.dux-slider__slide {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(var(--dux-card-max-w), 92%);
	/* 560px is the target height, but it's a floor, not a cap — if a
	   slide's text needs more room than that, the card grows to fit it
	   in full rather than truncating anything. */
	min-height: 560px;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s ease;
	will-change: transform, opacity;
}
.dux-slider__card {
	background: var(--dux-surface-inactive);
	border-radius: 20px;
	padding: 32px 36px;
	height: 100%;
	min-height: 100%;
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 24px;
	align-items: stretch;
	transition: background-color 0.45s ease;
}
.dux-slider__slide[data-offset="0"] .dux-slider__card {
	background: var(--dux-surface);
}
.dux-slider__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	min-width: 0;
	min-height: 0;
}
.dux-slider__title {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
	color: #fff;
}
.dux-slider__desc {
	font-size: 22px;
	line-height: 1.5;
	color: #fff;
	/* Always show the full text — the card grows (min-height, not a
	   fixed height) to fit it instead of clamping/truncating it. */
}
.dux-slider__desc p {
	margin: 0 0 0.8em;
}
.dux-slider__desc p:last-child {
	margin-bottom: 0;
}
.dux-slider__cta {
	margin-top: 4px;
	align-self: flex-start;
	background: var(--dux-accent);
	color: var(--dux-on-accent);
	border: none;
	font: inherit;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	padding: 10px 22px;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	appearance: none;
	transition: background-color 0.2s ease;
}
.dux-slider__cta:hover,
.dux-slider__cta:focus-visible {
	background: var(--dux-accent-strong);
	color: var(--dux-on-accent);
}

/* Image area: fit the whole image without cropping. The image is
   capped by max-width/max-height (whichever it hits first) and keeps
   its own aspect ratio — never stretched to fill the box. */
.dux-slider__media {
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin:0 10%;
}
.dux-slider__media img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Mobile title/description override: both versions are in the markup
   whenever a slide has one, CSS just picks which shows at which width. */
.dux-slider__title--mobile,
.dux-slider__desc--mobile {
	display: none;
}
@media (min-width: 769px) {
	.dux-slider__text { padding-left:15px;}
}
@media (prefers-reduced-motion: reduce) {
	.dux-slider__slide {
		transition: none;
	}
}

/* Small screens: keep the same peek mechanic as desktop (active card
   centered, neighbor sliced off at the track's edge) instead of hiding
   the neighbors — that sliver is what tells the visitor there's more
   to swipe/tap to. The card just gets narrower (so more of the next
   one peeks in) and its height comes from its stacked content instead
   of the fixed 12:7 ratio. */
@media (max-width: 768px) {
	.dux-slider {
		--dux-gap: 14px;
	}
	.dux-slider__slide {
		width: 80%;
		min-height: 0;
		/* height is set by JS to the tallest slide's natural height, so
		   every card is the same size as you swipe through — see
		   applyUniformMobileHeight() in dux-slider.js. */
	}
	.dux-slider__card {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		padding: 20px;
		height: 100%;
	}
	.dux-slider__text {
		order: 2;
	}
	.dux-slider__title {
		font-size: 20px;
	}
	.dux-slider__desc {
		font-size: 15px;
		line-height: 1.5;
	}
	.dux-slider__cta {
		font-size: 14px;
		padding: 9px 18px;
	}
	.dux-slider__title--desktop,
	.dux-slider__desc--desktop {
		display: none;
	}
	.dux-slider__title--mobile,
	.dux-slider__desc--mobile {
		display: block;
	}
	.dux-slider__media {
		order: 1;
		height: auto;
	}
	.dux-slider__media img {
		max-width: 100%;
		max-height: 32vh;
		width: auto;
	}
	.dux-slider__arrow {
		width: 36px;
		height: 36px;
	}
	.dux-slider__arrow--prev {
		left: 2px;
	}
	.dux-slider__arrow--next {
		right: 2px;
	}
}