/* ==========================================================================
   Grid system
   1:1 translation of the existing LESS grid into plain CSS custom properties.
   Breakpoints are em-based and documented in base.css; they cannot live in
   custom properties because CSS custom properties do not work inside
   @media queries, so the raw values are repeated in each query below.
   ========================================================================== */

:root {
	--boxed: 140.8rem;
	--col-space: 3.2rem;
	--col-width: calc(8.8rem + var(--col-space));
	--boxed-padding: 16px;
}

/* --phone: 22.5em (360px) */
/* --phone-landscape: 30em (480px) */
/* --tablet: 48em (768px) */
/* --tablet-landscape: 64em (1024px) */
/* --desktop: 78.75em (1260px) */
/* --desktop-xl: 100em (1600px) */

/* --------------------------------------------------------------------------
   grid-wide
   14 tracks across the full viewport width. Columns 2-13 line up with the
   boxed content width, the outer two tracks absorb viewport bleed.
   Must be wrapped in .grid-wide-wrapper to clip horizontal overflow caused
   by the bleed tracks.
   -------------------------------------------------------------------------- */

.grid-wide-wrapper {
	overflow-x: clip;
	width: 100%;
}

.grid-wide {
	display: grid;
	grid-template-columns: minmax(16px, 1fr) repeat(12, minmax(0, var(--col-width))) minmax(16px, 1fr);
	width: 100%;
}

/* --------------------------------------------------------------------------
   grid-boxed
   12 tracks over the boxed content width, centered.
   -------------------------------------------------------------------------- */

.grid-boxed {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-space);
	width: 100%;
	max-width: calc(var(--boxed) + (2 * var(--boxed-padding)));
	margin: 0 auto;
	padding-left: var(--boxed-padding);
	padding-right: var(--boxed-padding);
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   grid-boxed-small
   10 tracks up to tablet-landscape, then behaves like .grid-boxed (12 tracks).
   -------------------------------------------------------------------------- */

.grid-boxed-small {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	column-gap: var(--col-space);
	width: 100%;
	max-width: calc(var(--boxed) + (2 * var(--boxed-padding)));
	margin: 0 auto;
	padding-left: var(--boxed-padding);
	padding-right: var(--boxed-padding);
	box-sizing: border-box;
}

@media (min-width: 64em) {
	.grid-boxed-small {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   grid-subgrid
   Applied to direct children of the grids above to inherit their column
   tracks 1:1. Falls back to normal block stacking when subgrid is
   unsupported, so nothing breaks.
   -------------------------------------------------------------------------- */

.grid-subgrid {
	display: grid;
	grid-template-columns: subgrid;
}

@supports not (grid-template-columns: subgrid) {
	.grid-subgrid {
		display: block;
	}
}