/* ============================================================================
   Binary Bliss V2.2 — MOBILE SIGNAL PRESENTATION
   Owner addendum 2026-09-24 (mobile launch-check A/B/C/D + E-G/H where they touch
   Signal artwork). Staging review surface first; the release candidate carries the
   same rules scoped to the six approved service pages.

   What was wrong (root causes, found by measurement, not by guessing)
     1. Hero artwork was sized with `width: 100%` (bb-composition.css sets
        `.bb-service-header-art { width: 100%; max-width: 420px }` and
        `.bb-hero--integrated .bb-signal-states__panel { width: 100%; max-width: 100% }`
        below 992px) → on a 390px screen the artwork rendered 360–390px wide and read
        as a full-bleed image block.
     2. Body artwork was sized with `max-width: 820px`, and `max-width: 100%` below
        640px, so every body Signal also went full width → stacked Signals read as a
        photo gallery.
     3. The hero artwork sat on a decorative plate
        (`.bb-signal-states__panel::before { inset: 8% 7%; background: rgba(255,255,255,.58) }`)
        which drew the "oversized pale band" around it.
     4. The mobile rules lived inside `body.bb-v22-*` scopes, so any route without the
        matching body class silently fell back to the desktop sizing — the same route
        inconsistency the owner reported for the menu/footer.

   How this file fixes it
     The offending declarations are REPLACED, not compensated: no negative margins, no
     transform tricks, no fixed-height wrappers. Selectors are rooted on the components
     themselves, so no route depends on a body class. Each asset keeps its own true
     aspect ratio (`contain`), and no colour, copy or asset changes.

   Cascade note
     The staging overlay and the theme size these elements through page-scoped selectors, and the
     homepage state panel carries a size that no ordinary rule can reach, so the SIZE declarations in
     this file are marked !important. That is deliberate and narrow: only size/position/object-fit on the
     artwork wrappers, nothing on colour, copy, type or layout outside the artwork. The approved design-pass
     stylesheet uses the same technique for its menu rules.

   Caps applied (owner numbers)
     hero Signal      : 75–82vw visual width, hard max-width 300px, centred
     body Signal      : 50–60vw visual width, hard max-width 230px, max height 220px
     one primary Signal per section; secondary decorative art shrinks rather than stacking
   ========================================================================= */

