/**
 * Theme – Utilities
 *
 * Kleine, wiederverwendbare Helfer-Klassen für den Block-Editor.
 * Im Feld „Zusätzliche CSS-Klasse(n)" eines Blocks eintragen.
 *
 * Präfix `spnkt-` (Schwarzpunkt) kennzeichnet projektübergreifende
 * Agentur-Utilities, abgegrenzt von themespezifischen `spnkt-`-Komponenten.
 *
 * Breakpoint-Referenz siehe global.css (--spnkt-bp-md: 782px).
 *
 * @package spnkt
 */

/* =========================================================================
   Hintergrundgrafik (.spnkt-grafik)
   =========================================================================
   Legt die Kampagnen-Grafik (--spnkt-grafik, aus theme.json via
   inc/page-header.php) hinter den Block. background-attachment: fixed hält
   sie beim Scrollen relativ zum Viewport – Blöcke am Seitenanfang und -ende
   zeigen dadurch denselben Ausschnitt, als läge ein Motiv hinter der Seite.
   iOS/Safari ignoriert fixed; dort steht die Grafik still.

   Der Block braucht einen eigenen Hintergrund, sonst ist nichts zu sehen.
   ========================================================================= */

.spnkt-grafik {
	isolation: isolate;
	position: relative;
}

.spnkt-grafik::after {
	background-attachment: fixed;
	background-image: var(--spnkt-grafik);
	background-position: 50vw -100px;
	background-repeat: no-repeat;
	background-size: max(100%, 800px) max(100%, 800px);
	content: "";
	inset: 0;
	opacity: 0.05;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

@media (min-width: 782px) {
	.spnkt-grafik::after {
		background-position-x: 50vw;
	}
}

@media (min-width: 1240px) {
	.spnkt-grafik::after {
		background-position-x: calc(50% + 495px);
		background-position-y: -400px;
		background-size: max(100%, 1400px) max(100%, 1400px);
	}
}

@media (prefers-reduced-transparency: reduce) {
	.spnkt-grafik::after {
		display: none;
	}
}

/* =========================================================================
   Flex-Ausrichtung (Hauptachse)
   =========================================================================
   Macht den Block zum Flex-Container und richtet seine Kinder entlang der
   Hauptachse aus. Wirkt auf allen Breakpoints.
   ========================================================================= */

.spnkt-justify-start {
	display: flex;
	justify-content: flex-start;
}

.spnkt-justify-center {
	display: flex;
	justify-content: center;
}

.spnkt-justify-end {
	display: flex;
	justify-content: flex-end;
}

/* =========================================================================
   Flex-Ausrichtung – nur Desktop (ab 782px)
   =========================================================================
   Mobil unverändert (Block-Standard), ab 782px greift die Ausrichtung.
   ========================================================================= */

@media (min-width: 782px) {
	.spnkt-justify-start-desktop {
		display: flex;
		justify-content: flex-start;
	}

	.spnkt-justify-center-desktop {
		display: flex;
		justify-content: center;
	}

	.spnkt-justify-end-desktop {
		display: flex;
		justify-content: flex-end;
	}
}