/**
 * CFUL 2026 — Layout: container + 12-column grid utility framework
 *
 * USAGE
 * -----
 *   <div class="cful-container">
 *     <div class="cful-grid">
 *       <div class="col-span-6 md:col-span-4 lg:col-span-3">…</div>
 *       <div class="col-span-6 md:col-span-8 lg:col-span-9">…</div>
 *     </div>
 *   </div>
 *
 * - `.cful-container` centers content and applies the responsive page
 *   gutter (--container-pad). `.cful-container--bleed` is the same but
 *   full width, for sections that need an edge-to-edge background with
 *   inner content still aligned to the grid (apply `.cful-container` to
 *   a nested element in that case).
 * - `.cful-grid` is a 12-column CSS grid (column count comes from the
 *   --grid-columns token, gap from --grid-gap).
 * - `.col-span-1` … `.col-span-12` and `.col-span-full` set how many
 *   columns a child spans. `.col-start-1` … `.col-start-13` pin a child's
 *   starting column line. `.row-span-1` … `.row-span-6` for row tracks.
 * - Alignment helpers (`.items-*`, `.justify-*`, `.self-*`) map to the
 *   matching align-items/justify-content/align-self values.
 * - BREAKPOINTS: --bp-sm: 600px, --bp-md: 900px, --bp-lg: 1200px (min-width).
 *   Every span/start utility has `sm:`, `md:` and `lg:` prefixed variants,
 *   e.g. `.md:col-span-4`, `.lg:col-start-7`, applied above the matching
 *   breakpoint via min-width media queries.
 * - MOBILE-FIRST STACKING: below --bp-md, an unprefixed `.col-span-*` /
 *   `.col-start-*` is treated as a desktop-only placement and collapses
 *   to a full-width single column UNLESS a `sm:` or `md:` override is
 *   present on the same element (a `sm:` utility still applies between
 *   --bp-sm and --bp-md). This lets you write one set of base classes for
 *   the “intended” desktop layout and only add prefixes where the mobile
 *   behaviour needs to differ from “stack full width”.
 */

/* -------------------------------------------------------------------- */
/* Breakpoints (documented here; CSS custom properties cannot be used   */
/* inside @media conditions, so the literal px values below must match) */
/* -------------------------------------------------------------------- */

:root {
	--bp-sm: 600px;
	--bp-md: 900px;
	--bp-lg: 1200px;
}

/* -------------------------------------------------------------------- */
/* Container                                                            */
/* -------------------------------------------------------------------- */

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

.cful-container--bleed {
	margin-inline: 0;
	max-width: none;
	padding-inline: 0;
	width: 100%;
}

/* -------------------------------------------------------------------- */
/* Grid                                                                 */
/* -------------------------------------------------------------------- */

.cful-grid {
	display: grid;
	gap: var(--grid-gap);
	grid-template-columns: repeat(var(--grid-columns, 12), minmax(0, 1fr));
}

/* -------------------------------------------------------------------- */
/* Column-span utilities                                                */
/* -------------------------------------------------------------------- */

.col-span-1  { grid-column: span 1 / span 1; }
.col-span-2  { grid-column: span 2 / span 2; }
.col-span-3  { grid-column: span 3 / span 3; }
.col-span-4  { grid-column: span 4 / span 4; }
.col-span-5  { grid-column: span 5 / span 5; }
.col-span-6  { grid-column: span 6 / span 6; }
.col-span-7  { grid-column: span 7 / span 7; }
.col-span-8  { grid-column: span 8 / span 8; }
.col-span-9  { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

/* -------------------------------------------------------------------- */
/* Column-start utilities                                               */
/* -------------------------------------------------------------------- */

.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-9  { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }
.col-start-13 { grid-column-start: 13; }

/* -------------------------------------------------------------------- */
/* Row utilities                                                        */
/* -------------------------------------------------------------------- */

.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
.row-span-4 { grid-row: span 4 / span 4; }
.row-span-5 { grid-row: span 5 / span 5; }
.row-span-6 { grid-row: span 6 / span 6; }

/* -------------------------------------------------------------------- */
/* Alignment helpers                                                    */
/* -------------------------------------------------------------------- */

.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }

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

.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }

/* -------------------------------------------------------------------- */
/* Generic layout helpers                                               */
/* -------------------------------------------------------------------- */

.cful-section {
	padding-block: var(--space-8);
}

.cful-stack > * + * {
	margin-top: var(--space-4);
}

.cful-flow > * + * {
	margin-top: var(--space-2);
}

/* -------------------------------------------------------------------- */
/* Mobile-first stacking collapse                                       */
/*                                                                       */
/* Below --bp-md, treat unprefixed col-span-*/col-start-* utilities as  */
/* desktop-only intent and collapse them to a full-width single column, */
/* unless a sm:/md: prefixed override is present on the same element.   */
/* -------------------------------------------------------------------- */

@media (max-width: 899px) {
	[class*="col-span-"]:not([class*="sm:col-span-"]):not([class*="md:col-span-"]) {
		grid-column: 1 / -1;
	}

	[class*="col-start-"]:not([class*="sm:col-start-"]):not([class*="md:col-start-"]) {
		grid-column-start: auto;
	}
}

/* -------------------------------------------------------------------- */
/* sm: breakpoint (>= 600px) — span/start utilities                     */
/* -------------------------------------------------------------------- */

