/* ============================================================================
   layout.css — container, sections, grids, stacks (canonical map §4)
   ========================================================================= */

@layer layout {

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

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

	.b5cae2cdc {
		padding-block: clamp(var(--space-6), 4vw, var(--space-8));
	}

	.b47c50c62 {
		padding-block: clamp(var(--space-6), 4vw, var(--space-8));
		background: var(--color-bg-subtle);
	}

	.baf6e26b8 {
		padding-block: clamp(var(--space-6), 4vw, var(--space-8));
		background: var(--color-bg-muted);
	}

	.bb275f42f {
		block-size: 1px;
		background: var(--color-border);
		border: 0;
		margin-block: var(--space-7);
	}

	/* === Grid primitives — column count is the contract; rows auto-flow. */
	.b771248e6,
	.bc9b43930,
	.bff6ec007 {
		display: grid;
		gap: var(--space-5);
	}

	.b771248e6 {
		grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	}

	.bc9b43930 {
		grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	}

	.bff6ec007 {
		grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	}

	@media (min-width: 768px) {

		.b771248e6 {
			grid-template-columns: repeat(2, 1fr);
		}

		.bc9b43930 {
			grid-template-columns: repeat(3, 1fr);
		}

		.bff6ec007 {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	/* === Stack — vertical rhythm utility. Pick a size; children inherit it. */
	.b18bbbacd > * + *,
	.b0b37b064 > * + *,
	.b66719f4c > * + * {
		margin-block-start: var(--stack-gap);
	}

	.b18bbbacd {
		--stack-gap: var(--space-3);
	}

	.b0b37b064 {
		--stack-gap: var(--space-5);
	}

	.b66719f4c {
		--stack-gap: var(--space-7);
	}

	/* === Cluster — horizontal grouping that wraps responsibly. */
	.b45806843 {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-3);
		align-items: center;
	}
}