/*
 * Block-Stil «stack» (core/group), K05 Produkt-Stapelkarten (Gruppe G2).
 * Live: Element-Pack-Stacker (GSAP ScrollTrigger), Einstellungen Start 10 %, Stapelabstand 89 px, Skalierung 90 %,
 * 3D an. Jede Karte wird angeheftet, sobald ihre Oberkante 10 % der Viewporthöhe + i × 89 px erreicht; alle lösen
 * sich gemeinsam, wenn die letzte Karte 10 % erreicht; danach scrollt der Stapel als Ganzes weiter.
 *
 * Nachbau ohne GSAP:
 * - Anheften: position: sticky (top = 10vh + i × 89 px). Damit alle Karten gleichzeitig loslassen, reicht der
 *   Container unsichtbar um (n − 1) × 89 px über die letzte Karte hinaus (::after, Fluss per negativem Rand
 *   ausgeglichen), und Karte i hält per margin-bottom (n − 1 − i) × 89 px früher an (margin-top der Folgekarte
 *   gleicht den Fluss aus). Unterschiedliche Kartenhöhen gleicht product-stack.js über --prixo-stack-dh (eigene) und
 *   --prixo-stack-dhp (Vorgängerkarte) = Höhe letzte Karte − Höhe Karte aus.
 * - Skalieren (bereits gestapelte Karten schrumpfen bis 0.9^(n−1−i), Ursprung oben Mitte): product-stack.js.
 * - Abstand 20 px zwischen den Karten und nach der letzten (live Stacker-Abstand).
 * Nur Desktop und Tablet. Auf Mobile (≤ 767 px) stapelt nichts: die Karten stehen untereinander mit 20 px Lücke
 * (wie live der eigene Mobile-Kartensatz; seit dem Entscheid 24.09. abends gibt es nur noch einen Kartensatz).
 * prefers-reduced-motion: kein Skalieren.
 */
.wp-block-group.is-style-stack {
	--prixo-stack-top: 10vh;
	--prixo-stack-space: 89px;
	--prixo-stack-gap: 20px;
	--prixo-stack-n: 4;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--prixo-stack-gap);
}

/* :root davor: Als letztes Kind eines Abschnitts setzt WordPress sonst margin-block-end 0
 * (`:root :where(.is-layout-constrained) > :last-child`, gleiche Spezifität, lädt später). */
:root .wp-block-group.is-style-stack {
	margin-bottom: calc(-1 * ((var(--prixo-stack-n) - 1) * var(--prixo-stack-space) - var(--prixo-stack-gap)));
}

.wp-block-group.is-style-stack::after {
	content: "";
	flex: none;
	height: calc((var(--prixo-stack-n) - 1) * var(--prixo-stack-space) - var(--prixo-stack-gap));
	pointer-events: none;
}

.wp-block-group.is-style-stack > * {
	--prixo-stack-i: 0;
	--prixo-stack-j: 0;
	--prixo-stack-dh: 0px;
	--prixo-stack-release: calc(var(--prixo-stack-j) * var(--prixo-stack-space) + var(--prixo-stack-dh));
	position: sticky;
	top: calc(var(--prixo-stack-top) + var(--prixo-stack-i) * var(--prixo-stack-space));
	z-index: calc(var(--prixo-stack-i) + 1);
	margin: 0 0 var(--prixo-stack-release) !important;
	transform-origin: 50% 0;
}

.wp-block-group.is-style-stack > * + * {
	margin-top: calc(-1 * ((var(--prixo-stack-j) + 1) * var(--prixo-stack-space) + var(--prixo-stack-dhp, 0px))) !important;
}

/* Index von vorn (i) und von hinten (j); bis 8 Karten */
.wp-block-group.is-style-stack > :nth-child(2) { --prixo-stack-i: 1; }
.wp-block-group.is-style-stack > :nth-child(3) { --prixo-stack-i: 2; }
.wp-block-group.is-style-stack > :nth-child(4) { --prixo-stack-i: 3; }
.wp-block-group.is-style-stack > :nth-child(5) { --prixo-stack-i: 4; }
.wp-block-group.is-style-stack > :nth-child(6) { --prixo-stack-i: 5; }
.wp-block-group.is-style-stack > :nth-child(7) { --prixo-stack-i: 6; }
.wp-block-group.is-style-stack > :nth-child(8) { --prixo-stack-i: 7; }
.wp-block-group.is-style-stack > :nth-last-child(2) { --prixo-stack-j: 1; }
.wp-block-group.is-style-stack > :nth-last-child(3) { --prixo-stack-j: 2; }
.wp-block-group.is-style-stack > :nth-last-child(4) { --prixo-stack-j: 3; }
.wp-block-group.is-style-stack > :nth-last-child(5) { --prixo-stack-j: 4; }
.wp-block-group.is-style-stack > :nth-last-child(6) { --prixo-stack-j: 5; }
.wp-block-group.is-style-stack > :nth-last-child(7) { --prixo-stack-j: 6; }
.wp-block-group.is-style-stack > :nth-last-child(8) { --prixo-stack-j: 7; }
.wp-block-group.is-style-stack:has(> :nth-child(1):last-child) { --prixo-stack-n: 1; }
.wp-block-group.is-style-stack:has(> :nth-child(2):last-child) { --prixo-stack-n: 2; }
.wp-block-group.is-style-stack:has(> :nth-child(3):last-child) { --prixo-stack-n: 3; }
.wp-block-group.is-style-stack:has(> :nth-child(5):last-child) { --prixo-stack-n: 5; }
.wp-block-group.is-style-stack:has(> :nth-child(6):last-child) { --prixo-stack-n: 6; }
.wp-block-group.is-style-stack:has(> :nth-child(7):last-child) { --prixo-stack-n: 7; }
.wp-block-group.is-style-stack:has(> :nth-child(8):last-child) { --prixo-stack-n: 8; }

/* Mobile (≤ 767 px): kein Anheften, kein Überstand, Karten untereinander (Lücke --prixo-stack-gap) */
@media (width <= 767px) {
	:root .wp-block-group.is-style-stack {
		margin-bottom: 0;
	}

	.wp-block-group.is-style-stack::after {
		display: none;
	}

	.wp-block-group.is-style-stack > *,
	.wp-block-group.is-style-stack > * + * {
		position: relative;
		top: auto;
		z-index: auto;
		margin: 0 !important;
	}
}

/* Block-Editor: nicht anheften, damit die Karten beim Bearbeiten normal untereinander stehen */
.editor-styles-wrapper .wp-block-group.is-style-stack {
	margin-bottom: 0;
}

.editor-styles-wrapper .wp-block-group.is-style-stack::after {
	display: none;
}

.editor-styles-wrapper .wp-block-group.is-style-stack > * {
	position: relative;
	top: auto;
	margin: 0 !important;
}