/*
 * Light Slider Pro — Frontend Slider Styles
 * Target: < 5 KB gzipped
 * Uses GPU-accelerated translate3d transitions only.
 * No display:none switching. Clone slides are hidden via aria-hidden; CSS
 * hides them before JS initialises via the .lsp-initialized guard.
 */

/* ── Slider root ───────────────────────────────────────────────────────────── */

.lsp-slider {
	position: relative;
	box-sizing: border-box;
	/* touch-action pan-y allows vertical scroll while capturing horizontal swipe */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	outline: none;
}

.lsp-slider:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* ── Track wrapper ─────────────────────────────────────────────────────────── */

.lsp-track-wrapper {
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* ── Track ─────────────────────────────────────────────────────────────────── */

.lsp-track {
	display: flex;
	/* Explicit width so flex-basis 100% on children resolves to wrapper width */
	width: 100%;
	/* GPU layer for the track */
	will-change: transform;
	/* Default transition — overridden inline by JS for speed/instant snaps */
	transition: transform 500ms ease-in-out;
}

/* Disable transitions before JS boots to prevent flash */
.lsp-slider:not(.lsp-initialized) .lsp-track {
	transition: none;
}

/* ── Slides ────────────────────────────────────────────────────────────────── */

.lsp-slide {
	flex: 0 0 100%;
	min-width: 0;
	position: relative;
	overflow: hidden;
}

/* Hide clone slides before JS initialises (no clones rendered in no-JS) */
.lsp-slider:not(.lsp-initialized) .lsp-slide--clone {
	display: none;
}

/* ── Slide figure & image ──────────────────────────────────────────────────── */

.lsp-slide__figure {
	display: block;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.lsp-slide__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	/* Prevent dragging native image ghost during slider drag */
	pointer-events: none;
}

/* ── Caption ───────────────────────────────────────────────────────────────── */

.lsp-slide__caption {
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 0;
	bottom: 0;
	padding: 2em 1.25em 0.75em;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.6 ), transparent );
	color: #fff;
	font-size: 0.875em;
	line-height: 1.5;
	text-align: center;
}

/* ── Arrows ────────────────────────────────────────────────────────────────── */

.lsp-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.45 );
	color: #fff;
	cursor: pointer;
	transition: background 0.18s ease, opacity 0.18s ease;
	/* Tap target minimum per WCAG 2.5.5 */
}

.lsp-arrow:hover {
	background: rgba( 0, 0, 0, 0.75 );
}

.lsp-arrow:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	background: rgba( 0, 0, 0, 0.75 );
}

.lsp-arrow:disabled,
.lsp-arrow[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.lsp-arrow--prev { inset-inline-start: 12px; }
.lsp-arrow--next { inset-inline-end: 12px;   }

/* ── Dots ──────────────────────────────────────────────────────────────────── */

.lsp-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 10px 0 4px;
	list-style: none;
	margin: 0;
}

.lsp-dot {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 0.18s ease, transform 0.18s ease;
	/* Expand click/tap target without changing visual size */
	position: relative;
}

.lsp-dot::after {
	content: '';
	position: absolute;
	inset: -8px;
}

.lsp-dot--active,
.lsp-dot:hover {
	opacity: 1;
	transform: scale( 1.3 );
}

.lsp-dot:focus-visible {
	opacity: 1;
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ── Screen reader live region ─────────────────────────────────────────────── */

.lsp-sr-live {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

/* ── Align support (Gutenberg wide / full) ─────────────────────────────────── */

.alignwide  .lsp-slider,
.alignfull  .lsp-slider {
	width: 100%;
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.lsp-track,
	.lsp-arrow,
	.lsp-dot {
		transition: none !important;
	}
}