/**
 * SBX Slider — structural styles only.
 *
 * Splide's own stylesheet handles track/list/slide mechanics; this layer adds
 * the wrapper, arrow, progress and external-nav scaffolding. Visual styling is
 * intentionally minimal — drive colours/spacing from ACSS variables or your
 * own classes. Variables fall back gracefully if ACSS is absent.
 */

/* Slides inherit a sensible default layout; override freely. */
:where( .sbx-slide ) {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --- Built-in (in-slider) arrows ---
   The bundled Splide CSS is the core build (no arrow/dot theme), so we position
   and style them here. */
.sbx-slider .splide__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var( --space-l, 2.75rem );
	height: var( --space-l, 2.75rem );
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var( --neutral-ultra-light, rgba( 255, 255, 255, 0.85 ) );
	color: inherit;
	cursor: pointer;
}

.sbx-slider .splide__arrow--prev {
	left: var( --space-xs, 0.75rem );
}

.sbx-slider .splide__arrow--next {
	right: var( --space-xs, 0.75rem );
}

.sbx-slider .splide__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

.sbx-slider .splide__arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Splide's auto-generated arrows reuse one right-pointing SVG — flip the prev.
   Custom icons (in .sbx-slider__arrows) are left as authored. */
.sbx-slider .splide__arrows:not( .sbx-slider__arrows ) .splide__arrow--prev svg {
	transform: scaleX( -1 );
}

/* --- Built-in (in-slider) pagination dots ---
   Core Splide CSS lays the list out but doesn't style the dots. */
.sbx-slider .splide__pagination {
	position: absolute;
	inset-inline: 0;
	inset-block-end: var( --space-xs, 0.75rem );
	gap: 0.5em;
	padding: 0;
}

.sbx-slider .splide__pagination__page {
	width: 0.625rem;
	height: 0.625rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var( --neutral-light, rgba( 0, 0, 0, 0.3 ) );
	opacity: 0.7;
	cursor: pointer;
	transition: opacity 0.2s, background-color 0.2s;
}

.sbx-slider .splide__pagination__page.is-active {
	opacity: 1;
	background-color: var( --action, #000 );
}

/* --- Autoplay progress bar (in-slider) --- */
.sbx-slider__progress {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: var( --sbx-progress-height, 0.25rem );
	background-color: var( --neutral-light, rgba( 0, 0, 0, 0.15 ) );
}

.sbx-slider__progress-bar {
	height: 100%;
	width: 0;
	background-color: var( --action, currentColor );
}

/* Static pagination preview inside the Bricks builder canvas. */
.sbx-slider__pagination--builder {
	display: flex !important;
}

/* --- External controls (SBX Slider Nav) --- */
.sbx-slider-nav {
	display: flex;
	align-items: center;
	gap: var( --space-s, 0.5rem );
}

.sbx-slider-nav__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: transparent;
	border: 0;
}

