/**
 * PHASE global layout runtime.
 *
 * Canonical authority:
 * - tokens.css owns layout values and responsive column aliases.
 * - layout.css owns structural primitives and registered patterns.
 * - utilities.css owns the finite responsive span/start registry.
 *
 * Page-specific composition and arbitrary layout values are prohibited here.
 */

/* =========================================================
 * STRUCTURAL SURFACES
 * ====================================================== */

:where(
    .phase-shell,
    .layout-grid,
    .phase-grid,
    .phase-grid-item,
    .section,
    .phase-section,
    .phase-region-content,
    .phase-region-full,
    .container,
    .phase-container
) {
    border-radius: var(--phase-radius-structure);
}

.phase-surface {
    border-radius: var(--phase-radius-surface);
}

/* =========================================================
 * LEGACY PAGE SHELL COMPATIBILITY
 * ====================================================== */

.phase-shell {
    display: grid;
    grid-template-columns:
        [full-start]
        minmax(var(--gutter-inline), 1fr)
        [content-start]
        minmax(0, var(--container-wide))
        [content-end]
        minmax(var(--gutter-inline), 1fr)
        [full-end];
    inline-size: 100%;
    min-inline-size: 0;
}

.phase-shell > * {
    grid-column: content-start / content-end;
    min-inline-size: 0;
}

.phase-region-content {
    grid-column: content-start / content-end;
    min-inline-size: 0;
}

.phase-region-full {
    grid-column: full-start / full-end;
    min-inline-size: 0;
}

/* =========================================================
 * CONTAINER SYSTEM
 * ====================================================== */

:where(.container, .phase-container) {
    --container-max: var(--container-content);

    inline-size:
        min(
            calc(100% - (2 * var(--gutter-inline))),
            var(--container-max)
        );
    margin-inline: auto;
    min-inline-size: 0;
}

:where(.container--page, .phase-container--page) {
    --container-max: var(--container-page);
}

:where(.container--wide, .phase-container--wide) {
    --container-max: var(--container-wide);
}

.container--content {
    --container-max: var(--container-content);
}

:where(.container--editorial, .phase-container--reading) {
    --container-max: var(--container-editorial);
}

.container--narrow {
    --container-max: var(--container-narrow);
}

/*
 * Legacy technical and full containers remain compatibility-only.
 * New content must use the five canonical roles above.
 */
.phase-container--technical {
    --container-max: var(--phase-container-technical);
}

.phase-container--full {
    inline-size: 100%;
    max-inline-size: none;
    margin-inline: 0;
}

/* =========================================================
 * FULL-BLEED AND CONTENT ALIGNMENT
 * ====================================================== */

.full-bleed,
.full-bleed--safe {
    inline-size: 100%;
    min-inline-size: 0;
}

/*
 * A viewport-unit negative-margin variant is intentionally omitted.
 * Full-bleed backgrounds use an outer full-width section; their content
 * remains aligned by a nested canonical container.
 */

/* =========================================================
 * SECTION RHYTHM
 * ====================================================== */

:where(.section, .phase-section) {
    --section-space-before: var(--section-space-md);
    --section-space-after: var(--section-space-md);

    padding-block-start: var(--section-space-before);
    padding-block-end: var(--section-space-after);
    min-inline-size: 0;
}

:where(.section--compact, .phase-section--compact) {
    --section-space-before: var(--section-space-sm);
    --section-space-after: var(--section-space-sm);
}

.phase-section--standard {
    --section-space-before: var(--section-space-md);
    --section-space-after: var(--section-space-md);
}

:where(.section--spacious, .phase-section--expanded) {
    --section-space-before: var(--section-space-lg);
    --section-space-after: var(--section-space-lg);
}

:where(.section--opening, .phase-section--hero) {
    --section-space-before: var(--section-space-lg);
    --section-space-after: var(--section-space-md);
}

:where(.section--closing, .phase-section--closing) {
    --section-space-before: var(--section-space-md);
    --section-space-after: var(--section-space-xl);
}

.phase-section--flush-start {
    --section-space-before: 0;
}

.phase-section--flush-end {
    --section-space-after: 0;
}

.section-stack > * + * {
    margin-block-start: 0;
}

/* =========================================================
 * FLOW, CLUSTER, AND SPLIT
 * ====================================================== */

.flow {
    --flow-space: var(--flow-space-md);
}

.flow > * + * {
    margin-block-start: var(--flow-space);
}

.flow--tight {
    --flow-space: var(--flow-space-sm);
}

.flow--loose {
    --flow-space: var(--flow-space-lg);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--flow-space-sm));
    align-items: center;
}

.cluster > * {
    min-inline-size: 0;
}

.split {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap);
}

.split > * {
    flex: 1 1 18rem;
    min-inline-size: 0;
}

/* =========================================================
 * RESPONSIVE COLUMN GRID
 * ====================================================== */

:where(.layout-grid, .phase-grid) {
    --layout-grid-columns: var(--grid-columns);
    --phase-grid-local-columns: var(--layout-grid-columns);

    display: grid;
    grid-template-columns:
        repeat(
            var(--layout-grid-columns),
            minmax(0, 1fr)
        );
    gap: var(--grid-gap);
    inline-size: 100%;
    min-inline-size: 0;
}

:where(.layout-grid, .phase-grid) > * {
    --layout-item-start: auto;
    --layout-item-span: var(--layout-grid-columns);

    grid-column:
        var(--layout-item-start) /
        span var(--layout-item-span);
    min-inline-size: 0;
}

.phase-grid-item {
    min-inline-size: 0;
}

/* =========================================================
 * NESTED GRID
 * ====================================================== */

