/*
 * Shared, domain-neutral content-layout-shell grid contract (boxweaver-content-ux-ui-consistency-01,
 * final architectural pass, scope SHELL-02; supersedes the pass-2 dual-selector version; staging
 * UX correction 01, scope SHELL-03: only real semantic columns are modelled - see below).
 *
 * `.bw-content-shell` is the ONE geometry owner for every content-detail surface (Pages, Posts,
 * and any future domain such as Seminars): max layout width, main column, aside column(s),
 * left/right/both/no-aside placement, column gap, breadcrumb/main/aside grid areas, responsive
 * collapse, and first-content-Section top-rhythm propagation to the aside(s) (see
 * page-shell.css/post-frontend.css `padding-block-start: var(--bw-space-section-y-top, ...)`,
 * driven by the canonical `data-bw-space-top` attribute the domain view sets from
 * FirstVisibleSectionSpacingResolver - not a JS measurement, not a parallel vocabulary).
 *
 * Domain packages add `.bw-content-shell` alongside their own semantic class (`.bw-page-layout`,
 * `.bw-post__layout`, a future `.bw-seminar-layout`, ...) on the SAME element - the domain class
 * carries no geometry of its own; it is a compatibility/JS-hook marker only (e.g. toc.blade.php's
 * `root.closest('.bw-page-layout')`). Domain-specific presentation (e.g. Page's after-Hero
 * background band) may layer on top via the domain's own stylesheet, but must not redeclare
 * `grid-template-columns`/`column-gap`/aside widths - no duplicated calc() chains.
 *
 * Named grid lines (`full-*`, `sidebar-left-*`/`aside-left-*`, `content-*`/`main-*`,
 * `sidebar-right-*`/`aside-right-*`) are one shared vocabulary (neutral aliases added alongside
 * the pre-existing Page-era names so already-shipped domain CSS/tests keep resolving without a
 * mass rename): a Breadcrumb, a normal Section, a Tabs section and the main content column all
 * resolve to the exact same line pair for the same aside configuration. Left and right asides may
 * coexist (three-column grid); the same column-gap drives both left<->main and main<->right - no
 * separate values.
 *
 * SHELL-03 ownership split: the shell owns ONLY real semantic columns (MAIN, and LEFT/RIGHT when
 * present) plus the shared `column-gap` between them - it does NOT reserve its own outer
 * gutter/inset track. Each state below therefore declares ONLY the tracks that actually exist
 * (e.g. the no-aside state is a single MAIN track with zero internal boundaries, so `column-gap`
 * never applies) instead of always emitting 5 tracks with `0`-width placeholders for absent
 * asides - a `0`-width placeholder track still gets a real `column-gap` on both sides of it,
 * which is exactly the "phantom gutter" width loss this correction removes. The named line groups
 * that used to bookend the outer gutter tracks (`full-start`, `sidebar-left-start`/
 * `aside-left-start`, ...) are kept as line names for full-bleed consumers
 * (`.bw-page-layout__breadcrumb-row`, `[data-bw-width-resolved="full_bleed"]`) - they simply sit
 * on the same grid line as the first/last real column when no separate outer track exists for
 * them, instead of naming the edges of a now-removed gutter track. X inset for the shell's own
 * edges is intentionally NOT provided here (see section 7 of the correction brief): Section and
 * Breadcrumb inner wrappers own that via `.bw-pad-section`/`.bw-pad-section-x` - representing it a
 * second time as shell columns is exactly the duplicated-inset bug this pass fixes.
 */
.bw-content-shell {
    --bw-page-sidebar-width: 18rem;
    /* Kept as a plain custom property (still consumed by the mobile aside stacking margin, see
       page-shell.css `.bw-page-layout__sidebar--left/--right`) even though the shell's own grid
       no longer spends a track on it. */
    --bw-page-inline-gutter: 1rem;
    /* Column gap is derived from the shared spacing scale at a 1.5x multiplier (not a hardcoded
       px value), so it stays proportional if the base spacing setting changes. Reused verbatim
       for other layout gaps this pass/previous passes introduced (e.g. the Post footer Section,
       see post-frontend.css). */
    --bw-page-col-gap: calc(var(--bw-space-grid-x-base, 1rem) * 1.5);
    --bw-page-layout-sidebar-total: 0rem;
    --bw-page-layout-sidebar-gap-total: 0rem;
    --bw-page-bg-bleed-shift: 0px;
    /* Pages set an inline per-page `--bw-page-max-layout` (builder layout-width setting); Posts
       fall back to the global `--bw-layout-max-width` design token. Both resolve through the same
       formula below - no separate per-domain max-width math. Still computed/exposed here (even
       though the MAIN track itself now just uses `minmax(0, 1fr)`, see below) because other
       consumers read it directly, e.g. the Media+Text edge-to-edge bleed calc in
       FrontendBasePageBuilderCssBuilder. */
    --bw-page-content-max: max(16rem, calc(var(--bw-page-max-layout, var(--bw-layout-max-width, 80rem)) - var(--bw-page-layout-sidebar-total) - var(--bw-page-layout-sidebar-gap-total)));
    display: grid;
    width: 100%;
    /* The shell is its own max-width/centering owner (previously implicit via flexible outer
       gutter tracks); using the same total the MAIN residual above is derived from keeps both
       formulas in lock-step. */
    max-width: var(--bw-page-max-layout, var(--bw-layout-max-width, 80rem));
    margin-inline: auto;
    overflow-x: clip;
    grid-template-columns:
        [full-start sidebar-left-start aside-left-start sidebar-left-end aside-left-end content-start main-start]
        minmax(0, 1fr)
        [content-end main-end sidebar-right-start aside-right-start sidebar-right-end aside-right-end full-end];
    column-gap: var(--bw-page-col-gap);
    row-gap: 0;
    align-items: start;
}

