/**
 * aesthetiflow — Bild-Raster mit Scroll-Effekt
 *
 * Drei Zustaende:
 *   Raster    — Desktop. Zwoelf Spalten, die Zoom-Kachel sitzt mittig.
 *   Slider    — unterhalb des Breakpoints. Kacheln nebeneinander; mit Pin
 *               schiebt das Skript das Raster per transform, ohne Pin bleibt
 *               es ein frei wischbarer nativer Scroller.
 *   Gestapelt — Alternative zum Slider: alles untereinander.
 */

.brxe-aef-exploded-grid {
	--aef-eg-cols: 12;
	/* Spaltenabstand bewusst groesser als der Zeilenabstand: in der Mittelzeile
	   liegen alle zwoelf Spalten lueckenlos nebeneinander, dort stiessen die
	   Nachbarn ans Zentrum. Der Zeilenabstand bleibt knapper, weil er die
	   Rasterhoehe treibt — und damit die Verkleinerung im Pin. */
	--aef-eg-col-gap: var(--aef-eg-global-col-gap, clamp(1rem, 2.4vw, 3rem));
	--aef-eg-row-gap: var(--aef-eg-global-row-gap, clamp(0.875rem, 1.8vw, 2rem));
	--aef-eg-radius: var(--aef-eg-global-radius, 12px);
	--aef-eg-m-w: 78;
	--aef-eg-m-ratio: 3 / 4;

	/* Ohne gesetzte Breite faellt das Element auf max-content zurueck. Sein
	   Inhalt ist im Slider die randlose Sticky-Ebene mit negativen
	   Prozent-Margins, und die loesen sich in der Intrinsic-Berechnung nicht
	   auf: Chrome und Firefox rechnen die Breite dadurch auf 0, Safari nicht.
	   Bei Breite 0 wird aus calc(50% - 50vw) ein halber Viewport nach links —
	   der ganze Slider rutscht aus dem Bild. */
	width: 100%;
}

.aef-eg__stage {
	width: 100%;
}

/* Das automatische Raster rechnet fest mit zwoelf Spalten — die Layout-Tabelle
   in PHP ist darauf ausgelegt. Die Spaltenzahl ist dort deshalb nicht
   einstellbar. */
.aef-eg[data-layout="auto"] {
	--aef-eg-cols: 12;
}

.aef-eg__grid {
	/* Positioniert, damit die Kacheln das Raster als offsetParent haben — sonst
	   zeigen offsetLeft/offsetTop an ihm vorbei und die Mittelpunkt-Berechnung
	   fuer Parallax, Zoom und Slider-Verschiebung laeuft ins Leere. */
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--aef-eg-cols), minmax(0, 1fr));
	column-gap: var(--aef-eg-col-gap);
	row-gap: var(--aef-eg-row-gap);
	align-items: start;
}

.aef-eg__grid::before,
.aef-eg__grid::after {
	/* Randabstand des Sliders, damit die erste und die letzte Kachel bis in die
	   Mitte ruecken koennen. Beide Prozentangaben — hier und an der Kachel —
	   beziehen sich auf dieselbe Content-Box, deshalb geht die Zentrierung exakt
	   auf. Im Raster sind die Spacer ausgeblendet. */
	display: none;
	content: "";
	flex: 0 0 calc((100% - var(--aef-eg-m-w) * 1%) / 2 - var(--aef-eg-col-gap));
}

.aef-eg__item {
	grid-column: var(--c, auto) / span var(--cs, 3);
	grid-row: var(--r, auto);
	margin: 0;
	margin-block-start: var(--oy, 0);
	aspect-ratio: var(--ratio, 3 / 2);
	overflow: hidden;
	border-radius: var(--aef-eg-radius);
	/* transform gehoert GSAP — hier bewusst nichts setzen, sonst ueberschreiben
	   sich CSS und Tween gegenseitig. */
	will-change: transform;
}

