/* ARX Galerie shortcode — CPC slider + lightbox triggers */
.arx-galerie {
	--arx-galerie-radius: 12px;
	--arx-galerie-gap: 12px;
	--arx-galerie-dots-space: 48px;
	--arx-galerie-tile-ratio: 4 / 3;
	width: 100%;
}

.arx-galerie-inner {
	width: 100%;
}

.arx-galerie-slider.arx-slider {
	width: 100%;
}

/* Room for CPC absolute dots (padding 13px + dot 10px ≈ 36px). */
.arx-galerie-slider.arx-slider.arx-slider-enabled {
	padding-bottom: var(--arx-galerie-dots-space);
	box-sizing: border-box;
}

.arx-galerie .arx-galerie-item {
	display: block;
	line-height: 0;
	box-sizing: border-box;
	/* Half-gap each side: works with CPC % slide widths without overflow. */
	padding: 0 calc(var(--arx-galerie-gap) / 2);
	overflow: visible;
	height: auto !important; /* override CPC equal-height leftovers */
	align-self: flex-start;
}

/* Clip zoom inside the tile so it never grows past the lateral gradients. */
.arx-galerie .arx-galerie-item-media {
	display: block;
	overflow: hidden;
	border-radius: var(--arx-galerie-radius);
	line-height: 0;
}

.arx-galerie .arx-galerie-item img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--arx-galerie-tile-ratio);
	object-fit: cover;
	object-position: center;
	display: block;
	transform: scale(1);
	transform-origin: center center;
	transition: transform 0.25s ease;
	will-change: transform;
}

.arx-galerie .arx-galerie-item:hover img,
.arx-galerie .arx-galerie-item:focus img,
.arx-galerie .arx-galerie-item:focus-visible img {
	transform: scale(1.06);
}

/* 1–2 photos: taller frame (less crop). */
.arx-galerie--count-1,
.arx-galerie--count-2 {
	--arx-galerie-tile-ratio: 16 / 10;
}

.arx-galerie--count-1 .arx-galerie-item img,
.arx-galerie--count-2 .arx-galerie-item img {
	max-height: 420px;
}

@media (max-width: 768px) {
	.arx-galerie {
		--arx-galerie-gap: 10px;
		--arx-galerie-radius: 10px;
	}

	.arx-galerie--count-1 .arx-galerie-item img,
	.arx-galerie--count-2 .arx-galerie-item img {
		max-height: 280px;
	}
}

/*
 * Arrows: CPC JS (`updateArrowsVerticalAlignment`) sets `top` to the vertical
 * center of the content box (excluding dots padding). Keep translateY(-50%)
 * so arrows sit on the photo mid-line, not the full parent height.
 */
.arx-galerie-slider.arx-slider-instance.arx-slider-enabled .arx-slider-arrows {
	/* Do not override top/transform — CPC handles photo-relative centering. */
	bottom: auto;
	height: auto;
	padding: 12px;
	align-items: center;
	display: flex;
	box-sizing: border-box;
}

/* Gradients on the photo band only (exclude dots padding). */
.arx-galerie-slider.arx-slider-instance.arx-slider-enabled .arx-slider-border-gradients {
	/* top | right | bottom | left — replaces CPC `inset: 0` */
	inset: 0 0 var(--arx-galerie-dots-space) 0;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.arx-galerie-slider.arx-slider-instance.arx-slider-enabled .arx-slider-arrows {
		padding: 6px;
	}

	.arx-galerie-slider.arx-slider-instance.arx-slider-enabled .arx-slider-arrows > div {
		width: 36px;
		height: 36px;
		background-size: 45%;
	}

	/* Touch: arrows always visible (hover is unreliable). */
	.arx-galerie-slider.arx-slider-instance.arx-slider-enabled[data-display-arrows-onhover="true"] .arx-slider-arrows {
		opacity: 1;
	}
}

/* When CPC slider is not yet / not enabled, keep a horizontal row (no vertical stack). */
.arx-galerie-slider.arx-slider:not(.arx-slider-enabled) {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	gap: var(--arx-galerie-gap);
	padding-inline: 0;
	align-items: flex-start;
}

.arx-galerie-slider.arx-slider:not(.arx-slider-enabled) .arx-galerie-item {
	flex: 0 0 70%;
	max-width: 280px;
	padding: 0;
}

@media (min-width: 769px) {
	.arx-galerie-slider.arx-slider:not(.arx-slider-enabled) .arx-galerie-item {
		flex-basis: 40%;
	}
}

@media (min-width: 981px) {
	.arx-galerie-slider.arx-slider:not(.arx-slider-enabled) .arx-galerie-item {
		flex-basis: 28%;
	}
}

.arx-galerie-empty {
	margin: 0;
	opacity: 0.75;
}