@supports not (overflow: clip) {
    .bw-content-shell {
        overflow-x: hidden;
    }
}

/* Left aside only: LEFT | GAP | MAIN - exactly two real columns, one shared gap. */
.bw-content-shell.has-left-sidebar,
.bw-content-shell.has-left-aside {
    --bw-page-layout-sidebar-total: var(--bw-page-sidebar-width);
    --bw-page-layout-sidebar-gap-total: var(--bw-page-col-gap);
    --bw-page-bg-bleed-shift: calc(var(--bw-page-sidebar-width) / -2);
    grid-template-columns:
        [full-start sidebar-left-start aside-left-start] var(--bw-page-sidebar-width)
        [sidebar-left-end aside-left-end content-start main-start]
        minmax(0, 1fr)
        [content-end main-end sidebar-right-start aside-right-start sidebar-right-end aside-right-end full-end];
}

/* Right aside only: MAIN | GAP | RIGHT - exactly two real columns, one shared gap. */
.bw-content-shell.has-right-sidebar,
.bw-content-shell.has-right-aside {
    --bw-page-layout-sidebar-total: var(--bw-page-sidebar-width);
    --bw-page-layout-sidebar-gap-total: var(--bw-page-col-gap);
    --bw-page-bg-bleed-shift: calc(var(--bw-page-sidebar-width) / 2);
    grid-template-columns:
        [full-start sidebar-left-start aside-left-start sidebar-left-end aside-left-end content-start main-start]
        minmax(0, 1fr)
        [content-end main-end sidebar-right-start aside-right-start] var(--bw-page-sidebar-width)
        [sidebar-right-end aside-right-end full-end];
}

/* Both asides simultaneously (addendum): LEFT | GAP | MAIN | GAP | RIGHT, three real columns, no
   phantom empty column - the same shared gap on both sides. */
.bw-content-shell.has-left-sidebar.has-right-sidebar,
.bw-content-shell.has-left-aside.has-right-aside {
    --bw-page-layout-sidebar-total: calc(var(--bw-page-sidebar-width) * 2);
    --bw-page-layout-sidebar-gap-total: calc(var(--bw-page-col-gap) * 2);
    --bw-page-bg-bleed-shift: 0px;
    grid-template-columns:
        [full-start sidebar-left-start aside-left-start] var(--bw-page-sidebar-width)
        [sidebar-left-end aside-left-end content-start main-start]
        minmax(0, 1fr)
        [content-end main-end sidebar-right-start aside-right-start] var(--bw-page-sidebar-width)
        [sidebar-right-end aside-right-end full-end];
}

/* Breadcrumb row: a real grid item in the SAME single shell grid (row 1), occupying the MAIN
   grid area only - exactly like a normal Section or Tabs (`[data-bw-section-type] { grid-column:
   content-start / content-end }`) - the aside area(s) stay empty in this row, never spanning all
   three columns. */
.bw-content-shell > .bw-page-layout__breadcrumb-row,
.bw-content-shell > .bw-post__breadcrumbs {
    grid-column: main-start / main-end;
    grid-row: 1;
}

@media (min-width: 640px) {
    .bw-content-shell {
        --bw-page-inline-gutter: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .bw-content-shell {
        --bw-page-inline-gutter: 2rem;
    }
}

/* Intermediate/medium widths reuse the Product's existing single breakpoint collapse (no
   domain-specific breakpoints per Page/Post/Seminar) - MAIN is never crushed into a third forced
   column at in-between widths. */
@media (max-width: 1279px) {
    .bw-content-shell {
        display: block;
    }

    .bw-content-shell.has-left-sidebar,
    .bw-content-shell.has-right-sidebar,
    .bw-content-shell.has-left-sidebar.has-right-sidebar,
    .bw-content-shell.has-left-aside,
    .bw-content-shell.has-right-aside,
    .bw-content-shell.has-left-aside.has-right-aside {
        --bw-page-bg-bleed-shift: 0px;
    }
}