/*
 * Brightway Consultancy — layout.css
 * Responsive layout primitives: container, 12-column grid, section rhythm.
 * Depends on tokens.css. MASTER.md §8.
 *
 * Principles:
 *   - Mobile-first. Grid starts as 1-column; expands to 12 at md (768px).
 *   - Universal collapse rule (§8.1): every asymmetric layout collapses
 *     to single-column below md. Column span helpers are gated behind
 *     @media (min-width: 768px), so they simply do not apply below it —
 *     each grid child falls back to the default 1fr row.
 *   - Logical properties everywhere (padding-inline / padding-block /
 *     margin-block / min-block-size). RTL-safe by construction.
 *   - Hero uses min-block-size: 100dvh (NOT 100vh — iOS Safari, BRIEF §8).
 *
 * Breakpoint reference (MASTER.md §8.1):
 *   sm  =  480px   large phones
 *   md  =  768px   tablet — asymmetric layouts collapse below this
 *   lg  = 1024px   small laptop
 *   xl  = 1280px   desktop
 *   2xl = 1440px   container cap (= --bwc-container-max)
 */

/* --- Container (MASTER.md §8.2) ---------------------------------------- */

.bwc-container {
	inline-size: 100%;
	max-inline-size: var(--bwc-container-max);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 4rem);
}

/* Narrow variant — long-form readable measure (legal pages, blog post body) */
.bwc-container--narrow {
	max-inline-size: calc(var(--bwc-content-max) + 8rem);
}

/* --- Section vertical rhythm (MASTER.md §8.3) -------------------------- */

.bwc-section {
	padding-block: var(--bwc-section-py);
}

/* Hero variant — full dynamic viewport height + vertical centering.
 * 100dvh accounts for the iOS Safari mobile address bar (BRIEF §8). */
.bwc-section--hero {
	min-block-size: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* --- 12-column grid (MASTER.md §8.2) ----------------------------------- */

.bwc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bwc-grid-gap);
}

@media (min-width: 768px) {
	.bwc-grid {
		grid-template-columns: repeat(var(--bwc-grid-cols), 1fr);
	}

	/* Column span helpers — only meaningful inside a 12-col grid (md+).
	 * Below md the grid is 1fr / 1-column, so spans are skipped. */
	.bwc-col-span-1  { grid-column: span 1; }
	.bwc-col-span-2  { grid-column: span 2; }
	.bwc-col-span-3  { grid-column: span 3; }
	.bwc-col-span-4  { grid-column: span 4; }
	.bwc-col-span-5  { grid-column: span 5; }
	.bwc-col-span-6  { grid-column: span 6; }
	.bwc-col-span-7  { grid-column: span 7; }
	.bwc-col-span-8  { grid-column: span 8; }
	.bwc-col-span-9  { grid-column: span 9; }
	.bwc-col-span-10 { grid-column: span 10; }
	.bwc-col-span-11 { grid-column: span 11; }
	.bwc-col-span-12 { grid-column: span 12; }

	/* Column start — offset columns for Editorial Split / Bento variance */
	.bwc-col-start-2 { grid-column-start: 2; }
	.bwc-col-start-3 { grid-column-start: 3; }
	.bwc-col-start-4 { grid-column-start: 4; }
	.bwc-col-start-5 { grid-column-start: 5; }
	.bwc-col-start-6 { grid-column-start: 6; }
	.bwc-col-start-7 { grid-column-start: 7; }
	.bwc-col-start-8 { grid-column-start: 8; }

	/* Row spans — needed by the Asymmetrical Bento pattern (MASTER §10) */
	.bwc-row-span-2 { grid-row: span 2; }
	.bwc-row-span-3 { grid-row: span 3; }
}

/*
 * AUDIT — Phase 5 complete, layout.css (2026-05-20)
 *
 * emil-design-eng (Before/After review):
 *   0 violation. layout.css declares structural primitives only — no
 *   transitions, no animations, no hover, no :active states (all live
 *   in components.css). Motion-token cross-checks trivially pass:
 *     - --bwc-ease-in not referenced anywhere (deliberately undefined).
 *     - No transition: all (no transitions at all in this file).
 *     - No keyboard-initiated animation, no scale(0), no >300ms UI
 *       duration to check (out of scope here).
 *   prefers-reduced-motion override remains a single global rule that
 *   will be defined in utilities.css.
 *
 * high-end-visual-design (Absolute Zero):
 *   0 violation. No Tailwind utility classes (all selectors prefixed
 *   .bwc-, vanilla CSS, plain CSS Grid). No symmetrical 3-col Bootstrap
 *   grid — grid is a flexible 12-col base on which Editorial Split and
 *   Asymmetrical Bento section patterns compose via spans/starts.
 *   Universal mobile collapse rule (§8.1) enforced: column span and
 *   row span helpers are gated behind @media (min-width: 768px), so
 *   every asymmetric layout falls back to single-column below md.
 *   Container uses logical properties (max-inline-size, padding-inline);
 *   hero uses min-block-size: 100dvh, not 100vh (iOS Safari guard).
 *   No edge-to-edge sticky layout primitive — nav floating pill will be
 *   composed in components.css, never via this file.
 *
 * Tokens consumed (no hardcoded values that bypass the design system):
 *   --bwc-container-max, --bwc-content-max, --bwc-grid-cols,
 *   --bwc-grid-gap, --bwc-section-py.
 *
 * Result: 0 blocking violation. Ready for visual validation + commit.
 */