/* =========================================================================
 * Curvita — Layout primitives
 * -------------------------------------------------------------------------
 * Container, grid, stack, cluster, and visibility utilities. Components
 * compose these into real layouts instead of each reinventing margins
 * and flexbox. Inspired by "Every Layout" (every-layout.dev).
 *
 * Mobile-first: base styles target small screens, media queries progress
 * up to larger ones.
 * =========================================================================
 */


/* ─── Container ───────────────────────────────────────────────────── */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }
.container--fluid  { max-width: none; }


/* ─── Stack — vertical rhythm via owl selector ────────────────────── */
/* Usage: <div class="stack">...</div>. Every direct child gets a top
 * margin (except the first). Customize spacing with --stack-space. */

.stack > * + * {
	margin-block-start: var(--stack-space, var(--sp-4));
}

.stack--xs > * + * { --stack-space: var(--sp-1); }
.stack--sm > * + * { --stack-space: var(--sp-2); }
.stack--md > * + * { --stack-space: var(--sp-4); }
.stack--lg > * + * { --stack-space: var(--sp-6); }
.stack--xl > * + * { --stack-space: var(--sp-8); }


/* ─── Cluster — horizontal wrapping group with gap ─────────────────── */
/* Good for tag chips, nav links, filter pills, meta rows */

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

.cluster--start { justify-content: flex-start; }
.cluster--end   { justify-content: flex-end;   }
.cluster--center { justify-content: center;    }
.cluster--between { justify-content: space-between; }


/* ─── Grid — equal-column grid that collapses on mobile ───────────── */

.grid {
	display: grid;
	gap: var(--grid-gap, var(--sp-6));
	grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
}

.grid--cols-2 { --grid-cols: 2; }
.grid--cols-3 { --grid-cols: 3; }
.grid--cols-4 { --grid-cols: 4; }
.grid--cols-6 { --grid-cols: 6; }

/* Mobile: 4/3 cols collapse to 2; 2 collapses to 1 */
@media (max-width: 1023px) {
	.grid--cols-3,
	.grid--cols-4 { --grid-cols: 2; }
}
@media (max-width: 599px) {
	.grid--cols-3,
	.grid--cols-4,
	.grid--cols-6 { --grid-cols: 2; }
	.grid--cols-2 { --grid-cols: 1; }
}

/* Grid with a fixed auto-fitting column size — useful for product grids */
.grid--auto-fit {
	grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 240px), 1fr));
}


/* ─── Section — vertical page rhythm ──────────────────────────────── */

.section {
	padding-block: var(--sp-12);
}
.section--sm { padding-block: var(--sp-8);  }
.section--lg { padding-block: var(--sp-20); }

/* Background variants */
.section--surface { background: var(--c-surface); }
.section--brand   { background: var(--c-brand); color: var(--c-white); }
.section--dark    { background: var(--c-navy);  color: var(--c-white); }


/* ─── Aspect ratio helpers ────────────────────────────────────────── */

.aspect-square  { aspect-ratio: 1; }
.aspect-video   { aspect-ratio: 16 / 9; }
.aspect-product { aspect-ratio: var(--product-aspect-ratio); }


/* ─── Flow — for prose-style content (ring-fenced margins) ────────── */

.flow > * + * {
	margin-block-start: var(--flow-space, 1em);
}


/* ─── Visibility utilities ────────────────────────────────────────── */

.hidden { display: none !important; }

/* Hide on mobile (< 768px) */
@media (max-width: 767px) {
	.desktop-only { display: none !important; }
}

/* Hide on desktop (>= 768px) */
@media (min-width: 768px) {
	.mobile-only { display: none !important; }
}


/* ─── Text alignment utilities ────────────────────────────────────── */

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


/* ─── Margin/padding reset helpers ────────────────────────────────── */

.no-margin   { margin: 0 !important; }
.no-padding  { padding: 0 !important; }