/* MAX ACF Gallery Slider */

/* No custom properties are declared here on purpose. Declaring them would stop
   values set on an ancestor from reaching the slider, and the full-screen
   viewer themes its cloned slider exactly that way. Every use below carries
   its own fallback instead. */
.max-gs {
	position: relative;
}

.max-gs__viewport {
	position: relative;
}

/**
 * The track is a scroll-snap container rather than a transformed strip: swipe,
 * trackpad and keyboard scrolling then work natively, and the arrows and dots
 * simply drive scrollLeft.
 */
.max-gs__track {
	display: flex;
	gap: var(--max-gs-gap, 12px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.max-gs__track::-webkit-scrollbar {
	display: none;
}

.max-gs__track:focus-visible {
	outline: 2px solid var(--max-gs-dot-active, #e03a3c);
	outline-offset: 3px;
}

.max-gs__slide {
	flex: 0 0 calc((100% - (var(--max-gs-per, 1) - 1) * var(--max-gs-gap, 12px)) / var(--max-gs-per, 1));
	scroll-snap-align: start;
	margin: 0;
	min-width: 0;
	position: relative;
	background: var(--max-gs-slide-bg, #f1f1ef);
	border-radius: var(--max-gs-radius, 0px);
	overflow: hidden;
}

.max-gs__slide img {
	display: block;
	width: 100%;
	aspect-ratio: var(--max-gs-ratio, 4 / 3);
	object-fit: var(--max-gs-fit, cover);
	max-width: none;
}

/* "Image height" ratio: let the photo set its own height */
.max-gs--auto-height .max-gs__slide img {
	aspect-ratio: auto;
	height: auto;
}

.max-gs__link {
	display: block;
	line-height: 0;
}

.max-gs__caption {
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.4;
}

/* ---- arrows ---- */
.max-gs__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--max-gs-arrow-size, 44px);
	height: var(--max-gs-arrow-size, 44px);
	padding: 0;
	border: 0;
	border-radius: var(--max-gs-arrow-radius, 50%);
	background: var(--max-gs-arrow-bg, rgba(22, 21, 15, 0.55));
	color: var(--max-gs-arrow-color, #ffffff);
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.max-gs__arrow:hover,
.max-gs__arrow:focus-visible {
	background: var(--max-gs-arrow-bg-hover, rgba(22, 21, 15, 0.85));
}

.max-gs__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.max-gs__arrow svg {
	width: 55%;
	height: 55%;
}

.max-gs__arrow--prev {
	left: var(--max-gs-arrow-inset, 12px);
}

.max-gs__arrow--next {
	right: var(--max-gs-arrow-inset, 12px);
}

/* ---- nav row (dots, optionally with the arrows beside them) ---- */
.max-gs__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 14px;
}

.max-gs__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--max-gs-dot-gap, 8px);
}

.max-gs__dot {
	width: var(--max-gs-dot-size, 8px);
	height: var(--max-gs-dot-size, 8px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--max-gs-dot, #c9c9c4);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.max-gs__dot:hover {
	background: var(--max-gs-dot-active, #e03a3c);
}

.max-gs__dot.is-active {
	background: var(--max-gs-dot-active, #e03a3c);
	transform: scale(1.25);
}

.max-gs__dot:focus-visible {
	outline: 2px solid var(--max-gs-dot-active, #e03a3c);
	outline-offset: 2px;
}

/* Arrows below sit in the nav row, either side of the dots. */
.max-gs--arrows-below .max-gs__nav .max-gs__arrow {
	position: static;
	transform: none;
}

/* editor-only message when the field is empty */
.max-gs__notice {
	padding: 18px 20px;
	border: 1px dashed #c9c9c4;
	background: #faf9f7;
	font-size: 13px;
	line-height: 1.5;
	color: #6b7078;
}

@media (prefers-reduced-motion: reduce) {
	.max-gs__track {
		scroll-behavior: auto;
	}

	.max-gs__arrow,
	.max-gs__dot {
		transition: none;
	}
}

/* Zoom button wrapping a slide image (lightbox trigger). */
.max-gs__zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}

.max-gs__zoom:focus-visible {
	outline: 2px solid var(--max-gs-dot-active, #e03a3c);
	outline-offset: -2px;
}

.max-gs__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

/* =====================================================
   Lightbox
   ===================================================== */
.max-lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.max-lb[hidden] {
	display: none;
}

.max-lb__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 11, 0.92);
	cursor: zoom-out;
}

.max-lb__figure {
	position: relative;
	margin: 0;
	max-width: min(1400px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.max-lb__img {
	max-width: 100%;
	/* leave room for the caption and counter */
	max-height: calc(100vh - 140px);
	max-height: calc(100dvh - 140px);
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.max-lb__caption {
	color: #e8e8e4;
	font-size: 14px;
	line-height: 1.45;
	text-align: center;
	max-width: 70ch;
}

.max-lb__caption[hidden] {
	display: none;
}

.max-lb__counter {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	color: #b9b9b3;
	font-size: 13px;
	letter-spacing: 0.08em;
}

.max-lb__close,
.max-lb__arrow {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.max-lb__close:hover,
.max-lb__arrow:hover,
.max-lb__close:focus-visible,
.max-lb__arrow:focus-visible {
	background: rgba(255, 255, 255, 0.24);
}

.max-lb__close svg,
.max-lb__arrow svg {
	width: 22px;
	height: 22px;
}

.max-lb__close {
	top: 18px;
	right: 18px;
}

.max-lb__arrow--prev {
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
}

.max-lb__arrow--next {
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
}

.max-lb__arrow[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.max-lb {
		padding: 12px;
	}

	.max-lb__close,
	.max-lb__arrow {
		width: 40px;
		height: 40px;
	}

	.max-lb__arrow--prev { left: 8px; }
	.max-lb__arrow--next { right: 8px; }

	.max-lb__img {
		max-height: calc(100dvh - 160px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.max-lb__close,
	.max-lb__arrow {
		transition: none;
	}
}