/* PRE Slideshow (replaces Smart Slider image sliders) */
.pre-ss {
	position: relative;
	width: 100%;
	aspect-ratio: var(--pre-ss-ratio, 2000 / 1250);   /* space is reserved before images load: no layout shift */
	overflow: hidden;
	isolation: isolate;
}
.pre-ss__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
	z-index: 0;
}
.pre-ss__slide.is-active { opacity: 1; z-index: 2; }
.pre-ss__slide.is-prev { opacity: 1; z-index: 1; }      /* crossfade: the old image stays put underneath */
.pre-ss__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}

/* Crossfade: the new image fades in over the old one */
.pre-ss--crossfade .pre-ss__slide.is-active { animation: pre-ss-in var(--pre-ss-speed, 800ms) linear both; }
/* Fade: the old image fades away on top, revealing the new one underneath (never shows the page behind) */
.pre-ss--fade .pre-ss__slide.is-prev { z-index: 3; animation: pre-ss-out var(--pre-ss-speed, 800ms) linear both; }
.pre-ss.is-start .pre-ss__slide.is-active { animation: none; }  /* first image: no fade on page load */

@keyframes pre-ss-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pre-ss-out { from { opacity: 1; } to { opacity: 0; } }

/* Bars */
.pre-ss__bars {
	position: absolute;
	z-index: 5;
	display: flex;
	line-height: 0;
}
.pre-ss__bars--bottom { left: 50%; bottom: 23px; transform: translateX(-50%); flex-direction: row; }
.pre-ss__bars--right { right: 20px; top: 50%; transform: translateY(-50%); flex-direction: column; }
.pre-ss__bar {
	position: relative;
	width: 40px;
	height: 5px;
	margin: 4px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #fff;
	opacity: 0.5;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	min-height: 0;
	min-width: 0;
	font-size: 0;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
	transition: opacity 0.3s;
}
.pre-ss__bar:hover, .pre-ss__bar:focus, .pre-ss__bar:active { background: #fff; box-shadow: none; }
.pre-ss__bar::after { content: ""; position: absolute; inset: -10px -4px; }  /* bigger tap area, same look */
.pre-ss__bar.is-active, .pre-ss__bar:hover { opacity: 1; }
.pre-ss__bar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.pre-ss__slide.is-active, .pre-ss__slide.is-prev { animation: none !important; }
}

/* Pause / play button (bottom left). Two bars = pause, triangle = play. */
.pre-ss__pause {
	position: absolute;
	z-index: 6;
	left: 14px;
	bottom: 14px;
	width: 32px;
	height: 32px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s;
	-webkit-appearance: none;
	appearance: none;
}
.pre-ss:hover .pre-ss__pause, .pre-ss__pause:focus-visible, .pre-ss.is-paused .pre-ss__pause { opacity: 1; }
@media (hover: none) { .pre-ss__pause { opacity: 0.8; } }
.pre-ss__pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pre-ss__pause span { position: absolute; left: 50%; top: 50%; width: 10px; height: 12px; transform: translate(-50%, -50%); border-left: 3px solid #fff; border-right: 3px solid #fff; box-sizing: border-box; }
.pre-ss.is-paused .pre-ss__pause span { width: 0; height: 0; border: 0; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 2px; }
/* Very narrow screens (or 400% zoom): smaller progress bars so a long slideshow's bars fit */
@media (max-width: 400px) { .pre-ss__bar { width: 22px; margin: 4px 3px; } }