/* ==========================================================================
   9WEB STARTER THEME — LAYOUT
   Grid system, container widths, section rhythm.
   Mobile-first: base rules target the smallest viewport, breakpoints
   widen the grid upward. Breakpoint values are documented (and reused)
   in responsive.css — do not hard-code new breakpoint numbers here.
   ========================================================================== */

/* ---- Container utilities ---------------------------------------------------
   theme.json's contentSize/wideSize already drive native WP block
   alignment (.alignwide / default). These classes are for custom
   9Web sections/patterns that need a container width WP's alignment
   system doesn't cover (sm/md/xl tiers). */

.is-9w-container {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--9w-space-4);
}

.is-9w-container--sm { max-width: var(--9w-container-sm); }
.is-9w-container--md { max-width: var(--9w-container-md); }
.is-9w-container--lg { max-width: var(--9w-container-lg); }
.is-9w-container--xl { max-width: var(--9w-container-xl); }
.is-9w-container--wide { max-width: var(--9w-container-wide); }

/* ---- Section rhythm ---------------------------------------------------------
   Consistent vertical spacing between major page sections. Uses the
   spacing scale, never a hard-coded pixel value. */

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

@media (min-width: 1024px) {
	.is-9w-section {
		padding-block: var(--9w-space-24);
	}
}

/* ---- Grid system -------------------------------------------------------------
   12 columns desktop / 8 tablet / 4 mobile, per the master spec.
   --9w-grid-cols is overridden at each breakpoint in responsive.css
   rather than duplicated here, so the column count lives in one place. */

.is-9w-grid {
	--9w-grid-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--9w-grid-cols), minmax(0, 1fr));
	gap: var(--9w-space-6);
}

/* Span utilities — usable at any breakpoint's current column count.
   2/3/4 never exceed the smallest (4-col, mobile) grid, so they are
   safe unscoped at every breakpoint. 6/8/12 CAN exceed the mobile
   (4-col) and tablet (8-col) grids, so they start at full-width here
   and are only "unlocked" to their real span once the grid actually
   has enough columns to fit them — see responsive.css. This keeps the
   exact same class names/API; only the breakpoint at which each class
   takes its real span changes. */
.is-9w-col-2  { grid-column: span 2; }
.is-9w-col-3  { grid-column: span 3; }
.is-9w-col-4  { grid-column: span 4; }
.is-9w-col-6  { grid-column: 1 / -1; }
.is-9w-col-8  { grid-column: 1 / -1; }
.is-9w-col-12 { grid-column: 1 / -1; }
.is-9w-col-full { grid-column: 1 / -1; }

/* ---- Flex helpers -------------------------------------------------------------
   Kept minimal — layout-level flex utilities only. Component-specific
   flex rules belong in components.css (later phase), not here. */

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

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