/**
 * Slider Gallery - endless marquee for the Gallery block (className "slider-gallery").
 * The wrapping ".pyrum-slider-gallery-track" / "-set" divs are injected server-side,
 * see pyrum_slider_gallery_marquee() in functions.php.
 */

.wp-block-gallery.slider-gallery {
	display: block !important;
	overflow: hidden;
	margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right)) !important;
	width: calc(100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
}

.pyrum-slider-gallery-track {
	display: flex;
	width: max-content;
	gap: var(--wp--preset--spacing--30);
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
	animation: pyrum-slider-gallery-scroll 90s linear infinite;
}

.pyrum-slider-gallery-set {
	display: flex;
	flex-shrink: 0;
	gap: var(--wp--preset--spacing--30);
}

.wp-block-gallery.slider-gallery .wp-block-image {
	flex: 0 0 calc((100vw - 2 * var(--wp--style--root--padding-left) - 5 * var(--wp--preset--spacing--30)) / 6) !important;
	margin: 0 !important;
}

.wp-block-gallery.slider-gallery .wp-block-image img {
	width: 100% !important;
	height: auto;
	display: block;
}

@media (max-width: 782px) {
	.wp-block-gallery.slider-gallery .wp-block-image {
		flex-basis: calc((100vw - 2 * var(--wp--style--root--padding-left) - var(--wp--preset--spacing--30)) / 2) !important;
	}

	.pyrum-slider-gallery-track {
		animation-duration: 45s;
	}
}

@media (min-width: 1400px) {
	.wp-block-gallery.slider-gallery {
		border-radius: 12px;
	}
}

/* Beschränkung: ab hier nicht weiter mit dem Viewport mitwachsen, sondern zentriert deckeln */
@media (min-width: 1800px) {
	.wp-block-gallery.slider-gallery {
		max-width: 1800px;
		margin-left: auto !important;
		margin-right: auto !important;
		width: 100% !important;
	}

	.wp-block-gallery.slider-gallery .wp-block-image {
		flex: 0 0 calc((1800px - 2 * var(--wp--style--root--padding-left) - 5 * var(--wp--preset--spacing--30)) / 6) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.slider-gallery {
		overflow-x: auto;
	}

	.pyrum-slider-gallery-track {
		animation: none;
		padding-right: 0;
	}

	.pyrum-slider-gallery-set[aria-hidden="true"] {
		display: none;
	}
}

@keyframes pyrum-slider-gallery-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}