/* www/layouts.css — composition layer.
 *
 * CUBE-CSS "Composition" axis (Andy Bell): page-shape primitives — the
 * containers and layouts that arrange OTHER things on the page. Sister
 * file to brand.css (tokens), utilities.css, components.css, and
 * pricing.css (exceptions). Every rule below sits inside the
 * `composition` cascade layer declared in brand.css:
 *
 *   @layer tokens, composition, utilities, blocks, exceptions;
 *
 * F5.C2 — added the four Every Layout primitives (Stack, Cluster,
 * Switcher, Center). Decision 6 guardrail 4 caps the primitive count
 * at four; a fifth requires a named use-case in PR review. The
 * primitives consume var(--space-*) tokens for every padding / margin
 * / gap declaration (BR5.2.2 — no hard-coded rem values).
 *
 * Call-site application: zero existing markup was refactored to
 * consume the primitives at F5.C2. The current block surface
 * (.cta-buttons cluster-shape, .hero-content stack-shape, etc.)
 * already encodes the layout pattern at block-rule granularity;
 * retrofitting markup to swap a block-style for a primitive would
 * be speculative under the spec's "apply selectively only where
 * existing markup already matches the pattern" guidance and risks
 * a visual diff for no behaviour change. The primitives ship
 * READY-FOR-USE; the first new component (post-R1.5) is the natural
 * adopter.
 */

@layer composition {
    .container {
        max-width: 960px;
        margin: 0 auto;
    }

    /* Stack — vertical rhythm. Adds top margin between adjacent
       children but never on the first one. The recursive selector
       (`> * + *`) makes the rule self-applying to direct children
       only — composes naturally. The `data-space` attribute opens
       the door to 2 sibling sizes (cap at 3 per guardrail 4 — no
       runaway per-size variants). */
    .stack > * + * {
        margin-block-start: var(--space-1);
    }
    .stack[data-space="0-5"] > * + * {
        margin-block-start: var(--space-0-5);
    }
    .stack[data-space="2"] > * + * {
        margin-block-start: var(--space-2);
    }

    /* Cluster — horizontal grouping that wraps. The canonical
       Every Layout shape: a flex container with wrap + gap + a
       baseline align-items. Useful for nav-link rows, tag clouds,
       button groups, badge collections. */
    .cluster {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1);
        align-items: center;
    }

    /* Switcher — responsive layout that flips between row and
       column at a content-driven breakpoint. The magic is in
       `flex-basis: calc((<breakpoint> - 100%) * 999)` — when the
       container is narrower than the breakpoint the basis is a
       large positive value (forcing wrap to single column);
       wider, the basis is large negative (capped at min-content,
       so items flow side-by-side). Breakpoint is 30rem (a common
       readable-line-length threshold) per the Every Layout
       reference. */
    .switcher {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1);
    }
    .switcher > * {
        flex-grow: 1;
        flex-basis: calc((30rem - 100%) * 999);
    }

    /* Center — horizontally-centered container with an inline
       padding floor. Different from .container (which is bare
       max-width + margin-inline:auto): .center adds box-sizing
       content-box AND padding-inline so the max-inline-size
       remains stable as padding scales. Useful for prose
       columns. */
    .center {
        box-sizing: content-box;
        max-inline-size: 60rem;
        margin-inline: auto;
        padding-inline: var(--space-1);
    }
}

/* Responsive composition overrides — narrow viewports collapse the
   three-column feature grid to a single column. This is a composition
   shape change (one-col vs three-col), not a block-style override. */
@media (max-width: 768px) {
    @layer composition {
        .feature-grid {
            grid-template-columns: 1fr;
            gap: var(--space-1-5);                       /* was 1.25rem → snap up to 1.5 */
        }
    }
}