/**
 * core/group: Klasse stacked-img-slider
 *
 * Layout: horizontale Spalten (je 2× 300 px Bilder), 40 px Gap, Versatz -40 / 0 / +40 px (3er-Rhythmus).
 * Full-Bleed: alignfull + 100vw-Breakout.
 */

.wp-block-group.stacked-img-slider {
	--precisis-stacked-img-size: 300px;
	--precisis-stacked-img-gap: 40px;

	box-sizing: border-box;
	display: flex !important;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--precisis-stacked-img-gap);
	max-width: none !important;
	min-height: calc(
		2 * var(--precisis-stacked-img-size) + var(--precisis-stacked-img-gap) + 2 * var(--precisis-stacked-img-gap)
	);
	overflow-x: auto;
	overflow-y: hidden;
	padding-block: var(--precisis-stacked-img-gap);
	padding-inline: 0 !important;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wp-block-group.stacked-img-slider::-webkit-scrollbar {
	display: none;
}

/*
 * Full-Bleed bis zum Browser-Rand (auch in main / has-global-padding).
 * has-global-padding auf derselben Group würde sonst seitliches Root-Padding setzen.
 */
.wp-block-group.alignfull.stacked-img-slider,
.has-global-padding > .wp-block-group.alignfull.stacked-img-slider {
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@supports (width: 100dvw) {
	.wp-block-group.alignfull.stacked-img-slider,
	.has-global-padding > .wp-block-group.alignfull.stacked-img-slider {
		width: 100dvw;
		max-width: 100dvw !important;
		margin-left: calc(50% - 50dvw) !important;
		margin-right: calc(50% - 50dvw) !important;
	}
}

.wp-block-group.stacked-img-slider.is-layout-constrained > .wp-block-group {
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Spalten — Versatz -40 / 0 / +40 (Frontend: JS nach Index; Editor/Fallback: nth-child) */
.wp-block-group.stacked-img-slider > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--precisis-stacked-img-size);
	gap: var(--precisis-stacked-img-gap);
	width: var(--precisis-stacked-img-size);
	min-width: var(--precisis-stacked-img-size);
	transform: translateY(var(--precisis-stacked-offset, 0));
}

.wp-block-group.stacked-img-slider > .wp-block-group:nth-child(3n + 1) {
	--precisis-stacked-offset: -40px;
}

.wp-block-group.stacked-img-slider > .wp-block-group:nth-child(3n + 2) {
	--precisis-stacked-offset: 0;
}

.wp-block-group.stacked-img-slider > .wp-block-group:nth-child(3n) {
	--precisis-stacked-offset: 40px;
}

/* Bilder */
.wp-block-group.stacked-img-slider .wp-block-image {
	width: var(--precisis-stacked-img-size);
	max-width: none;
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--lg, 20px);
}

.wp-block-group.stacked-img-slider .wp-block-image img {
	display: block;
	width: var(--precisis-stacked-img-size) !important;
	height: var(--precisis-stacked-img-size) !important;
	max-width: none !important;
	aspect-ratio: auto !important;
	border-radius: var(--wp--preset--border-radius--lg, 20px);
	object-fit: cover;
	object-position: center;
}