/* utilities.css — small composable helpers */

/* Stack & cluster */
.stack > * + * { margin-block-start: var(--space-s); }
.stack-m > * + * { margin-block-start: var(--space-m); }
.stack-l > * + * { margin-block-start: var(--space-l); }

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

.grid { display: grid; gap: var(--space-l); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) {
	.grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-s { gap: var(--space-s); }
.gap-m { gap: var(--space-m); }

.mt-s { margin-block-start: var(--space-s); }
.mt-m { margin-block-start: var(--space-m); }
.mt-l { margin-block-start: var(--space-l); }
.mt-xl { margin-block-start: var(--space-xl); }

.mb-s { margin-block-end: var(--space-s); }
.mb-m { margin-block-end: var(--space-m); }
.mb-l { margin-block-end: var(--space-l); }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: 0.875rem 1.5rem;
	min-height: 48px;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: var(--fw-button);
	font-size: var(--fs-body-m);
	line-height: 1;
	text-decoration: none;
	transition: transform var(--dur-base) var(--ease-out),
				background-color var(--dur-base) var(--ease-out),
				color var(--dur-base) var(--ease-out);
	border: 1.5px solid transparent;
	cursor: pointer;
	white-space: nowrap;
}
.btn:focus-visible { outline-offset: 4px; }

.btn--primary {
	background: var(--color-brand-primary);
	color: var(--color-paper);
}
.btn--primary:hover {
	background: var(--color-brand-primary-700);
	color: var(--color-paper);
	transform: translateY(-1px);
}

.btn--secondary {
	background: var(--color-brand-secondary);
	color: var(--color-ink-900);
}
.btn--secondary:hover {
	background: var(--color-brand-secondary-700);
	color: var(--color-ink-900);
	transform: translateY(-1px);
}

.btn--ghost {
	background: var(--color-paper);
	color: var(--color-ink-900);
	border-color: var(--color-ink-300);
}
.btn--ghost:hover {
	background: var(--color-paper);
	color: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
	transform: translateY(-1px);
}
.btn--ghost .icon { color: var(--color-brand-primary); }

.btn--lg { padding: 1rem 1.75rem; font-size: 1.1875rem; min-height: 56px; }

.btn .icon { width: 20px; height: 20px; }

/* Pill / chip */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: 0.375rem 0.75rem;
	background: var(--color-brand-primary-100);
	color: var(--color-brand-primary-700);
	border-radius: var(--radius-pill);
	font-size: var(--fs-caption);
	font-weight: var(--fw-strong);
}
.chip--secondary { background: var(--color-brand-secondary-100); color: var(--color-brand-secondary-700); }
.chip--neutral { background: var(--color-ink-100); color: var(--color-ink-700); }

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