/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

// 1. Definiujemy jako mixin (a nie %placeholder)
@mixin atn-is-empty {
	&:not(:has(> *:not(.parallaxgroup-bg):not(.block-editor-inner-blocks))):not(:has(> .block-editor-inner-blocks > .block-editor-block-list__layout > [data-block]:not(.block-list-appender))) {
		@content;
	}
}

.wp-block-animatikon-parallaxgroup {
	// border: 1px solid red;
	display: grid;
	position: relative;
	align-items: start;
	visibility: hidden;
	box-sizing: border-box;
	grid-template-columns: minmax(0, 1fr); // dzieci nie rozpychają bloku

	// Tworzymy własny stacking context bez zmiany z-index samego bloku.
	// Dzięki temu wartości z-index warstw tła (0, 1, 2, …) i inner bloków (100)
	// są zawarte wewnątrz – nie wpływają na sticky headery, inne sekcje itp.
	// Działa poprawnie dla zagnieżdżonych parallaxgroupów (każdy ma swój context).
	isolation: isolate;

	--atn-height: var(--atn-height-d);
	--atn-overflow-x: var(--atn-overflow-x-d);
	--atn-overflow-y: var(--atn-overflow-y-d);
	--atn-block-z-index: var(--atn-block-z-index-d);
	height: var(--atn-height);
	overflow-x: var(--atn-overflow-x);
	overflow-y: var(--atn-overflow-y);
	z-index: var(--atn-block-z-index);

	@media (max-width: 782px) {
		--atn-height: var(--atn-height-t);
		--atn-overflow-x: var(--atn-overflow-x-t);
		--atn-overflow-y: var(--atn-overflow-y-t);
		--atn-block-z-index: var(--atn-block-z-index-t);
	}

	@media (max-width: 480px) {
		--atn-height: var(--atn-height-m);
		--atn-overflow-x: var(--atn-overflow-x-m);
		--atn-overflow-y: var(--atn-overflow-y-m);
		--atn-block-z-index: var(--atn-block-z-index-m);
	}

	
    // Row / Stack (flex): blok nie ma własnej szerokości, więc daj mu ją tylko tutaj
    .is-layout-flex > & {
        width: 100%;
        min-width: 0;
    }

	&.is-vertically-aligned-top {
		align-items: start;
	}

	&.is-vertically-aligned-center {
		align-items: center;
	}

	&.is-vertically-aligned-bottom {
		align-items: end;
	}

	// Warstwy tła paralaksowanego – absolutne, wykluczone z grid-area
	> .parallaxgroup-bg {
		position: absolute;
		inset: 0px;
		pointer-events: none;
		margin: 0;
		z-index: 0;
		border-radius: inherit;

		--atn-bg-overflow-x: var(--atn-bg-overflow-x-d);
		--atn-bg-overflow-y: var(--atn-bg-overflow-y-d);
		overflow-x: var(--atn-bg-overflow-x);
		overflow-y: var(--atn-bg-overflow-y);

		@media (max-width: 782px) {
			--atn-bg-overflow-x: var(--atn-bg-overflow-x-t);
			--atn-bg-overflow-y: var(--atn-bg-overflow-y-t);
		}

		@media (max-width: 480px) {
			--atn-bg-overflow-x: var(--atn-bg-overflow-x-m);
			--atn-bg-overflow-y: var(--atn-bg-overflow-y-m);
		}


		.parallaxgroup-bg-content {
			position: absolute;
			// Rozszerzamy się poza kadr o dokładnie tyle, ile wynosi travel distance tej warstwy.
			// Wartości ustawiane dynamicznie przez JS (computeAnimations) jako --atn-bg-margin-y/x.
			// Dzięki temu img (object-fit: cover) zawsze kryje blok bez potrzeby dużej skali.
			inset: calc(-1 * var(--atn-bg-margin-y, 0px)) calc(-1 * var(--atn-bg-margin-x, 0px));
			will-change: transform;
		}

		img {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;

			--atn-bg-scale: var(--atn-bg-scale-d, 1);
			--atn-bg-x: var(--atn-bg-x-d, 0%);
			--atn-bg-y: var(--atn-bg-y-d, 0%);
			--atn-bg-fit: var(--atn-bg-fit-d, cover);

			@media (max-width: 782px) {
				--atn-bg-scale: var(--atn-bg-scale-t, var(--atn-bg-scale-d, 1));
				--atn-bg-x: var(--atn-bg-x-t, var(--atn-bg-x-d, 0%));
				--atn-bg-y: var(--atn-bg-y-t, var(--atn-bg-y-d, 0%));
				--atn-bg-fit: var(--atn-bg-fit-t, var(--atn-bg-fit-d, cover));
			}

			@media (max-width: 480px) {
				--atn-bg-scale: var(--atn-bg-scale-m, var(--atn-bg-scale-t, var(--atn-bg-scale-d, 1)));
				--atn-bg-x: var(--atn-bg-x-m, var(--atn-bg-x-t, var(--atn-bg-x-d, 0%)));
				--atn-bg-y: var(--atn-bg-y-m, var(--atn-bg-y-t, var(--atn-bg-y-d, 0%)));
				--atn-bg-fit: var(--atn-bg-fit-m, var(--atn-bg-fit-t, var(--atn-bg-fit-d, cover)));
			}

			transform-origin: center center;
			transform: scale(var(--atn-bg-scale)) translate(var(--atn-bg-x), var(--atn-bg-y));
			object-fit: var(--atn-bg-fit);
		}
	}

	// InnerBlocks i inne dzieci – w grid-area ponad tłem.
	// Domyślny z-index musi być wyższy niż max liczba warstw tła (zIndex: index = 0,1,2,…).
	// Używamy 100 jako bezpiecznej wartości bazowej; --animatikon-stack-z nadpisuje gdy potrzeba.
	> *:not(.parallaxgroup-bg) {
		grid-area: 1 / 1;
		position: relative;
		z-index: var(--animatikon-stack-z, 100);
		// margin: 0;
		// width: 100%;
		min-width: 0;

		&.alignleft {
			justify-self: start;
			// width: auto;
		}
		&.aligncenter {
			justify-self: center;
			// width: auto;
		}
		&.alignright {
			justify-self: end;
			// width: auto;
		}
	}


	// Desktop: brak custom height → pusty blok dostaje min-height 200px
	&:not(.atn-has-custom-height-d) {
		@include atn-is-empty {
			min-height: 200px;
		}
	}

	// Tablet: własna wysokość → zerujemy min-height z desktopa;
	//         brak własnej wysokości → stosujemy 200px (o ile brak inner bloków)
	@media (max-width: 782px) {
		&.atn-has-custom-height-t {
			@include atn-is-empty {
				min-height: 0;
			}
		}
		&:not(.atn-has-custom-height-t) {
			@include atn-is-empty {
				min-height: 200px;
			}
		}
	}

	// Mobile: własna wysokość → zerujemy min-height z desktopa/tabletu;
	//         brak własnej wysokości → stosujemy 200px (o ile brak inner bloków)
	@media (max-width: 480px) {
		&.atn-has-custom-height-m {
			@include atn-is-empty {
				min-height: 0;
			}
		}
		&:not(.atn-has-custom-height-m) {
			@include atn-is-empty {
				min-height: 200px;
			}
		}
	}

}