/*
 * 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;
    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;
}

/* UX/UI regression triage 01, BUG 01 (full_bg): the horizontal-overflow guard used to live on
   `.bw-content-shell` itself, but since SHELL-03 the shell owns its own centered `max-width` box,
   so clipping there also clips `[data-bw-bg-bleed="1"] .bw-section__bg`'s `50vw` viewport-edge
   breakout at the shell's edge instead of the true viewport edge - full_bg stopped reaching the
   page edges on any viewport wider than the shell's max-width + gutter. `#main-content` (the
   layout's own full-viewport-width `<main>`, see layouts/app.blade.php) is always the shell's
   nearest ancestor and never gets a width/max-width of its own, so it's the correct place to own
   this guard: the clip boundary now matches the viewport edge again, matching the pre-SHELL-03
   contract, without reserving a shell-level gutter track or touching the grid/column/sidebar
   architecture. */
#main-content {
    overflow-x: clip;
}

@supports not (overflow: clip) {
    #main-content {
        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);
    /* UX/UI regression triage 01, BUG 01: MAIN's true visual center is offset from the shell's
       own geometric center by half of the FULL reserved sidebar allotment - the sidebar width
       AND the column-gap between it and MAIN, not the sidebar width alone. Omitting the gap term
       left full_bg's `50vw` recentering short by exactly half the gap on one edge (and past it by
       the same amount on the other) whenever a sidebar coexists with a full_bg Section - proven
       via rendered-geometry measurement, not just reading the formula. */
    --bw-page-bg-bleed-shift: calc((var(--bw-page-sidebar-width) + var(--bw-page-col-gap)) / -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);
    /* See the has-left-sidebar rule above for why the gap term is included. */
    --bw-page-bg-bleed-shift: calc((var(--bw-page-sidebar-width) + var(--bw-page-col-gap)) / 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;
}

/* UX/UI regression triage 01, BUG 03/04: the `.bw-pad-section`/`.bw-pad-section-x` "X inset"
   ownership this file's header comment describes (section 40-43 above) was never actually
   implemented as a CSS rule anywhere in the codebase - only the grid-column placement above
   exists, which resolves to zero inset whenever content-start/full-start coincide (the no-aside
   case) and does nothing at all once the shell collapses to `display: block` on mobile (subgrid
   has no parent grid left to inherit named lines from). The Breadcrumb row's `.bw-pad-section-x`
   wrapper (and the Post footer's, see post-frontend.css) therefore rendered with no horizontal
   inset at all. Give it the real padding this file already promised, reusing the exact same
   `--bw-page-inline-gutter` token the mobile stacked-aside margin below already uses (BUG 04's
   mechanism) - one shared responsive gutter authority for both, no new/duplicated value. */
.bw-pad-section-x {
    padding-inline: var(--bw-page-inline-gutter, 1rem);
}

@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;
    }
}