/* Photo Gallery "Slider" layout (inc/gallery.php
   dfi2026_render_gallery_slider(), assets/js/gallery-slider.js) — an
   inline peek carousel: the active photo is centered at full strength,
   its immediate neighbors peek in dimmed on each side, everything
   further away is hidden. Every slide's position/scale/opacity comes
   from two custom properties JS sets per slide on every navigation:
   --dfi-slide-distance (signed, which side it sits on) and
   --dfi-slide-abs (clamped, how strongly it's scaled/dimmed). */

.dfi-gallery-slider {
	position: relative;
	overflow: hidden;
	height: min(70vh, 640px);
	min-height: 320px;
}

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

.dfi-gallery-slider__slide {
	position: absolute;
	inset: 0;
	margin: auto;
	width: min(74%, 900px);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.6s ease, opacity 0.6s ease;
	transform: translateX(calc(var(--dfi-slide-distance, 0) * 60%)) scale(calc(1 - 0.15 * var(--dfi-slide-abs, 0)));
	opacity: calc(1 - 0.45 * var(--dfi-slide-abs, 0));
	z-index: calc(10 - var(--dfi-slide-abs, 0));
}

.dfi-gallery-slider__slide--hidden {
	opacity: 0 !important;
	pointer-events: none;
}

.dfi-gallery-slider__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.dfi-gallery-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 1.5rem;
	cursor: pointer;
	opacity: 0.85;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
	transition: opacity 0.2s ease, transform 0.2s ease;
	/* Flex-centers the Font Awesome <i> regardless of its own
	   line-height/glyph metrics — width/height stay a full 44px so the
	   tap target is still generous even with no visible circle to fill. */
	display: flex;
	align-items: center;
	justify-content: center;
}

.dfi-gallery-slider__arrow:hover,
.dfi-gallery-slider__arrow:focus {
	opacity: 1;
	transform: translateY(-50%) scale(1.15);
}

.dfi-gallery-slider__arrow--prev {
	left: 1rem;
}

.dfi-gallery-slider__arrow--next {
	right: 1rem;
}

.dfi-gallery-slider__caption {
	max-width: 700px;
	margin: 1.25rem auto 0;
	padding: 0 1rem;
	text-align: center;
}

.dfi-gallery-slider__caption[hidden] {
	display: none;
}

.dfi-gallery-slider__caption h2 {
	font-size: 1.3rem;
	margin: 0 0 0.5rem;
}

.dfi-gallery-slider__caption p {
	margin: 0 0 0.5rem;
}

.dfi-gallery-slider__caption p:last-child {
	margin-bottom: 0;
}

.dfi-gallery-slider__thumbs {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	overflow-x: auto;
	padding: 1.25rem 1rem 0;
}

.dfi-gallery-slider__thumb {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.dfi-gallery-slider__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dfi-gallery-slider__thumb:hover {
	opacity: 0.85;
}

.dfi-gallery-slider__thumb.is-active {
	opacity: 1;
	border-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.dfi-gallery-slider__slide,
	.dfi-gallery-slider__arrow,
	.dfi-gallery-slider__thumb {
		transition: none !important;
	}
}

@media (max-width: 768px) {
	.dfi-gallery-slider {
		height: min(60vh, 480px);
	}

	.dfi-gallery-slider__slide {
		width: min(84%, 700px);
	}

	.dfi-gallery-slider__thumb {
		width: 48px;
		height: 48px;
	}
}

@media (max-width: 480px) {
	.dfi-gallery-slider {
		height: min(50vh, 380px);
	}

	.dfi-gallery-slider__slide {
		width: 92%;
	}

	.dfi-gallery-slider__arrow {
		width: 36px;
		height: 36px;
		font-size: 1.4rem;
	}
}