/**
 * 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.
   Die Deckkraft kommt aus theme.json (custom.pageHeader.grafikDeckkraft),
   weil feine Höhenlinien mehr brauchen als flächige Jahrringe. Ebenso die
   horizontale Position: grafikPosition unter, grafikPositionDesktop ab 1240px.
   Unter 1240px zusätzlich grafikPositionY und grafikGroesse.

   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);
	/* Je Kampagne (unter 1240px): settings.custom.pageHeader.grafikPosition,
	   grafikPositionY und grafikGroesse */
	background-position: var(--wp--custom--page-header--grafik-position, 50vw) var(--wp--custom--page-header--grafik-position-y, -100px);
	background-repeat: no-repeat;
	background-size: max(100%, var(--wp--custom--page-header--grafik-groesse, 800px)) max(100%, var(--wp--custom--page-header--grafik-groesse, 800px));
	content: "";
	inset: 0;
	/* Deckkraft je Kampagne: settings.custom.pageHeader.grafikDeckkraft */
	opacity: var(--wp--custom--page-header--grafik-deckkraft, 0.05);
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

@media (min-width: 782px) {
	.spnkt-grafik::after {
		background-position-x: var(--wp--custom--page-header--grafik-position, 50vw);
	}
}

@media (min-width: 1240px) {
	.spnkt-grafik::after {
		/* Je Kampagne: settings.custom.pageHeader.grafikPositionDesktop */
		background-position-x: var(--wp--custom--page-header--grafik-position-desktop, 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;
	}
}