/* ═══════════════════════════════════════════════════════════════════════════
   BWA Site Framework CSS  (auto-applied to every public tenant)
   ───────────────────────────────────────────────────────────────────────────
   This file contains site-architecture rules that EVERY BWA tenant needs
   identically — container max-widths, the .full-bleed escape, and the
   universal AI Block island plumbing (bleed, content-cap, pack-to-top,
   nested-island containment).
   
   Loaded by Primary.master.cs via EmitVersionedCssLink — AFTER brand-corpus-
   generated.css (so it can reference --bwa-* tokens) and BEFORE the tenant's
   custom.css (so per-tenant overrides win on the cascade).
   
   DO NOT add tenant-specific selectors here (e.g. .cj-*, .ws-*). Those stay
   in the tenant's own custom.css. The rule of thumb: if a fix or rule would
   benefit ALL tenants identically, it goes here. Anything else stays per-
   tenant.
   
   Extracted from:
     CJ custom.css lines 621-882 on 2026-06-04 (Phase A custom.css trim).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   SITE WIDTH FRAMEWORK
   - Header & footer chrome cap:  1750px  (wider for nav / logo / cta)
   - Content section cap:         1600px  (page body, blocks, AI Block output)
   - Full-bleed escape:           .full-bleed makes a section's background
                                  span 100vw while inner content still
                                  centers at 1600px via a child .container
                                  or .full-bleed-inner.
   Bootstrap's stock .container caps at 1170px @>=1200; rules below
   override the cap for everything except .container-sm (kept at 1124px
   above) and .container-fluid (always 100%). Specificity layering: the
   generic .container rule sits at (0,1,0); header/footer rules sit at
   (0,1,1) so they win for chrome.
   ────────────────────────────────────────────────────────────────── */

/* Content cap — default for body sections / blocks */
@media (min-width: 1200px) {
  .container,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1600px;
    width: 100%;
  }
}
@media (min-width: 1400px) {
  .container,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1600px;
    width: 100%;
  }
}

/* Header & footer chrome cap — beats the content rule above via
   higher selector specificity (descendant of header/footer). */
@media (min-width: 1200px) {
  header .container,
  header .container-md,
  header .container-lg,
  header .container-xl,
  header .container-xxl,
  footer .container,
  footer .container-md,
  footer .container-lg,
  footer .container-xl,
  footer .container-xxl,
  .getStartedCard > .container {
    max-width: 1750px;
    width: 100%;
  }
}

/* Full-bleed escape utility — drop on any section / div to make its
   background break out of the parent container and span the entire
   viewport. Inner content is reined back to 1600px by the nested
   .container or .full-bleed-inner so text never crosses the safe zone.

   Usage:
     <section class="full-bleed" style="background: #00267f;">
       <div class="container">...content stays centered at 1600px...</div>
     </section>

   For true edge-to-edge inner content (hero images, video, banners)
   omit the inner .container — content will go 100vw. */