@media (min-width: 600px) {
	.sm\:col-span-1  { grid-column: span 1 / span 1; }
	.sm\:col-span-2  { grid-column: span 2 / span 2; }
	.sm\:col-span-3  { grid-column: span 3 / span 3; }
	.sm\:col-span-4  { grid-column: span 4 / span 4; }
	.sm\:col-span-5  { grid-column: span 5 / span 5; }
	.sm\:col-span-6  { grid-column: span 6 / span 6; }
	.sm\:col-span-7  { grid-column: span 7 / span 7; }
	.sm\:col-span-8  { grid-column: span 8 / span 8; }
	.sm\:col-span-9  { grid-column: span 9 / span 9; }
	.sm\:col-span-10 { grid-column: span 10 / span 10; }
	.sm\:col-span-11 { grid-column: span 11 / span 11; }
	.sm\:col-span-12 { grid-column: span 12 / span 12; }
	.sm\:col-span-full { grid-column: 1 / -1; }

	.sm\:col-start-1  { grid-column-start: 1; }
	.sm\:col-start-2  { grid-column-start: 2; }
	.sm\:col-start-3  { grid-column-start: 3; }
	.sm\:col-start-4  { grid-column-start: 4; }
	.sm\:col-start-5  { grid-column-start: 5; }
	.sm\:col-start-6  { grid-column-start: 6; }
	.sm\:col-start-7  { grid-column-start: 7; }
	.sm\:col-start-8  { grid-column-start: 8; }
	.sm\:col-start-9  { grid-column-start: 9; }
	.sm\:col-start-10 { grid-column-start: 10; }
	.sm\:col-start-11 { grid-column-start: 11; }
	.sm\:col-start-12 { grid-column-start: 12; }
	.sm\:col-start-13 { grid-column-start: 13; }
}

/* -------------------------------------------------------------------- */
/* md: breakpoint (>= 900px) — span/start utilities                     */
/* -------------------------------------------------------------------- */

@media (min-width: 900px) {
	.md\:col-span-1  { grid-column: span 1 / span 1; }
	.md\:col-span-2  { grid-column: span 2 / span 2; }
	.md\:col-span-3  { grid-column: span 3 / span 3; }
	.md\:col-span-4  { grid-column: span 4 / span 4; }
	.md\:col-span-5  { grid-column: span 5 / span 5; }
	.md\:col-span-6  { grid-column: span 6 / span 6; }
	.md\:col-span-7  { grid-column: span 7 / span 7; }
	.md\:col-span-8  { grid-column: span 8 / span 8; }
	.md\:col-span-9  { grid-column: span 9 / span 9; }
	.md\:col-span-10 { grid-column: span 10 / span 10; }
	.md\:col-span-11 { grid-column: span 11 / span 11; }
	.md\:col-span-12 { grid-column: span 12 / span 12; }
	.md\:col-span-full { grid-column: 1 / -1; }

	.md\:col-start-1  { grid-column-start: 1; }
	.md\:col-start-2  { grid-column-start: 2; }
	.md\:col-start-3  { grid-column-start: 3; }
	.md\:col-start-4  { grid-column-start: 4; }
	.md\:col-start-5  { grid-column-start: 5; }
	.md\:col-start-6  { grid-column-start: 6; }
	.md\:col-start-7  { grid-column-start: 7; }
	.md\:col-start-8  { grid-column-start: 8; }
	.md\:col-start-9  { grid-column-start: 9; }
	.md\:col-start-10 { grid-column-start: 10; }
	.md\:col-start-11 { grid-column-start: 11; }
	.md\:col-start-12 { grid-column-start: 12; }
	.md\:col-start-13 { grid-column-start: 13; }
}

/* -------------------------------------------------------------------- */
/* lg: breakpoint (>= 1200px) — span/start utilities                    */
/* -------------------------------------------------------------------- */

@media (min-width: 1200px) {
	.lg\:col-span-1  { grid-column: span 1 / span 1; }
	.lg\:col-span-2  { grid-column: span 2 / span 2; }
	.lg\:col-span-3  { grid-column: span 3 / span 3; }
	.lg\:col-span-4  { grid-column: span 4 / span 4; }
	.lg\:col-span-5  { grid-column: span 5 / span 5; }
	.lg\:col-span-6  { grid-column: span 6 / span 6; }
	.lg\:col-span-7  { grid-column: span 7 / span 7; }
	.lg\:col-span-8  { grid-column: span 8 / span 8; }
	.lg\:col-span-9  { grid-column: span 9 / span 9; }
	.lg\:col-span-10 { grid-column: span 10 / span 10; }
	.lg\:col-span-11 { grid-column: span 11 / span 11; }
	.lg\:col-span-12 { grid-column: span 12 / span 12; }
	.lg\:col-span-full { grid-column: 1 / -1; }

	.lg\:col-start-1  { grid-column-start: 1; }
	.lg\:col-start-2  { grid-column-start: 2; }
	.lg\:col-start-3  { grid-column-start: 3; }
	.lg\:col-start-4  { grid-column-start: 4; }
	.lg\:col-start-5  { grid-column-start: 5; }
	.lg\:col-start-6  { grid-column-start: 6; }
	.lg\:col-start-7  { grid-column-start: 7; }
	.lg\:col-start-8  { grid-column-start: 8; }
	.lg\:col-start-9  { grid-column-start: 9; }
	.lg\:col-start-10 { grid-column-start: 10; }
	.lg\:col-start-11 { grid-column-start: 11; }
	.lg\:col-start-12 { grid-column-start: 12; }
	.lg\:col-start-13 { grid-column-start: 13; }
}