/**
 * Utility styles.
 *
 * Small reusable classes that support mobile-first layouts.
 */

.bws-container {
	width: min(100% - (var(--bws-container-padding) * 2), var(--bws-container-lg));
	margin-inline: auto;
}

.bws-container-sm {
	width: min(100% - (var(--bws-container-padding) * 2), var(--bws-container-sm));
	margin-inline: auto;
}

.bws-container-md {
	width: min(100% - (var(--bws-container-padding) * 2), var(--bws-container-md));
	margin-inline: auto;
}

.bws-container-xl {
	width: min(100% - (var(--bws-container-padding) * 2), var(--bws-container-xl));
	margin-inline: auto;
}

.bws-section {
	padding-block: var(--bws-space-10);
}

.bws-section-tight {
	padding-block: var(--bws-space-8);
}

.bws-section-spacious {
	padding-block: var(--bws-space-12);
}

.bws-grid {
	display: grid;
	gap: var(--bws-space-4);
}

.bws-card-grid {
	display: grid;
	gap: var(--bws-space-4);
	grid-template-columns: minmax(0, 1fr);
}

.bws-stack {
	display: grid;
	gap: var(--bws-space-4);
}

.bws-overflow-hidden {
	overflow: hidden;
}

.bws-scroll-locked {
	overflow: hidden;
}

.bws-text-left {
	text-align: left;
}

.bws-text-center {
	text-align: center;
}

.bws-text-right {
	text-align: right;
}

.bws-text-muted {
	color: var(--bws-color-muted);
}

.bws-surface {
	border: var(--bws-border-subtle);
	background: var(--bws-color-surface);
}

.bws-surface-raised {
	border: var(--bws-border-subtle);
	background: var(--bws-color-surface-raised);
	box-shadow: none;
}

.bws-card-surface {
	border: var(--bws-border-subtle);
	border-radius: var(--bws-radius-lg);
	background: var(--bws-color-surface);
	box-shadow: none;
}

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

@media (min-width: 48rem) {
	.bws-section {
		padding-block: var(--bws-space-16);
	}

	.bws-section-tight {
		padding-block: var(--bws-space-10);
	}

	.bws-section-spacious {
		padding-block: var(--bws-space-16);
	}

	.bws-card-grid {
		gap: var(--bws-space-5);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.bws-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}