/*!
 * @be-partner-labs/ds v1.8.0 — core/grid
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/core/grid.min.css">
 * npm:  @import "@be-partner-labs/ds/core/grid";
 * Docs: https://ds.bepartnerlabs.com/components/grid/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

@layer bp-grid {
	/**
	 * .bp-content-grid
	 * Named-line grid with five zones: full-width, breakout, popout, content (default).
	 * Public API:
	 *   --padding-inline        Horizontal gutter. Default: clamp(1.25rem, 1vw + 1rem, 2rem)
	 *   --content-max-width     Max width of the content zone. Default: 72rem (1152px)
	 *   --popout-max-width      Max width of the popout zone.  Default: 60rem (960px)
	 *   --breakout-max-width    Max width of the breakout zone. Default: 90rem (1440px)
	 *
	 * Child classes:
	 *   (none)       → content zone (default)
	 *   .popout      → popout zone (~960px) — quotes, CTAs, mid-size media
	 *   .breakout    → breakout zone (~1440px) — grids, covers, video
	 *   .full-width  → full viewport width, inherits grid columns for sub-content
	 */
	.bp-content-grid {
		--_padding-inline: var(--padding-inline, clamp(1.25rem, 1vw + 1rem, 2rem));
		--_content-max-width: var(--content-max-width, 72rem);
		--_popout-max-width: var(--popout-max-width, 60rem);
		--_breakout-max-width: var(--breakout-max-width, 90rem);
		--_popout-size: calc((var(--_popout-max-width) - var(--_content-max-width)) / 2);
		--_breakout-size: calc((var(--_breakout-max-width) - var(--_content-max-width)) / 2);

		display: grid;
		grid-template-columns:
			[full-width-start]
			minmax(var(--_padding-inline), 1fr)
			[breakout-start]
			minmax(0, var(--_breakout-size))
			[popout-start]
			minmax(0, var(--_popout-size))
			[content-start]
			min(100% - (var(--_padding-inline) * 2), var(--_content-max-width))
			[content-end]
			minmax(0, var(--_popout-size))
			[popout-end]
			minmax(0, var(--_breakout-size))
			[breakout-end]
			minmax(var(--_padding-inline), 1fr)
			[full-width-end];
	}

	/* Default: all direct children land in the content zone */
	.bp-content-grid > :not(.popout, .breakout, .full-width),
	.full-width > :not(.popout, .breakout, .full-width) {
		grid-column: content;
	}

	.bp-content-grid > .popout,
	.full-width > .popout {
		grid-column: popout;
	}

	.bp-content-grid > .breakout,
	.full-width > .breakout {
		grid-column: breakout;
	}

	/* Full-width inherits the parent grid columns so its own children can use zones */
	.bp-content-grid > .full-width {
		grid-column: full-width;
		display: grid;
		grid-template-columns: inherit;
	}

	/**
	 * .bp-container
	 * Declares an inline-size container so child components can use @container queries.
	 * Drop this on any wrapper to opt child components into container-aware layouts.
	 */
	.bp-container {
		container-type: inline-size;
	}
}