/**
 * ACF / SCF Gallery Slider — frontend layout (colors via CSS variables on .acfgls-root).
 */

.acfgls-root {
	margin-bottom: 1.75rem;
	max-width: 100%;
}

.acfgls-main {
	position: relative;
	border-radius: var(--acfgls-radius, 12px);
	overflow: hidden;
	box-shadow: var(--acfgls-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
	background: var(--acfgls-surface, #fff);
}

.acfgls-main .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #111;
	min-height: 280px;
}

.acfgls-main .swiper-slide img,
.acfgls-main .swiper-slide video {
	width: 100%;
	height: auto;
	max-height: min(70vh, 640px);
	object-fit: contain;
	display: block;
}

.acfgls-main .swiper-button-next,
.acfgls-main .swiper-button-prev {
	width: var(--acfgls-arrow-size, 44px);
	height: var(--acfgls-arrow-size, 44px);
	margin-top: calc(0px - var(--acfgls-arrow-size, 44px) / 2);
	color: var(--acfgls-text-on-controls, #fff);
	background: rgba(26, 95, 122, 0.85);
	border-radius: 50%;
	transition: background 0.2s ease, transform 0.2s ease;
}

.acfgls-main .swiper-button-next:after,
.acfgls-main .swiper-button-prev:after {
	font-size: 16px;
	font-weight: 700;
}

.acfgls-main .swiper-button-next:hover,
.acfgls-main .swiper-button-prev:hover {
	background: var(--acfgls-secondary, #f4a259);
	transform: scale(1.05);
}

.acfgls-root--no-arrows .acfgls-main .swiper-button-next,
.acfgls-root--no-arrows .acfgls-main .swiper-button-prev {
	display: none !important;
}

.acfgls-slide-inner {
	position: relative;
	width: 100%;
}

.acfgls-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.acfgls-overlay .acfgls-btn {
	pointer-events: auto;
	border: 0;
	cursor: pointer;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(26, 95, 122, 0.88);
	color: var(--acfgls-text-on-controls, #fff);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	transition: background 0.2s ease, transform 0.2s ease;
}

.acfgls-overlay .acfgls-btn:hover {
	background: var(--acfgls-secondary, #f4a259);
	transform: scale(1.06);
}

.acfgls-root--no-zoom .acfgls-btn--zoom {
	display: none !important;
}

.acfgls-thumbs-wrap {
	margin-top: var(--acfgls-thumb-gap, 10px);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.acfgls-root--no-thumbs .acfgls-thumbs-wrap {
	display: none !important;
}

/* Thumbs track: stay inside viewport; horizontal touch must not fight vertical page scroll */
.acfgls-thumbs.acfgls-thumbs-swiper {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
	overflow: hidden;
	touch-action: pan-x pinch-zoom;
	-webkit-overflow-scrolling: touch;
}

.acfgls-thumbs .swiper-wrapper {
	box-sizing: border-box;
}

.acfgls-thumbs .swiper-slide {
	width: var(--acfgls-thumb-width, 88px);
	height: var(--acfgls-thumb-height, 64px);
	border-radius: var(--acfgls-radius-thumb, 8px);
	overflow: hidden;
	opacity: 0.55;
	cursor: pointer;
	box-sizing: border-box;
	border: 2px solid transparent;
	transition: opacity 0.2s ease, border-color 0.2s ease;
	flex-shrink: 0;
}

.acfgls-thumbs .swiper-slide-thumb-active {
	opacity: 1;
	border-color: var(--acfgls-secondary, #f4a259);
}

.acfgls-thumbs .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* Narrow screens: Swiper uses fractional slidesPerView — width is inline; keep readable height */
@media (max-width: 600px) {
	.acfgls-thumbs .swiper-slide {
		width: auto;
		height: clamp(48px, 18vw, 58px);
		border-radius: 14px;
	}
}