/*
 * framework.css — the layout framework's shared primitive: the grid.
 *
 * Enqueued only where the active theme declares
 * `add_theme_support( 'groundrules-framework' )` — a site whose theme
 * never consumes the grid should not ship it. Everything else about a
 * page's layout (the measure, the wide size, sections, the page shell)
 * is the theme's business; this file carries only what is identical on
 * every framework site.
 *
 * Sixteen columns, because sixteen halves cleanly four times: halves,
 * quarters and eighths are all whole numbers of columns, and the odd
 * splits an editorial page actually wants — 7/9, 5/11, 6/10 — are
 * available without rounding. A twelve-column grid buys divisibility by
 * three at the cost of every one of those.
 *
 * **Sixteen does not divide by three**, and that is the trade. A row of
 * three cards is not a grid problem: it is one block on the grid that
 * divides itself internally. Do that, rather than forcing 5/5/6 and
 * calling it a grid. The page grid says where a block sits; what a
 * block does inside its own edges is the component's business.
 *
 * The grid is a reference, not a component library. There are no span
 * classes to write into markup — that is the abstraction layer the
 * studio's themes exist to avoid. A component states its own place, in
 * its own stylesheet:
 *
 *     .thing { --groundrules-span: 6; }
 *     .thing--offset { --groundrules-column-start: 3; }
 *
 * Column count and gutter are theme-tunable through theme.json's custom
 * seam — settings.custom.grid.columns and settings.custom.grid.gutter
 * emit as the two `--wp--custom--grid--*` properties read below. The
 * fallbacks are the studio defaults, so a theme that says nothing gets
 * sixteen columns and the spacing scale's gutter. (Those fallbacks are
 * design, not defects — the contract checker knows the difference.)
 *
 * Sixteen columns hold at every width. Collapsing the grid itself on
 * narrow screens would make a span mean different things at different
 * sizes, which is the opposite of a structure to design against;
 * components restate their own spans at their own breakpoints instead.
 *
 * The gutter is what has to give, and it is not optional. Fifteen
 * gutters at 1.5rem need 360px before a single column has any width,
 * and a phone offers roughly 327px — so the tracks bottom out at zero
 * and the grid overflows the element containing it. Stepping the gutter
 * down below the breakpoint is what lets the column count stay
 * constant.
 */

:root {
	--groundrules-columns: var(--wp--custom--grid--columns, 16);
	--groundrules-grid-gutter: var(--wp--custom--grid--gutter, var(--wp--preset--spacing--40, 1.5rem));
}

.groundrules-grid {
	display: grid;
	grid-template-columns: repeat(var(--groundrules-columns), minmax(0, 1fr));
	column-gap: var(--groundrules-grid-gutter);
	row-gap: var(--groundrules-grid-row-gap, var(--groundrules-grid-gutter));
}

@media (max-width: 47.999rem) {
	:root {
		--groundrules-grid-gutter: var(--wp--preset--spacing--20, 0.5rem);
	}
}

/*
 * Full width unless the child says otherwise.
 *
 * `minmax(0, 1fr)` above rather than a bare `1fr`: a track's default
 * minimum is `auto`, so one long word or an image with no `max-width`
 * would push its column past its share and pull the whole grid out of
 * true.
 */
.groundrules-grid > * {
	grid-column:
		var(--groundrules-column-start, auto)
		/ span var(--groundrules-span, var(--groundrules-columns));
}