/**
 * Slideshow (inc/slideshow.php) — modeled on the Vimeo Background Video
 * sizing system (assets/css/vimeo.css): fixed aspect ratio, "above the
 * fold", or a custom viewport-height percentage, all driven by the same
 * data-height-mode attribute. assets/js/slideshow-frontend.js applies
 * the exact-pixel height for the latter two modes, same approach as
 * assets/js/vimeo-shortcode.js.
 */

.dfi-slideshow-outer {
	position: relative;
}

.dfi-slideshow {
	position: relative;
	width: 100%;
	height: 500px;
	overflow: hidden;
	background: #000;
}

/* Mode A: height driven purely by the configured aspect ratio. */
.dfi-slideshow[data-height-mode="aspect_ratio"] {
	height: auto;
	aspect-ratio: var(--dfi-slideshow-ratio-width, 16) / var(--dfi-slideshow-ratio-height, 9);
}

/* Mode B: 100vh is a pre-JS fallback; slideshow-frontend.js overrides
   this with an exact px height (viewport minus the actual rendered top
   bar + header height) on load/resize. */
.dfi-slideshow[data-height-mode="viewport_fill"] {
	height: 100vh;
}

/* Mode C: same idea as Mode B, but at a configurable VH percentage. */
.dfi-slideshow[data-height-mode="custom_vh"] {
	height: var(--dfi-custom-vh, 75vh);
}

.dfi-slideshow__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.dfi-slideshow__slide {
	position: absolute;
	inset: 0;
	background-image: var(--dfi-slide-bg, none);
	background-size: cover;
	background-position: center;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	transition: opacity var(--dfi-slideshow-transition-speed, 0.6s) ease, transform var(--dfi-slideshow-transition-speed, 0.6s) ease;
}

.dfi-slideshow__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

/* Zoom transition: the incoming slide scales down to rest instead of a
   plain cross-fade. Inactive slides sit slightly enlarged so there's
   somewhere to scale down *from* the instant they activate. */
.dfi-slideshow[data-transition="zoom"] .dfi-slideshow__slide {
	transform: scale(1.08);
}

.dfi-slideshow[data-transition="zoom"] .dfi-slideshow__slide.is-active {
	transform: scale(1);
}

/* None: instant cut, no transition at all. */
.dfi-slideshow[data-transition="none"] .dfi-slideshow__slide {
	transition: none;
}

/* Slide transition: directional, so it's driven by JS-added classes
   (assets/js/slideshow-frontend.js) rather than pure CSS — the outgoing
   slide exits one side while the incoming slide enters from the other,
   same technique as the Photo Gallery lightbox's slide navigation
   (assets/js/gallery.js). */
.dfi-slideshow__slide--exit-left {
	transform: translateX(-100%) !important;
	opacity: 0 !important;
}

.dfi-slideshow__slide--exit-right {
	transform: translateX(100%) !important;
	opacity: 0 !important;
}

.dfi-slideshow__slide--enter-from-left {
	transform: translateX(-100%) !important;
	opacity: 0 !important;
}

.dfi-slideshow__slide--enter-from-right {
	transform: translateX(100%) !important;
	opacity: 0 !important;
}

.dfi-slideshow__slide--no-transition {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.dfi-slideshow__slide {
		transition: none !important;
	}
}

.dfi-slideshow__caption-wrap {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	justify-content: var(--dfi-slideshow-caption-justify, flex-start);
	align-items: var(--dfi-slideshow-caption-align, flex-end);
	padding: 4vw;
	pointer-events: none;
}

.dfi-slideshow__caption {
	max-width: 32rem;
	padding: 1.5rem 2rem;
	background: var(--dfi-slideshow-caption-bg, rgba(0, 0, 0, 0.4));
	border-radius: 8px;
}

.dfi-slideshow__heading {
	margin: 0 0 0.5rem;
	font-size: var(--dfi-slideshow-heading-size, 2.5rem);
	line-height: 1.2;
	color: var(--dfi-slideshow-heading-color, #ffffff);
}

.dfi-slideshow__text {
	margin: 0;
	font-size: var(--dfi-slideshow-text-size, 1.1rem);
	line-height: 1.5;
	color: var(--dfi-slideshow-text-color, #ffffff);
}

.dfi-slideshow__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 56px;
	height: 56px;
	border: 0;
	background: transparent;
	color: #ffffff;
	font-size: 3rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.dfi-slideshow:hover .dfi-slideshow__arrow {
	opacity: 0.85;
}

.dfi-slideshow__arrow:hover,
.dfi-slideshow__arrow:focus-visible {
	opacity: 1 !important;
	transform: translateY(-50%) scale(1.15);
}

/* No hover on touchscreens — keep the arrows visibly present at a lower
   opacity instead of only reachable by an invisible tap-to-reveal. */
@media (hover: none) {
	.dfi-slideshow__arrow {
		opacity: 0.6;
	}
}

.dfi-slideshow__arrow--prev {
	left: 1rem;
}

.dfi-slideshow__arrow--next {
	right: 1rem;
}

@media (max-width: 768px) {
	.dfi-slideshow__caption-wrap {
		padding: 6vw 5vw;
	}

	.dfi-slideshow__caption {
		max-width: none;
		padding: 1.25rem 1.5rem;
	}
}