/**
 * Softlance Utility Classes — spec §15–16
 */

.sl-text-center { text-align: center; }
.sl-text-left { text-align: left; }
.sl-text-right { text-align: right; }

.sl-flex { display: flex; }
.sl-flex-center { display: flex; align-items: center; justify-content: center; }
.sl-flex-between { display: flex; align-items: center; justify-content: space-between; }
.sl-flex-wrap { flex-wrap: wrap; }
.sl-gap-sm { gap: 0.5rem; }
.sl-gap-md { gap: 1rem; }
.sl-gap-lg { gap: 1.5rem; }

.sl-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.sl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.sl-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.sl-mt-0 { margin-top: 0; }
.sl-mb-0 { margin-bottom: 0; }
.sl-mb-sm { margin-bottom: 0.5rem; }
.sl-mb-md { margin-bottom: 1rem; }
.sl-mb-lg { margin-bottom: 2rem; }
.sl-mb-xl { margin-bottom: 3rem; }

.sl-py-sm { padding-block: 1rem; }
.sl-py-md { padding-block: 2rem; }
.sl-py-lg { padding-block: 3rem; }
.sl-py-xl { padding-block: 5rem; }

.sl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sl-visually-hidden:not(:focus):not(:active) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.sl-gradient-text {
	background: var(--sl-gradient-cta);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.sl-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--sl-cyan-100);
	color: var(--sl-blue-700);
}

.sl-card {
	background: var(--sl-white);
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-radius-lg);
	padding: 1.5rem;
}

.sl-shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.sl-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }

.sl-max-w-narrow { max-width: 720px; margin-inline: auto; }
.sl-max-w-wide { max-width: 1280px; margin-inline: auto; }

@media (max-width: 1024px) {
	.sl-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.sl-grid-2,
	.sl-grid-3,
	.sl-grid-4 { grid-template-columns: 1fr; }
}

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

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