/**
 * Utility classes. Keep this list small and purposeful —
 * components should get their own BEM styles in their block folder.
 */

/* ---- Text ---- */
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }
.u-text-muted { color: var(--color-text-muted); }
.u-text-inverse { color: var(--color-text-inverse); }

/* ---- Spacing ---- */
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mt-md { margin-top: var(--space-md); }
.u-mb-md { margin-bottom: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mb-lg { margin-bottom: var(--space-lg); }
.u-py-xl { padding-block: var(--space-xl); }

/* ---- Display / responsive visibility ---- */
.u-hide { display: none !important; }

@media (max-width: 767px) {
	.u-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
	.u-hide-desktop { display: none !important; }
}

/* ---- Flex / grid helpers ---- */
.u-flex { display: flex; }
.u-flex-wrap { flex-wrap: wrap; }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-gap-md { gap: var(--space-md); }
.u-gap-lg { gap: var(--space-lg); }

/* ---- Screen readers ---- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}