@media (max-width: 991px) {

  /* --- A1. HERO SIGNAL: prominent but bounded, true ratio, no plate --------- */

  .bb-v2 .bb-service-header-art,
  .bb-service-header-art,
  .bb-v2 .bb-hero--integrated .bb-signal-states__panel,
  .bb-hero--integrated .bb-signal-states__panel,
  /* the homepage hero panel is also reachable through its page body class, which is how the
     staging overlay sized it 87-89vw; naming that scope here is what actually caps it. */
  body.bb-v22-home .bb-hero--integrated .bb-signal-states__panel,
  body[class*="bb-v22-home"] .bb-hero--integrated .bb-signal-states__panel {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    width: min(82vw, 300px) !important;
    max-width: 300px !important;
    margin: clamp(0.75rem, 3vw, 1.25rem) auto 0 !important;
    aspect-ratio: 864 / 738 !important;
    background-position: center;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  .bb-v2 .bb-service-header-art img,
  .bb-service-header-art img,
  .bb-v2 .bb-hero--integrated .bb-signal-states__panel img,
  .bb-hero--integrated .bb-signal-states__panel img {
    display: none;
  }
  /* the pale plate behind the hero artwork: removed, not shrunk */
  .bb-v2 .bb-hero--integrated .bb-signal-states__panel::before,
  .bb-hero--integrated .bb-signal-states__panel::before,
  .bb-v2 .bb-hero--integrated .bb-signal-states__panel::after,
  .bb-hero--integrated .bb-signal-states__panel::after,
  body.bb-v22-home .bb-hero--integrated .bb-signal-states__panel::before,
  body.bb-v22-home .bb-hero--integrated .bb-signal-states__panel::after,
  body[class*="bb-v22-home"] .bb-hero--integrated .bb-signal-states__panel::before,
  body[class*="bb-v22-home"] .bb-hero--integrated .bb-signal-states__panel::after {
    content: none;
    display: none;
  }

  /* --- A2. FIRST-SCREEN HIERARCHY: heading and copy own the screen ---------
     The artwork is supporting, so it follows the copy. Visual order only — the
     markup stays exactly as approved, so there is no duplicate element and no JS. */

  .bb-has-header-art {
    display: flex;
    flex-direction: column;
  }
  .bb-has-header-art > .container {
    order: 1;
  }
  .bb-has-header-art > .bb-service-header-art {
    order: 2;
  }
  .bb-has-header-art > .bb-service-header-note {
    order: 3;
    text-align: left;
  }
  .bb-has-header-art .breadcumb--con {
    max-width: none !important;
  }

  /* --- B. BODY SIGNAL: supporting artwork, never a full-width image --------- */

  .bb-v2 .bb-signal-art img,
  .bb-signal-art img,
  .bb-v2 .bb-diagram .bb-signal-art img,
  .bb-diagram .bb-signal-art img,
  .bb-v2 .bb-signal-band .bb-signal-art img,
  .bb-signal-band .bb-signal-art img,
  .bb-v2 .bb-signal-band .bb-signal-art picture,
  .bb-signal-band .bb-signal-art picture {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: min(58vw, 230px) !important;
    max-height: 220px !important;
    object-fit: contain !important;
    margin-inline: auto !important;
  }
  /* About and why-choose-us plates carry the same Signal artwork inside the theme's thumbnail
     boxes; without these the artwork stayed 92vw wide on those routes. */
  .uza-about-us-area .about-us-thumbnail picture,
  .uza-about-us-area .about-us-thumbnail img,
  .about-us-thumbnail picture,
  .about-us-thumbnail img,
  .uza-why-choose-us-area .choose-us-thumbnail picture,
  .uza-why-choose-us-area .choose-us-thumbnail img,
  .choose-us-thumbnail picture,
  .choose-us-thumbnail img,
  .bb-v2 .about-us-thumbnail img,
  .bb-v2 .choose-us-thumbnail img,
  body.bb-v22-about .about-us-thumbnail img,
  body.bb-v22-about .about-us-thumbnail picture,
  body.bb-v22-about .choose-us-thumbnail img,
  body.bb-v22-about .choose-us-thumbnail picture,
  body[class*="bb-v22-about"] .about-us-thumbnail img,
  body[class*="bb-v22-about"] .about-us-thumbnail picture,
  body[class*="bb-v22-about"] .choose-us-thumbnail img,
  body[class*="bb-v22-about"] .choose-us-thumbnail picture {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: min(58vw, 230px) !important;
    max-height: 220px !important;
    object-fit: contain !important;
    margin-inline: auto !important;
  }
  .about-us-thumbnail,
  .choose-us-thumbnail {
    min-height: 0 !important;
    background-color: transparent;
    border: 0;
    background-image: none !important;
  }

  .bb-v2 .bb-signal-art,
  .bb-signal-art,
  .bb-v2 .bb-signal-art--light,
  .bb-signal-art--light,
  .bb-v2 .bb-signal-art--plate,
  .bb-signal-art--plate,
  .bb-v2 .bb-signal-art--seamless,
  .bb-signal-art--seamless {
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* the senior-led partner artwork is supporting art too: shrink, never stack */
  .bb-v2 .bb-partner__art,
  .bb-partner__art {
    position: static !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    width: min(58vw, 230px) !important;
    max-width: 230px !important;
    margin: 0 auto var(--bb-space-5, 24px) !important;
  }
  .bb-v2 .bb-partner__art img,
  .bb-partner__art img {
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: contain !important;
  }

  /* --- D. NO EMPTY WRAPPERS: nothing may be taller than its own content ----- */

  .bb-signal-art,
  .bb-signal-band,
  .bb-signal-band__inner,
  .bb-signal-art__caption,
  .bb-service-header-art,
  .bb-hero--integrated .bb-signal-states__panel {
    min-height: 0 !important;
    max-height: none !important;
  }

  /* --- E. TYPOGRAPHY + CTA: no orphaned heading, no overflowing button ------ */

  .bb-has-header-art .breadcumb--con .title,
  .bb-has-header-art .breadcumb--con .bb-display {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .bb-btn,
  .uza-btn {
    max-width: 100% !important;
    white-space: normal;
  }
}