/**
 * Utility classes
 * Layout primitives, spacing, colour and text helpers.
 */

/* --- Containers --- */

.container {
	width: 100%;
	max-width: var(--container-xl);
	margin: 0 auto;
	padding-inline: clamp(var(--space-5), 4vw, var(--space-12));
}

.container--sm { max-width: var(--container-sm); }
.container--md { max-width: var(--container-md); }
.container--lg { max-width: var(--container-lg); }
.container--xl { max-width: var(--container-xl); }
.container--2xl { max-width: var(--container-2xl); }
.container--flush { max-width: none; }

/* --- Section rhythm --- */

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

.section--sm { padding-block: var(--space-10); }
.section--lg { padding-block: var(--space-24); }

.section__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
}

/* Thin dividing rule, as used between style guide sections. */
.rule {
	border: 0;
	border-top: var(--border-width) solid var(--color-border);
	margin-block: var(--space-8);
}

.rule--strong {
	border-top-color: var(--color-border-strong);
}

/* --- Layout primitives --- */

.stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-8); }

.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

.cluster--between {
	justify-content: space-between;
}

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

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/* --- Text --- */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.text-balance { text-wrap: balance; }
.text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-sans); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-medium { font-weight: var(--weight-medium); }

/* --- Colour --- */

.text-forest { color: var(--forest); }
.text-clay { color: var(--clay); }
.text-ivory { color: var(--ivory); }
.text-muted { color: var(--color-muted); }

.bg-forest {
	background-color: var(--forest);
	color: var(--color-inverse);
}

.bg-sage { background-color: var(--sage); }
.bg-sage-light { background-color: var(--sage-light); }
.bg-ivory { background-color: var(--ivory); }
.bg-surface { background-color: var(--color-surface); }

.bg-clay {
	background-color: var(--clay);
	color: var(--color-inverse);
}

.bordered { border: var(--border-width) solid var(--color-border); }
.bordered-strong { border: var(--border-width) solid var(--color-border-strong); }

/* --- Spacing --- */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* --- Accessibility / visibility --- */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Visible only when focused — skip links. */
.skip-link:focus {
	position: fixed;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 1100;
	width: auto;
	height: auto;
	padding: var(--space-3) var(--space-4);
	clip-path: none;
	background: var(--color-primary);
	color: var(--color-inverse);
}

.is-hidden { display: none !important; }