/*
 * Image carousel styles.
 *
 * Control colours and sizes below are lifted from the old Slider Revolution
 * slide params (40px arrows on rgba(0,0,0,.5), 12px bullets, #999 -> #e1e1e1)
 * so the replacement looks like what was there before.
 */

.bg-slider {
	--bg-slider-ratio: 4/3;
	position: relative;
	width: 100%;
	margin: 0 0 20px;
	background: #e7e7e7;
	overflow: hidden;
}

.bg-slider__viewport {
	position: relative;
	width: 100%;
	aspect-ratio: var(--bg-slider-ratio);
}

.bg-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 300ms ease-in-out;
	pointer-events: none;
}

.bg-slider__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

/*
 * Source images are inconsistent - mostly 800x600 but some portrait - and the
 * old slider forced them all into a fixed 1240x868 frame with bg_fit "cover".
 * object-fit reproduces that crop.
 */
.bg-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	padding: 0;
	border: 0;
	max-width: none;
}

/* Arrows */
.bg-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms ease, background-color 200ms ease;
}

.bg-slider__nav--prev { left: 12px; }
.bg-slider__nav--next { right: 12px; }

.bg-slider:hover .bg-slider__nav,
.bg-slider:focus-within .bg-slider__nav {
	opacity: 1;
}

.bg-slider__nav:hover,
.bg-slider__nav:focus-visible {
	background: #000;
	opacity: 1;
}

/* Keep arrows permanently visible on touch devices, where there is no hover. */
@media (hover: none) {
	.bg-slider__nav { opacity: 1; }
}

/* Bullets */
.bg-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.bg-slider__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 3px solid #e5e5e5;
	border-radius: 50%;
	background: linear-gradient(#999, #e1e1e1);
	cursor: pointer;
	box-sizing: content-box;
}

.bg-slider__dot.is-active,
.bg-slider__dot:hover {
	background: #666;
}

.bg-slider__dot:focus-visible,
.bg-slider__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* A single-image "carousel" needs no controls. */
.bg-slider--single .bg-slider__nav,
.bg-slider--single .bg-slider__dots {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.bg-slider__slide { transition: none; }
}