/*
 * 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 FirstVisibleSectionSpacingResolver as a no-script fallback. The shared detail
 * component measures actual visible title/content/tab boundaries for precise rail alignment).
 *
 * 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,
.bw-content-shell > .bw-content-breadcrumbs {
    grid-column: main-start / main-end;
    grid-row: 1;
}

/*
 * FK-40 (SEMINARS-QA-FIX-01): ONE head contract for every detail resource (Pages, Posts,
 * Seminars, Sport), owned here and not per module:
 *   1. the breadcrumb row carries `.bw-content-breadcrumbs` and the global spacing below it
 *      (half the section bottom spacing, the value Pages already used);
 *   2. the first section after it - the one holding the runtime title (`data-bw-content-title`,
 *      set by RuntimeLeadComposer only in the first visible section) - has no top spacing;
 *   3. inside that section the H1 is the runtime title (headline element), subline or
 *      publication below it.
 * Without breadcrumbs the first section keeps its own top spacing (nothing sits above it).
 */
.bw-content-shell {
    --bw-content-breadcrumbs-gap: calc(var(--bw-space-section-y-bottom, var(--bw-space-section-y, 3rem)) * .5);
}

.bw-content-shell > .bw-content-breadcrumbs {
    padding-block-end: var(--bw-content-breadcrumbs-gap);
}

.bw-content-shell:has(> .bw-content-breadcrumbs .bw-breadcrumbs) > .bw-content-detail__main [data-bw-section-type]:has([data-bw-content-title]) .bw-section__inner:has([data-bw-content-title]) {
    padding-block-start: 0;
}

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

/* Shared sidebar widget presentation: Pages and Posts use the same design setting. */
.bw-page-aside-widget {
    display: grid;
    gap: var(--bw-space-grid-y, 1.5rem);
}

.bw-page-aside-widget > .bw-page-aside-widget__heading {
    margin-block: 0;
}

.bw-page-aside-widget[data-bw-page-aside-heading-style="tab"] > .bw-page-aside-widget__heading,
.bw-content-detail[data-bw-aside-heading-style="tab"] .bw-page-aside-widget > .bw-page-aside-widget__heading,
.bw-content-detail[data-bw-aside-heading-style="tab"] .bw-page-toc--sidebar > .bw-page-aside-widget__heading {
    margin: 0;
    padding: var(--bw-tabs-tab-padding-y, var(--bw-space-button-y, .75rem)) var(--bw-tabs-tab-padding-x, var(--bw-space-button-x, 1.25rem));
    border-bottom: 1px solid var(--bw-color-border-200, rgba(0, 0, 0, .12));
    background: transparent;
    color: var(--bw-color-text-500, rgba(0, 0, 0, .55));
    font-size: var(--bw-copy-font-size, 1rem);
    line-height: var(--bw-copy-line-height, 1.5);
}


/* Shared detail component owns placement and rail presentation for all resource types.
   Dynamic alignment only changes padding: editorial sections, anchors and backgrounds
   stay in their original DOM order and are never extracted or moved. */
.bw-content-detail > .bw-content-detail__main {
    grid-column: main-start / main-end;
    grid-row: 2;
    min-width: 0;
}
.bw-content-detail > .bw-content-detail__aside {
    grid-row: 2;
    min-width: 0;
    display: grid;
    align-content: start;
    gap: var(--bw-space-grid-y, 1.5rem);
    padding-block-start: var(--bw-detail-aside-offset, var(--bw-space-section-y-top, var(--bw-space-section-y, 0)));
}
.bw-content-detail__aside--left { grid-column: aside-left-start / aside-left-end; }
.bw-content-detail__aside--right { grid-column: aside-right-start / aside-right-end; }
.bw-content-title > .bw-headline { margin-block: 0; }
.bw-content-title__publication {
    margin-block: calc(var(--bw-space-grid-y, 1.5rem) * .25) 0;
    font-size: .875em;
    line-height: var(--bw-copy-line-height, 1.5);
    font-style: italic;
    color: var(--bw-color-text-500, currentColor);
}
@media (max-width: 1279px) {
    .bw-content-detail > .bw-content-detail__aside {
        padding-block-start: 0;
        margin: var(--bw-space-grid-y, 1.5rem) var(--bw-page-inline-gutter, 1rem);
    }
}

.bw-content-detail__main--inset {
    padding: var(--bw-space-section-y-top, var(--bw-space-section-y, 0)) var(--bw-page-inline-gutter, 1rem) var(--bw-space-section-y-bottom, var(--bw-space-section-y, 0));
}

/* Builder stacks keep the parent grid lines, including intentional full-bleed sections.
   Controlled element-only resource bodies use the inset main column instead. */
.bw-content-detail > .bw-content-detail__main:not(.bw-content-detail__main--inset) {
    display: grid;
    grid-column: full-start / full-end;
    grid-template-columns: subgrid;
    align-items: start;
}
.bw-content-detail__main > * { grid-column: main-start / main-end; }
.bw-content-detail__main > [data-bw-section-type][data-bw-width-resolved="full_bleed"] { grid-column: full-start / full-end; }
@media (max-width: 1279px) {
    .bw-content-detail > .bw-content-detail__main:not(.bw-content-detail__main--inset) { display: block; }
}

/* Full-width backgrounds retain their authored surface. With a rail, readable
   content still occupies MAIN and the rail stays above that background layer. */
@media (min-width: 1280px) {
    .bw-content-detail > .bw-content-detail__aside { position: relative; z-index: 1; }
    .bw-content-detail:is(.has-left-sidebar, .has-right-sidebar) > .bw-content-detail__main > [data-bw-section-type][data-bw-width-resolved="full_bleed"] {
        display: grid;
        grid-template-columns: subgrid;
    }
    .bw-content-detail:is(.has-left-sidebar, .has-right-sidebar) > .bw-content-detail__main > [data-bw-section-type][data-bw-width-resolved="full_bleed"] > .bw-section__inner {
        grid-column: main-start / main-end;
    }
}