.layout-grid--nested {
    --layout-grid-columns: 4;
}

.phase-subgrid {
    --phase-subgrid-fallback-columns: 1;

    display: grid;
    grid-template-columns:
        repeat(
            var(--phase-subgrid-fallback-columns),
            minmax(0, 1fr)
        );
    gap: var(--grid-gap);
    min-inline-size: 0;
}

@supports (grid-template-columns: subgrid) {
    .phase-subgrid {
        grid-template-columns: subgrid;
    }
}

.phase-subgrid > * {
    min-inline-size: 0;
}

/* =========================================================
 * APPROVED ASYMMETRIC PATTERNS — TABLET
 * ====================================================== */

@media (min-width: 48rem) {
    .layout-grid--nested {
        --layout-grid-columns: 4;
    }

    .layout-asym-5-7 > :first-child {
        grid-column: 1 / span 3;
    }

    .layout-asym-5-7 > :last-child {
        grid-column: 4 / span 5;
    }

    .layout-asym-4-8 > :first-child {
        grid-column: 1 / span 3;
    }

    .layout-asym-4-8 > :last-child {
        grid-column: 4 / span 5;
    }

    .layout-editorial-offset > * {
        grid-column: 2 / span 6;
    }

    .layout-meta-body > :first-child {
        grid-column: 1 / span 3;
    }

    .layout-meta-body > :last-child {
        grid-column: 4 / span 5;
    }

    .layout-staggered-pair > :first-child {
        grid-column: 1 / span 4;
    }

    .layout-staggered-pair > :last-child {
        grid-column: 5 / span 4;
    }
}

/* =========================================================
 * APPROVED ASYMMETRIC PATTERNS — DESKTOP
 * ====================================================== */

@media (min-width: 75rem) {
    .layout-grid--nested {
        --layout-grid-columns: 8;
    }

    .layout-asym-5-7 > :first-child {
        grid-column: 1 / span 5;
    }

    .layout-asym-5-7 > :last-child {
        grid-column: 6 / span 7;
    }

    .layout-asym-4-8 > :first-child {
        grid-column: 1 / span 4;
    }

    .layout-asym-4-8 > :last-child {
        grid-column: 5 / span 8;
    }

    .layout-editorial-offset > * {
        grid-column: 3 / span 8;
    }

    .layout-meta-body > :first-child {
        grid-column: 1 / span 3;
    }

    .layout-meta-body > :last-child {
        grid-column: 4 / span 7;
    }

    .layout-staggered-pair > :first-child {
        grid-column: 1 / span 5;
    }

    .layout-staggered-pair > :last-child {
        grid-column: 7 / span 5;
        margin-block-start: var(--section-space-sm);
    }

    /*
     * Visual reverse is restricted to approved two-part patterns.
     * DOM, reading, focus, and keyboard order remain unchanged.
     */
    .layout-asym-5-7.layout-reverse-b4 > :first-child {
        grid-column: 8 / span 5;
    }

    .layout-asym-5-7.layout-reverse-b4 > :last-child {
        grid-column: 1 / span 7;
    }

    .layout-asym-4-8.layout-reverse-b4 > :first-child {
        grid-column: 9 / span 4;
    }

    .layout-asym-4-8.layout-reverse-b4 > :last-child {
        grid-column: 1 / span 8;
    }
}

/* =========================================================
 * MEDIA, BREAKOUT, AND LOCAL DATA OVERFLOW
 * ====================================================== */

:where(.phase-media, img, svg, video, canvas) {
    display: block;
    max-inline-size: 100%;
}

.phase-media--fluid {
    inline-size: 100%;
    block-size: auto;
}

.phase-media-frame {
    position: relative;
    overflow: clip;
    inline-size: 100%;
    aspect-ratio: var(--phase-media-ratio-current);
    border-radius: var(--phase-radius-image);
}

.phase-media-frame > :is(img, video),
.phase-media-frame > picture > img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.phase-media-frame > picture {
    display: contents;
}

.media-breakout {
    inline-size:
        min(
            calc(100% + (2 * var(--gutter-inline))),
            var(--container-wide)
        );
    max-inline-size:
        calc(100% + (2 * var(--gutter-inline)));
    margin-inline: calc(-1 * var(--gutter-inline));
}

:where(.diagram, .phase-data-scroll) {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

/* =========================================================
 * NAVIGATION-SAFE COMPATIBILITY
 * ====================================================== */

.phase-navigation-safe {
    padding-block-start: var(--phase-navigation-safe-current);
}

.phase-anchor-target {
    scroll-margin-block-start: var(--phase-navigation-safe-current);
}
/*
 * Global Chrome uses the same registered responsive layout authority as page
 * content. Visual treatment remains owned by chrome.css.
 */
.site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
}

.site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
    .site-header .site-header__inner {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;
        gap: var(--grid-gap);
        padding-block: 0;
    }

    html.has-navigation-enhancement
    body
    .site-header
    .navigation-toggle {
        display: none;
    }

    .site-header .primary-navigation {
        display: block;
        grid-column: 2;
        justify-self: center;
    }

    .site-header .primary-navigation__list {
        flex-direction: row;
    }

    .site-header .header-cta {
        display: inline-flex;
        grid-column: 3;
        justify-self: end;
    }

    html.has-navigation-enhancement
    body
    .site-header[data-navigation-state="closed"]
    .primary-navigation {
        display: block;
    }

    html.has-navigation-enhancement
    body
    .site-header[data-navigation-state="closed"]
    .header-cta {
        display: inline-flex;
    }

    .site-footer__inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 2fr);
        align-items: start;
    }

    .site-footer .footer-navigation,
    .site-footer .footer-meta {
        justify-self: end;
    }
}