/* Vedic Art 108 Sliders — replaces LayerSlider */

.vas-slider {
	--vas-speed: 1000ms;
	--vas-ease: ease-in-out;
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	-webkit-tap-highlight-color: transparent;
}

.vas-track {
	display: grid;
	aspect-ratio: var(--vas-ratio, 1 / 1);
	width: 100%;
}

/* ---- slides: stacked in one grid cell, faded with opacity ---- */
.vas-slide {
	grid-area: 1 / 1;
	position: relative;
	overflow: hidden;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 0;
	transition: opacity var(--vas-speed) var(--vas-ease), visibility 0s linear var(--vas-speed);
}
.vas-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
	transition: opacity var(--vas-speed) var(--vas-ease), visibility 0s;
}
.vas-slide.is-leaving {
	visibility: visible;
	z-index: 1;
}
/* "over": outgoing stays opaque underneath while the incoming fades in on top (no mid-fade dip),
 * which is how LayerSlider's "Crossfading" transition renders. */
.vas-fade-over .vas-slide.is-leaving { opacity: 1; transition: none; }

/* No-JS / pre-init: just show the first slide. */
.vas-slider:not(.is-ready) .vas-slide:not(:first-child) { display: none; }

/* <picture> wrapper (breakpoint guard) must not affect layout */
.vas-slider picture.vas-pic { display: contents; }

.vas-slide > .vas-link {
	position: absolute;
	inset: 0;
	display: block;
}
.vas-slide .vas-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* LayerSlider-style image layer: size and top offset in canvas px, horizontally centred. */
.vas-slide .vas-img.vas-framed {
	position: absolute;
	left: 50%;
	top: calc(var(--fy) / var(--gh) * 100%);
	width: calc(var(--fw) / var(--gw) * 100%);
	height: calc(var(--fh) / var(--gh) * 100%);
	transform: translateX(-50%);
	object-fit: fill;
}

/* Paused (hover / focus / pause button / offscreen): freeze any in-slide animation too. */
.vas-slider.is-held .vas-slide *,
.vas-slide.is-leaving * { animation-play-state: paused !important; }

/* ---- controls ----
 * Class-level reset (specificity 0,2,0) so theme "button {…}" styles can't leak in;
 * the rules after it have equal specificity and win by source order. */
.vas-slider .vas-arrow,
.vas-slider .vas-pause,
.vas-slider .vas-dot {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: absolute;
	z-index: 5;
	display: grid;
	place-items: center;
	color: #fff;
	-webkit-tap-highlight-color: transparent;
}
.vas-slider .vas-arrow:focus-visible,
.vas-slider .vas-pause:focus-visible,
.vas-slider .vas-dot:focus-visible { outline: 2px solid #f9a11d; outline-offset: 2px; }

.vas-slider .vas-arrow {
	top: 50%;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, .35));
	transition: opacity .3s;
}
.vas-slider .vas-arrow svg { width: 40px; height: 40px; display: block; }
.vas-slider .vas-arrow:hover { opacity: .75; }
.vas-slider .vas-prev { left: 30px; }
.vas-slider .vas-next { right: 30px; }
.vas-slider .vas-next svg { transform: scaleX(-1); }

/* Small, quiet pause/play button (WCAG 2.2.2). Fully visible on hover, focus or when paused. */
.vas-slider .vas-pause {
	left: 10px;
	bottom: 10px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .28);
	opacity: 0;
	transition: opacity .3s;
}
.vas-slider .vas-pause svg { display: block; }
.vas-slider:hover .vas-pause,
.vas-slider .vas-pause:focus-visible,
.vas-slider.is-paused .vas-pause { opacity: 1; }
@media (hover: none) {
	.vas-slider .vas-pause { opacity: .55; }
}
.vas-slider .vas-pause .vas-i-play { display: none; }
.vas-slider.is-paused .vas-pause .vas-i-play { display: block; }
.vas-slider.is-paused .vas-pause .vas-i-pause { display: none; }

.vas-dots { position: absolute; z-index: 5; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
.vas-slider .vas-dot { position: static; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.5); }
.vas-slider .vas-dot[aria-current="true"] { background: #fff; }

.vas-slider .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.vas-slider .vas-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vas-slide, .vas-slide.is-active { transition: none; }
}