/*
 * Layout primitives.
 *
 * Intrinsic and fluid by default (min(), clamp(), auto-fit grids) so layouts
 * adapt across the 375 / 768 / 1366–1440 / 1920 validation references without
 * a breakpoint per device. Media queries are added only where content demands.
 */

/* Keeps the footer at the bottom on short pages without fixed heights. */
body {
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
	min-block-size: 100dvh;
}

.gb-main {
	flex: 1 0 auto;
	padding-block: var(--gb-space-xl);
}

/* Centered container: full width minus gutters, capped at the max width. */
.gb-container {
	inline-size: min(100% - (var(--gb-gutter) * 2), var(--gb-container));
	margin-inline: auto;
}

.gb-container--wide {
	inline-size: min(100% - (var(--gb-gutter) * 2), var(--gb-container-wide));
}

.gb-container--prose {
	inline-size: min(100% - (var(--gb-gutter) * 2), var(--gb-container-prose));
}

/* Vertical rhythm between siblings, independent of what the children are. */
.gb-flow > * + * {
	margin-block-start: var(--gb-flow-space, var(--gb-space-s));
}

/* Horizontal group that wraps naturally (nav items, buttons, tags). */
.gb-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gb-cluster-gap, var(--gb-space-s));
}

/* Responsive grid with no breakpoints: columns appear as space allows. */
.gb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gb-grid-min, 18rem)), 1fr));
	gap: var(--gb-grid-gap, var(--gb-space-m));
}

/* Long-form content keeps a readable measure. */
.gb-entry__content {
	max-inline-size: var(--gb-container-prose);
}