.sbx-slider-nav__arrow[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* Icon glyphs follow the button's font-size (the "Icon size" control). */
.sbx-slider-nav__arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.sbx-slider-nav__arrow i {
	font-size: inherit;
	line-height: 0;
}

.sbx-slider-nav__pagination {
	display: flex;
	align-items: center;
	gap: var( --space-xs, 0.375rem );
}

.sbx-slider-nav__dot {
	width: var( --sbx-dot-size, 0.625rem );
	height: var( --sbx-dot-size, 0.625rem );
	padding: 0;
	border: 0;
	border-radius: 100%;
	cursor: pointer;
	background-color: var( --neutral-light, rgba( 0, 0, 0, 0.3 ) );
}

.sbx-slider-nav__dot.is-active {
	background-color: var( --action, #000 );
}

.sbx-slider-nav__progress {
	flex: 1;
	height: var( --sbx-progress-height, 0.25rem );
	background-color: var( --neutral-light, rgba( 0, 0, 0, 0.15 ) );
}

.sbx-slider-nav__progress-bar {
	height: 100%;
	width: 0;
	background-color: var( --action, currentColor );
	transition: width 0.2s linear;
}

.sbx-slider-nav__counter {
	display: inline-flex;
	gap: 0.125em;
	font-variant-numeric: tabular-nums;
}

/* --- Content reveal --------------------------------------------------------
   "sbx-reveal" marks a content group inside a slide. When the toggle is on the
   script auto-marks the slide's content wrapper (descending single-child
   wrappers); on slides with more than one part (e.g. a media wrapper + a text
   wrapper) add "sbx-reveal" to the content wrapper yourself. Without stagger
   the whole group reveals together; with stagger its child elements cascade,
   ordered by the per-child index the script sets. Pair with Type: Fade for a
   cross-fade + content rise. */
.sbx-slider[data-sbx-reveal="up"]    { --sbx-reveal-transform: translateY( var( --sbx-reveal-distance, 2rem ) ); }
.sbx-slider[data-sbx-reveal="down"]  { --sbx-reveal-transform: translateY( calc( var( --sbx-reveal-distance, 2rem ) * -1 ) ); }
.sbx-slider[data-sbx-reveal="left"]  { --sbx-reveal-transform: translateX( var( --sbx-reveal-distance, 2rem ) ); }
.sbx-slider[data-sbx-reveal="right"] { --sbx-reveal-transform: translateX( calc( var( --sbx-reveal-distance, 2rem ) * -1 ) ); }

/* No stagger: the whole group reveals together. */
.sbx-slider[data-sbx-reveal]:not( [data-sbx-stagger="true"] ) .splide__slide .sbx-reveal {
	opacity: 0;
	transform: var( --sbx-reveal-transform );
	transition:
		opacity var( --sbx-reveal-duration, 600ms ) ease,
		transform var( --sbx-reveal-duration, 600ms ) ease;
	transition-delay: var( --sbx-reveal-delay, 150ms );
}

.sbx-slider[data-sbx-reveal]:not( [data-sbx-stagger="true"] ) .splide__slide.is-active .sbx-reveal {
	opacity: 1;
	transform: none;
}

/* Stagger: the group's child elements cascade, ordered by their per-child index. */
.sbx-slider[data-sbx-reveal][data-sbx-stagger="true"] .splide__slide .sbx-reveal > * {
	opacity: 0;
	transform: var( --sbx-reveal-transform );
	transition:
		opacity var( --sbx-reveal-duration, 600ms ) ease,
		transform var( --sbx-reveal-duration, 600ms ) ease;
	transition-delay: calc( var( --sbx-reveal-delay, 150ms ) + var( --sbx-reveal-index, 0 ) * var( --sbx-reveal-step, 120ms ) );
}

.sbx-slider[data-sbx-reveal][data-sbx-stagger="true"] .splide__slide.is-active .sbx-reveal > * {
	opacity: 1;
	transform: none;
}

/* Respect reduced motion: show content with no movement. */
@media ( prefers-reduced-motion: reduce ) {
	.sbx-slider[data-sbx-reveal] .splide__slide .sbx-reveal,
	.sbx-slider[data-sbx-reveal] .splide__slide .sbx-reveal > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Never hide reveal content when the slider hasn't initialised (no-JS /
   pre-init) or while editing in the builder canvas. */
.sbx-slider:not( .is-initialized ) .sbx-reveal,
.sbx-slider:not( .is-initialized ) .sbx-reveal > *,
.iframe .sbx-slider[data-sbx-reveal] .sbx-reveal,
.iframe .sbx-slider[data-sbx-reveal] .sbx-reveal > * {
	opacity: 1 !important;
	transform: none !important;
}

/* --- No-JS / pre-init fallback ---------------------------------------------
   Splide's core CSS hides .splide until it adds .is-initialized, so a slider
   would vanish entirely if the JS never runs. Until it's initialised, stay
   visible and show the first slide as a static fallback (the others, arrows and
   dots are hidden). Once Splide mounts, .is-initialized removes these rules and
   the full carousel takes over. */
.sbx-slider:not( .is-initialized ) {
	visibility: visible;
}

.sbx-slider:not( .is-initialized ) .splide__list {
	display: block;
}

.sbx-slider:not( .is-initialized ) .splide__slide:not( :first-child ) {
	display: none;
}

.sbx-slider:not( .is-initialized ) .splide__arrows,
.sbx-slider:not( .is-initialized ) .splide__pagination {
	display: none;
}