.aef-eg__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 991px) {
	.aef-eg[data-stack="991"][data-mobile="stack"] .aef-eg__item {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-block-start: 0;
	}

	.aef-eg[data-stack="991"][data-mobile="slider"] .aef-eg__grid {
		display: flex;
		align-items: center;
		gap: var(--aef-eg-col-gap);
		will-change: transform;
	}

	.aef-eg[data-stack="991"][data-mobile="slider"] .aef-eg__grid::before,
	.aef-eg[data-stack="991"][data-mobile="slider"] .aef-eg__grid::after {
		display: block;
	}

	.aef-eg[data-stack="991"][data-mobile="slider"] .aef-eg__item {
		flex: 0 0 calc(var(--aef-eg-m-w) * 1%);
		aspect-ratio: var(--aef-eg-m-ratio);
		margin-block-start: 0;
	}

	/* Mit Pin schiebt das Skript das Raster per transform — das laeuft auf der
	   GPU und traegt weich nach, waehrend ein gesetztes scrollLeft gegen den
	   nativen Momentum-Scroll arbeitet und hakelig wirkt. Geclippt wird auf der
	   Sticky-Ebene, damit die ueberstehenden Kacheln die Seite nicht
	   verbreitern und die Zoom-Kachel am Bildschirmrand endet. */
	.aef-eg[data-stack="991"][data-mobile="slider"] .aef-eg__sticky > .aef-eg__grid {
		height: 100%;
		max-width: none;
	}

	/* Ohne Pin gibt es nichts, was den Slider antreibt — dann bleibt er ein
	   nativer, frei wischbarer Scroller. */
	.aef-eg[data-stack="991"][data-mobile="slider"]:not([data-zoom="1"]) .aef-eg__grid {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.aef-eg[data-stack="991"][data-mobile="slider"]:not([data-zoom="1"]) .aef-eg__grid::-webkit-scrollbar {
		display: none;
	}

	.aef-eg[data-stack="991"][data-mobile="slider"]:not([data-zoom="1"]) .aef-eg__item {
		scroll-snap-align: center;
	}

	.aef-eg[data-stack="991"][data-mobile="slider"]:not([data-zoom="1"])[data-full-bleed="1"] .aef-eg__grid {
		width: 100vw;
		max-width: none;
		margin-inline: calc(50% - 50vw);
	}
}

@media (max-width: 767px) {
	.aef-eg[data-stack="767"][data-mobile="stack"] .aef-eg__item {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-block-start: 0;
	}

	.aef-eg[data-stack="767"][data-mobile="slider"] .aef-eg__grid {
		display: flex;
		align-items: center;
		gap: var(--aef-eg-col-gap);
		will-change: transform;
	}

	.aef-eg[data-stack="767"][data-mobile="slider"] .aef-eg__grid::before,
	.aef-eg[data-stack="767"][data-mobile="slider"] .aef-eg__grid::after {
		display: block;
	}

	.aef-eg[data-stack="767"][data-mobile="slider"] .aef-eg__item {
		flex: 0 0 calc(var(--aef-eg-m-w) * 1%);
		aspect-ratio: var(--aef-eg-m-ratio);
		margin-block-start: 0;
	}

	/* Mit Pin schiebt das Skript das Raster per transform — das laeuft auf der
	   GPU und traegt weich nach, waehrend ein gesetztes scrollLeft gegen den
	   nativen Momentum-Scroll arbeitet und hakelig wirkt. Geclippt wird auf der
	   Sticky-Ebene, damit die ueberstehenden Kacheln die Seite nicht
	   verbreitern und die Zoom-Kachel am Bildschirmrand endet. */
	.aef-eg[data-stack="767"][data-mobile="slider"] .aef-eg__sticky > .aef-eg__grid {
		height: 100%;
		max-width: none;
	}

	/* Ohne Pin gibt es nichts, was den Slider antreibt — dann bleibt er ein
	   nativer, frei wischbarer Scroller. */
	.aef-eg[data-stack="767"][data-mobile="slider"]:not([data-zoom="1"]) .aef-eg__grid {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.aef-eg[data-stack="767"][data-mobile="slider"]:not([data-zoom="1"]) .aef-eg__grid::-webkit-scrollbar {
		display: none;
	}

	.aef-eg[data-stack="767"][data-mobile="slider"]:not([data-zoom="1"]) .aef-eg__item {
		scroll-snap-align: center;
	}

	.aef-eg[data-stack="767"][data-mobile="slider"]:not([data-zoom="1"])[data-full-bleed="1"] .aef-eg__grid {
		width: 100vw;
		max-width: none;
		margin-inline: calc(50% - 50vw);
	}
}

@media (max-width: 478px) {
	.aef-eg[data-stack="478"][data-mobile="stack"] .aef-eg__item {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-block-start: 0;
	}

	.aef-eg[data-stack="478"][data-mobile="slider"] .aef-eg__grid {
		display: flex;
		align-items: center;
		gap: var(--aef-eg-col-gap);
		will-change: transform;
	}

	.aef-eg[data-stack="478"][data-mobile="slider"] .aef-eg__grid::before,
	.aef-eg[data-stack="478"][data-mobile="slider"] .aef-eg__grid::after {
		display: block;
	}

	.aef-eg[data-stack="478"][data-mobile="slider"] .aef-eg__item {
		flex: 0 0 calc(var(--aef-eg-m-w) * 1%);
		aspect-ratio: var(--aef-eg-m-ratio);
		margin-block-start: 0;
	}

	/* Mit Pin schiebt das Skript das Raster per transform — das laeuft auf der
	   GPU und traegt weich nach, waehrend ein gesetztes scrollLeft gegen den
	   nativen Momentum-Scroll arbeitet und hakelig wirkt. Geclippt wird auf der
	   Sticky-Ebene, damit die ueberstehenden Kacheln die Seite nicht
	   verbreitern und die Zoom-Kachel am Bildschirmrand endet. */
	.aef-eg[data-stack="478"][data-mobile="slider"] .aef-eg__sticky > .aef-eg__grid {
		height: 100%;
		max-width: none;
	}

	/* Ohne Pin gibt es nichts, was den Slider antreibt — dann bleibt er ein
	   nativer, frei wischbarer Scroller. */
	.aef-eg[data-stack="478"][data-mobile="slider"]:not([data-zoom="1"]) .aef-eg__grid {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.aef-eg[data-stack="478"][data-mobile="slider"]:not([data-zoom="1"]) .aef-eg__grid::-webkit-scrollbar {
		display: none;
	}

	.aef-eg[data-stack="478"][data-mobile="slider"]:not([data-zoom="1"]) .aef-eg__item {
		scroll-snap-align: center;
	}

	.aef-eg[data-stack="478"][data-mobile="slider"]:not([data-zoom="1"])[data-full-bleed="1"] .aef-eg__grid {
		width: 100vw;
		max-width: none;
		margin-inline: calc(50% - 50vw);
	}
}

/* ------------------------------------------------------------------ Pin & Zoom
 * Der Pin laeuft ueber position:sticky statt ueber ein Skript, das die Section
 * umbaut. Die Buehne ist so hoch wie Viewport + Pin-Strecke; die Sticky-Ebene
 * bleibt darin stehen, bis die Strecke durchlaufen ist.
 *
 * Achtung: Ein Vorfahre mit overflow:hidden wuerde sticky aushebeln. Auf der
 * Sticky-Ebene selbst ist overflow:hidden dagegen unproblematisch.
 */

.aef-eg__stage {
	position: relative;
	height: calc(100vh + var(--pin, 130vh));
}

.aef-eg__sticky {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	height: 100vh;
}

/* Beim Zoom waechst das ganze Raster ueber den Bildschirm hinaus. Geclippt wird
   auf dieser Ebene, deshalb muss sie den vollen Viewport einnehmen — sonst
   schnitte der Container-Innenabstand die wachsenden Kacheln an. */
.aef-eg[data-zoom="1"] .aef-eg__sticky {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	overflow: hidden;
}

.aef-eg__sticky > .aef-eg__grid {
	width: 100%;
	/* Die Sticky-Ebene laeuft von Rand zu Rand, damit am Bildschirm geclippt
	   wird und nicht am Container. Das Raster darin behaelt seine Breite. */
	max-width: var(--aef-eg-inner, none);
	margin-inline: auto;
	/* transform gehoert hier GSAP: es skaliert das ganze Raster um die Mitte
	   der Zoom-Kachel, damit die Nachbarn mitwachsen und nach aussen wandern.
	   Ein CSS-Transform daneben wuerde sich mit dem Tween beissen. */
}

/* Die zoomende Kachel liegt ueber den anderen und verliert am Ende ihren Radius. */
.aef-eg__item.is-zooming {
	position: relative;
	z-index: 2;
	border-radius: var(--zoom-radius, var(--aef-eg-radius));
}

.aef-eg__item.is-fading {
	/* opacity gehoert ebenfalls GSAP. */
}

@media (prefers-reduced-motion: reduce) {
	.aef-eg__item {
		transform: none !important;
	}

	.aef-eg__stage {
		height: auto;
	}

	.aef-eg__sticky {
		position: static;
		height: auto;
		overflow: visible;
	}

	.aef-eg[data-zoom="1"] .aef-eg__sticky {
		width: auto;
		margin-inline: 0;
		overflow: visible;
	}

	.aef-eg__item.is-fading {
		opacity: 1;
	}
}