.full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
}
.full-bleed > .container,
.full-bleed > .full-bleed-inner {
  max-width: 1600px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* AI Block island bleed — the canonical wrapper emitted by
   AIBlockIslandLoader is `<div class="bwa-ai-block-island"
   style="...overflow:hidden;">`. The inline `overflow:hidden` CLIPS
   any internal full-bleed attempt, so we bleed the island itself
   (rather than its inner section) and force overflow visible. This
   is the universal AI Block bleed and covers every cj-* / nebula-*
   block automatically, regardless of its inner markup.
   Inline `margin:24px 0` is preserved (we only override margin-left
   and margin-right). Inline `display:block` is preserved. To opt OUT
   for a specific block, add `.no-bleed` to the island wrapper. */
.bwa-ai-block-island:not(.no-bleed) {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow: visible !important;
}

/* Nested-island / inside-dialog containment.
   When an AI block island is rendered INSIDE another island, a modal,
   a popover, an off-canvas drawer, or any aria-dialog, the 100vw
   bleed must NOT fire — otherwise the inner island escapes its
   containing dialog and paints across the entire viewport, breaking
   the dialog's visual frame and trapping clicks behind it. These
   selectors detect the nested-context and reset the island back to
   `position: static; width: 100%` (its natural in-flow size) so it
   stays inside whatever dialog wraps it.
   Containers checked:
     - Another .bwa-ai-block-island (nested AI blocks)
     - [role="dialog"] / [role="alertdialog"] (ARIA dialogs)
     - .modal, .modal-content, .modal-body (Bootstrap modals)
     - .popover, .tooltip (Bootstrap popover/tooltip)
     - .offcanvas (Bootstrap off-canvas drawer)
     - dialog (native HTML dialog element)
     - .ai-modal (BWA AI Content / AI Image / AI Block modals)
     - .aibp-edit-overlay (AI Block edit overlay's own wrapper) */
.bwa-ai-block-island .bwa-ai-block-island,
[role="dialog"] .bwa-ai-block-island,
[role="alertdialog"] .bwa-ai-block-island,
.modal .bwa-ai-block-island,
.modal-content .bwa-ai-block-island,
.modal-body .bwa-ai-block-island,
.popover .bwa-ai-block-island,
.tooltip .bwa-ai-block-island,
.offcanvas .bwa-ai-block-island,
dialog .bwa-ai-block-island,
.ai-modal .bwa-ai-block-island,
.aibp-edit-overlay .bwa-ai-block-island {
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important; /* re-clip so nothing escapes the dialog frame */
}

/* Content cap inside AI Block islands — the OUTER section/wrapper stays
   at 100vw so backgrounds (gradients, nebula canvas, hero images) paint
   edge-to-edge, but anything matching `*-inner` (the convention AI blocks
   use for their content wrapper) gets centered and capped at 1600px so
   readable text doesn't stretch the full viewport.
   Backgrounds typically live on direct children of the section
   (`.cj-nebula-bg`, `.cj-hero-bg`, etc.) which DO NOT match `*-inner`,
   so they keep their full-width behavior. */
.bwa-ai-block-island [class$="-inner"],
.bwa-ai-block-island [class$="-grid"],
.bwa-ai-block-island [class$="-content"],
.bwa-ai-block-island [class$="-wrap"],
.bwa-ai-block-island [class$="-wrapper"],
.bwa-ai-block-island [class$="-row"],
.bwa-ai-block-island [class$="-container"],
.bwa-ai-block-island [class*="-inner "],
.bwa-ai-block-island [class*="-content-cap"] {
  /* Inner content cap — reads from --bwa-content-cap CSS variable so
     the AI Block edit overlay's "Inner cap" dropdown can override per
     block by writing the var inline on the outer wrapper. 1600px is
     the default when no override is set. To disable the cap entirely
     for a block, set --bwa-content-cap: none on the wrapper.
     Selector list covers every common content-wrapper naming pattern:
       *-inner   (cj-commerce-inner)
       *-grid    (bento-grid, feature-grid)
       *-content (panel-content, card-content)
       *-wrap / *-wrapper (generic flex/grid wrappers)
       *-row     (feature-row, stats-row, button-row)
       *-container (semantic content containers, NOT bootstrap .container)
     Backgrounds typically use *-bg / *-background / *-overlay which
     don't match — so the cap binds inner content without strangling
     edge-to-edge gradients / canvases / images.
     NOTE: AIBlockIslandLoader.cs ALSO emits a `<style>` with the same
     selectors AFTER each block's scoped CSS (cascade-order + higher
     specificity tiebreak) so block-author hardcoded max-widths can't
     beat the editor's chosen cap. */
  max-width: var(--bwa-content-cap, 1600px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* DO NOT set width or padding here — preserve the block's own
     responsive padding (clamp()) and width:100% so it shrinks with
     the viewport on small screens. */
}

/* Same content cap for blocks that use a nested .container instead of
   an `*-inner` wrapper (BWA legacy pattern). */
.bwa-ai-block-island > section > .container,
.bwa-ai-block-island > article > .container,
.bwa-ai-block-island > div > .container {
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Explicit defensive cap on tab panels / content cards inside AI Block
   islands — these are the readable-content surfaces (paragraphs, lists,
   flow diagrams) that must stay contained even if a future CSS rule
   accidentally unbinds the parent inner-wrapper cap. Defaults to the
   same 1600px content rail; tighten per-block if a specific design
   needs narrower (e.g. long-form text panels at 1280px). */
.bwa-ai-block-island [class*="tab-panel"],
.bwa-ai-block-island [class*="panel-content"],
.bwa-ai-block-island [class*="card-body"],
.bwa-ai-block-island [class*="content-card"] {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Pack-to-top override for AI block cards.
   AI-generated cards (article.g-card, .bento-card, .feature-card, etc.)
   commonly use `display: flex; flex-direction: column;` with one of
   these gap-creating patterns:
     - `justify-content: space-between` on the card
     - `margin-top: auto` on the last child (or steps list / CTA)
     - `flex: 1` on a middle element that grows to fill empty space
   When the parent grid stretches all cards to match the tallest
   sibling's height (typical `align-items: stretch` behaviour) and one
   card has shorter content than the tallest, the gap-creating pattern
   pushes the short card's content apart, leaving a visible empty band
   in the middle. This override packs the card's children to the top
   so the short card's content stays clustered against its header.
   Block authors who explicitly want bottom-anchored CTAs in equal-
   height cards can opt out by adding `.no-pack-top` to the card. */
.bwa-ai-block-island article:not(.no-pack-top),
.bwa-ai-block-island [class*="-card"]:not(.no-pack-top),
.bwa-ai-block-island [class*="g-card"]:not(.no-pack-top) {
  justify-content: flex-start !important;
  align-content: flex-start !important;
}
.bwa-ai-block-island article:not(.no-pack-top) > *,
.bwa-ai-block-island [class*="-card"]:not(.no-pack-top) > *,
.bwa-ai-block-island [class*="g-card"]:not(.no-pack-top) > * {
  /* Cancel the `margin-top: auto` push pattern. `unset` resolves to
     `0` when nothing else sets margin-top, neutralising the auto-push;
     explicit block-author margins on specific children (e.g. via a
     `.steps { margin-top: 24px }` rule) still win because that rule
     fires AFTER this one only if specificity allows — and the block's
     selector usually has higher specificity than `[class*="-card"] > *`.
     `flex-grow: 0` cancels the `flex: 1` filler pattern (a spacer div
     or middle content area that grows to fill the stretched height,
     creating the hole). Combined, these two cancellations stop short
     cards from developing visible empty bands when they sit next to
     taller siblings in an `align-items: stretch` grid. */
  margin-top: unset !important;
  flex-grow: 0 !important;
}
.bwa-ai-block-island article:not(.no-pack-top) > *:first-child,
.bwa-ai-block-island [class*="-card"]:not(.no-pack-top) > *:first-child,
.bwa-ai-block-island [class*="g-card"]:not(.no-pack-top) > *:first-child {
  /* First child: explicit 0 so the header sits flush with the card top. */
  margin-top: 0 !important;
}