/**
 * Thumbnail strip for the Elementor image lightbox (built by lightbox-thumbs.js).
 * Lives on the light #fafafa lightbox shell (see customizer/additional-css.css),
 * so the strip uses black-on-light styling to match the rest of the lightbox UI.
 */

.elementor-lightbox .ck-lb-thumbs {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	gap: 8px;
	padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	transition: opacity 0.3s, visibility 0.3s;
}

.elementor-lightbox .ck-lb-thumbs::-webkit-scrollbar {
	display: none;
}

/* Center the row when it fits, left-align + scroll when it overflows.
   (justify-content:center clips leading thumbs in overflow, and the `safe`
   keyword isn't supported in iOS Safari — auto margins do the same job
   everywhere: they center while there's free space, collapse to 0 once the
   strip overflows.) */
.elementor-lightbox .ck-lb-thumb:first-child {
	margin-left: auto;
}
.elementor-lightbox .ck-lb-thumb:last-child {
	margin-right: auto;
}

/* Reserve room for the strip so it never covers the photo: Elementor's slide
   padding (70px desktop, 70px 0 mobile) is smaller than the strip. */
.elementor-lightbox .swiper:has(.ck-lb-thumbs) .elementor-lightbox-item {
	padding-bottom: 92px;
}

/* Desktop (pointer devices): follow Elementor's idle auto-hide of the UI.
   On touch there's no mousemove to bring the UI back — a tap on the backdrop
   closes the lightbox instead — so thumbs stay visible there. */
@media (hover: hover) {
	.elementor-lightbox .elementor-slideshow--ui-hidden .ck-lb-thumbs {
		opacity: 0;
		visibility: hidden;
	}
}

/* Stay out of the way of zoom/share modes everywhere. */
.elementor-lightbox .elementor-slideshow--zoom-mode .ck-lb-thumbs,
.elementor-lightbox .elementor-slideshow--share-mode .ck-lb-thumbs {
	opacity: 0;
	visibility: hidden;
}

/* Thumbs keep the image's own aspect ratio: fixed height, width follows.
   JS sets --ck-lb-ratio per thumb so the strip doesn't reflow while the
   thumbnails decode; 1/1 is only the fallback for an unknown ratio. */
.elementor-lightbox .ck-lb-thumb {
	flex: 0 0 auto;
	height: 56px;
	width: auto;
	aspect-ratio: var( --ck-lb-ratio, 1 );
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	/* Active state is opacity alone — no outline/border. */
	opacity: 0.45;
	transition: opacity 0.2s;
}

.elementor-lightbox .ck-lb-thumb:hover {
	opacity: 0.8;
}

.elementor-lightbox .ck-lb-thumb.is-active {
	opacity: 1;
}

.elementor-lightbox .ck-lb-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* The thumbnail strip already shows position in the set — the "1 / 9" fraction
   is redundant. (Swiper still writes to it; it's only hidden.) */
.elementor-lightbox .elementor-slideshow__counter {
	display: none !important;
}

@media (max-width: 767px) {
	/* Swipe + thumbnails cover navigation on mobile — arrows just cover the photo. */
	.elementor-lightbox .elementor-swiper-button-prev,
	.elementor-lightbox .elementor-swiper-button-next {
		display: none !important;
	}

	.elementor-lightbox .ck-lb-thumbs {
		gap: 6px;
		padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
	}

	.elementor-lightbox .ck-lb-thumb {
		height: 40px;
	}

	/* Mobile slide pad is 70px top/bottom; rebalance: less on top (only the
	   close button lives there), enough at the bottom for the strip + inset. */
	.elementor-lightbox .swiper:has(.ck-lb-thumbs) .elementor-lightbox-item {
		padding-top: 48px;
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}
}