/**
 * 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
 */

/* =========================================================================
   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;
	}
}