/**
 * Dekoracyjna grafika tła dla grup i kolumn.
 * Klasy ustawiane z panelu „Grafika tła” w edytorze.
 *
 * Zmienne pozycji siedzą na .has-bg-graphic (dziedziczą do dziecka w edytorze).
 * ::before maluje grafikę na bloku (frontend) albo na wewnętrznym elemencie (edytor).
 */

.has-bg-graphic {
	--bg-out: 0%;
	--bg-scale: 1;
	--bg-top: auto;
	--bg-right: auto;
	--bg-bottom: auto;
	--bg-left: auto;
	--bg-tx: 0;
	--bg-ty: 0;
	--bg-w: 469px;
	--bg-h: 772px;
	position: relative;
	overflow: visible !important;
}

.has-bg-graphic::before,
.editor-styles-wrapper .has-bg-graphic > :is(.wp-block-group, .wp-block-columns, .wp-block-column)::before {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: calc(var(--bg-w) * var(--bg-scale, 1));
	height: calc(var(--bg-h) * var(--bg-scale, 1));
	top: var(--bg-top, auto);
	right: var(--bg-right, auto);
	bottom: var(--bg-bottom, auto);
	left: var(--bg-left, auto);
	transform: translate(var(--bg-tx, 0), var(--bg-ty, 0));
}

.editor-styles-wrapper .block-editor-block-list__block.has-bg-graphic::before {
	content: none !important;
}

.editor-styles-wrapper .has-bg-graphic > :is(.wp-block-group, .wp-block-columns, .wp-block-column) {
	position: relative;
	overflow: visible !important;
}

.has-bg-graphic > *,
.editor-styles-wrapper .has-bg-graphic > :is(.wp-block-group, .wp-block-columns, .wp-block-column) > * {
	position: relative;
	z-index: 1;
}

/* Warianty kolorystyczne */
.has-bg-graphic.bg-graphic-on-dark::before,
.editor-styles-wrapper .has-bg-graphic.bg-graphic-on-dark > :is(.wp-block-group, .wp-block-columns, .wp-block-column)::before {
	background-image: url("../img/bg-graphic-dark.svg");
}

.has-bg-graphic.bg-graphic-on-light {
	--bg-w: 426px;
	--bg-h: 779px;
}

.has-bg-graphic.bg-graphic-on-light::before,
.editor-styles-wrapper .has-bg-graphic.bg-graphic-on-light > :is(.wp-block-group, .wp-block-columns, .wp-block-column)::before {
	background-image: url("../img/bg-graphic-light.svg");
}

/* Rozmiar */
.has-bg-graphic.bg-graphic-size-s { --bg-scale: 0.42; }
.has-bg-graphic.bg-graphic-size-m { --bg-scale: 0.7; }
.has-bg-graphic.bg-graphic-size-l { --bg-scale: 1; }
.has-bg-graphic.bg-graphic-size-xl { --bg-scale: 1.45; }

/* Wysunięcie poza krawędź (krok 5%) */
.has-bg-graphic.bg-graphic-out-5 { --bg-out: 5%; }
.has-bg-graphic.bg-graphic-out-10 { --bg-out: 10%; }
.has-bg-graphic.bg-graphic-out-15 { --bg-out: 15%; }
.has-bg-graphic.bg-graphic-out-20 { --bg-out: 20%; }
.has-bg-graphic.bg-graphic-out-25 { --bg-out: 25%; }
.has-bg-graphic.bg-graphic-out-30 { --bg-out: 30%; }
.has-bg-graphic.bg-graphic-out-35 { --bg-out: 35%; }
.has-bg-graphic.bg-graphic-out-40 { --bg-out: 40%; }
.has-bg-graphic.bg-graphic-out-45 { --bg-out: 45%; }
.has-bg-graphic.bg-graphic-out-50 { --bg-out: 50%; }
.has-bg-graphic.bg-graphic-out-55 { --bg-out: 55%; }
.has-bg-graphic.bg-graphic-out-60 { --bg-out: 60%; }

/* Zagłębienie do środka bloku (krok 5%) */
.has-bg-graphic.bg-graphic-in-5 { --bg-out: -5%; }
.has-bg-graphic.bg-graphic-in-10 { --bg-out: -10%; }
.has-bg-graphic.bg-graphic-in-15 { --bg-out: -15%; }
.has-bg-graphic.bg-graphic-in-20 { --bg-out: -20%; }
.has-bg-graphic.bg-graphic-in-25 { --bg-out: -25%; }
.has-bg-graphic.bg-graphic-in-30 { --bg-out: -30%; }
.has-bg-graphic.bg-graphic-in-35 { --bg-out: -35%; }
.has-bg-graphic.bg-graphic-in-40 { --bg-out: -40%; }
.has-bg-graphic.bg-graphic-in-45 { --bg-out: -45%; }
.has-bg-graphic.bg-graphic-in-50 { --bg-out: -50%; }
.has-bg-graphic.bg-graphic-in-55 { --bg-out: -55%; }
.has-bg-graphic.bg-graphic-in-60 { --bg-out: -60%; }

/* Pozycja */
.has-bg-graphic.bg-graphic-pos-leftTop {
	--bg-top: 0;
	--bg-left: 0;
	--bg-tx: calc(-1 * var(--bg-out, 0%));
	--bg-ty: calc(-1 * var(--bg-out, 0%));
}

.has-bg-graphic.bg-graphic-pos-rightTop {
	--bg-top: 0;
	--bg-right: 0;
	--bg-tx: var(--bg-out, 0%);
	--bg-ty: calc(-1 * var(--bg-out, 0%));
}

.has-bg-graphic.bg-graphic-pos-leftBottom {
	--bg-bottom: 0;
	--bg-left: 0;
	--bg-tx: calc(-1 * var(--bg-out, 0%));
	--bg-ty: var(--bg-out, 0%);
}

.has-bg-graphic.bg-graphic-pos-rightBottom {
	--bg-bottom: 0;
	--bg-right: 0;
	--bg-tx: var(--bg-out, 0%);
	--bg-ty: var(--bg-out, 0%);
}

.has-bg-graphic.bg-graphic-pos-left {
	--bg-top: 50%;
	--bg-left: 0;
	--bg-tx: calc(-1 * var(--bg-out, 0%));
	--bg-ty: -50%;
}

.has-bg-graphic.bg-graphic-pos-right {
	--bg-top: 50%;
	--bg-right: 0;
	--bg-tx: var(--bg-out, 0%);
	--bg-ty: -50%;
}

.has-bg-graphic.bg-graphic-pos-top {
	--bg-top: 0;
	--bg-left: 50%;
	--bg-tx: -50%;
	--bg-ty: calc(-1 * var(--bg-out, 0%));
}

.has-bg-graphic.bg-graphic-pos-bottom {
	--bg-bottom: 0;
	--bg-left: 50%;
	--bg-tx: -50%;
	--bg-ty: var(--bg-out, 0%);
}

@media screen and (max-width: 1000px) {
	.has-bg-graphic {
		--bg-scale-mobile: 0.62;
	}

	.has-bg-graphic::before,
	.editor-styles-wrapper .has-bg-graphic > :is(.wp-block-group, .wp-block-columns, .wp-block-column)::before {
		width: calc(var(--bg-w) * var(--bg-scale, 1) * var(--bg-scale-mobile, 1));
		height: calc(var(--bg-h) * var(--bg-scale, 1) * var(--bg-scale-mobile, 1));
	}
}