/* =========================================================================
   layout.css — Containers, Sections, Grid Primitives
   =========================================================================
   Layout-only concerns. No colors, no typography. Compose with base/components.
   ========================================================================= */

/* ---- Containers ---- */
.container {
	width: 100%;
	max-width: var(--container-base);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }
.container--full   { max-width: none; }

/* ---- Section spacing ---- */
.section {
	padding-block: var(--section-py);
}
.section--tight  { padding-block: calc(var(--section-py) * 0.6); }
.section--loose  { padding-block: calc(var(--section-py) * 1.4); }
.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Section variants — backgrounds */
.section--surface     { background-color: var(--color-surface); }
.section--surface-alt { background-color: var(--color-surface-alt); }
.section--brand       { background-color: var(--color-brand); color: var(--color-text-on-brand); }
.section--dark        { background-color: var(--color-surface-dark); color: var(--color-text-on-brand); }

.section--brand h1, .section--brand h2, .section--brand h3,
.section--dark  h1, .section--dark  h2, .section--dark  h3 {
	color: var(--color-text-on-brand);
}
.section--brand .lead, .section--dark .lead {
	color: color-mix(in srgb, var(--color-text-on-brand) 80%, transparent);
}

/* Section header — eyebrow + title + lead pattern */
.section-header {
	max-width: 720px;
	margin-bottom: var(--space-xl);
}
.section-header--center {
	text-align: center;
	margin-inline: auto;
}
.section-header > * + * { margin-top: var(--space-xs); }

/* Header + side action layout (e.g. "Featured Inventory" + "Browse all →") */
.section-head-row {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
}

/* =========================================================================
   GRID SYSTEMS
   ========================================================================= */

/* Auto-fit responsive grid — for class tiles, brand grids, card listings */
.grid {
	display: grid;
	gap: var(--space-md);
}
.grid--gap-sm { gap: var(--space-sm); }
.grid--gap-lg { gap: var(--space-lg); }

/* Responsive auto-fit — minimum card width controlled by --min */
.grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 280px)), 1fr));
}
.grid--auto-sm { --min: 200px; }
.grid--auto-md { --min: 280px; }
.grid--auto-lg { --min: 360px; }
.grid--auto-xl { --min: 440px; }

/* Fixed columns at desktop, stacks at mobile */
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 960px) {
	.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
	.grid--5, .grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.grid--2, .grid--3, .grid--4, .grid--5, .grid--6 {
		grid-template-columns: 1fr;
	}
	.grid--5, .grid--6 { grid-template-columns: repeat(2, 1fr); }
}

/* "Hero + sidekicks" — featured inventory layout: 1 big card + 4 small */
.grid--feature {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--space-md);
}
.grid--feature > :first-child {
	grid-row: span 2;
}
@media (max-width: 960px) {
	.grid--feature {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}
	.grid--feature > :first-child { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 600px) {
	.grid--feature {
		grid-template-columns: 1fr;
	}
	.grid--feature > :first-child { grid-column: auto; }
}

/* Two-column with optional ratio (use --ratio: 2 for 2:1, 3 for 3:1) */
.grid--split {
	grid-template-columns: minmax(0, var(--ratio, 1fr)) minmax(0, 1fr);
}
@media (max-width: 800px) {
	.grid--split { grid-template-columns: 1fr; }
}

/* =========================================================================
   FLEX UTILITIES (sparingly — most layout uses .grid)
   ========================================================================= */
.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	align-items: center;
}
.cluster--tight  { gap: var(--space-xs); }
.cluster--loose  { gap: var(--space-md); }

.stack > * + * { margin-top: var(--space-sm); }
.stack--tight > * + * { margin-top: var(--space-xs); }
.stack--loose > * + * { margin-top: var(--space-md); }
.stack--xl    > * + * { margin-top: var(--space-xl); }

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

/* =========================================================================
   ASPECT RATIOS — for card images, hero imagery
   ========================================================================= */
.aspect-card     { aspect-ratio: 4 / 3; }   /* 900×675 = 4:3, our 'big' image size */
.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-wide     { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-cinema   { aspect-ratio: 21 / 9; }

/* Cover image inside aspect-* wrapper */
.aspect-card > img,
.aspect-square > img,
.aspect-wide > img,
.aspect-portrait > img,
.aspect-cinema > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================================
   FULL-BLEED — escape container, span viewport
   ========================================================================= */
.full-bleed {
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}