/**
 * Grid System
 *
 * VISUAL THEME FRAMEWORK.
 *
 * A 12-column CSS Grid utility layer. .atb-grid establishes the
 * grid; .atb-grid__col--{n} spans n of 12 columns. This is additive
 * infrastructure — no existing section is required to use it, and
 * none of Phase 6/7's sections had their markup changed to add these
 * classes. A future content update could opt a section's __inner
 * wrapper into .atb-grid without touching that section's PHP logic,
 * since the class can simply be added alongside the existing one in
 * the markup string.
 *
 * Responsive behavior collapses to a single column below the medium
 * breakpoint, consistent with the Responsive Breakpoints token set.
 *
 * KNOWN CSS LIMITATION: @media values are hardcoded to match
 * --atb-breakpoint-md (768px) for the same reason documented in
 * container.css — custom properties cannot be read inside @media
 * conditions.
 *
 * TOKEN-ONLY: gap value reads from var(--atb-grid-gap).
 */

.atb-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--atb-grid-gap, 1.5rem);
}

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

/* Below the medium breakpoint, every column spans the full row,
   collapsing the grid to a single-column stack. */
@media (max-width: 768px) {
	.atb-grid__col--1,
	.atb-grid__col--2,
	.atb-grid__col--3,
	.atb-grid__col--4,
	.atb-grid__col--5,
	.atb-grid__col--6,
	.atb-grid__col--7,
	.atb-grid__col--8,
	.atb-grid__col--9,
	.atb-grid__col--10,
	.atb-grid__col--11,
	.atb-grid__col--12 {
		grid-column: span 12;
	}
}