/* ==========================================================================
   SIGMA SCANNER — responsive.css
   Breakpoint refinements for the FOUNDATION only.

   Design position: mobile is the design, desktop is the same design with
   more room. Only --bp-lg (1024) introduces genuinely new layout ideas —
   the split-scroll, the pinned rail, the wipe. Everything below it is the
   single-column layout breathing; everything above it is wider gutters.

   Breakpoints
     sm   480   large phone
     md   768   tablet — raster imagery begins here
     lg  1024   desktop — new layout concepts begin here
     xl  1280
     2xl 1440   container caps
   ========================================================================== */

@layer layout {

  /* ======================================================================
     ≥ 480 · sm
     ====================================================================== */
  @media (min-width: 480px) {
    :root { --gutter: 24px; }

    /* Buttons may sit side by side from here. Below 480 they are always
       full-width and stacked — two side-by-side buttons on a 375px screen
       is a design error, not a responsive strategy. */
    .ss-cluster--actions { flex-wrap: nowrap; }
  }


  /* ======================================================================
     ≥ 768 · md
     Raster screenshots begin at this breakpoint. Below it the hero visual
     is inline SVG (~11 KB) rather than a ~180 KB raster — sharp at every
     density, and it removes the hero image request entirely from the
     devices that can least afford it.
     ====================================================================== */
  @media (min-width: 768px) {
    :root {
      --gutter: 32px;
      --nav-h: 72px;
      --nav-h-scrolled: 64px;
    }

    .ss-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }

    .ss-float { inset-block-end: var(--sp-6); inset-inline-end: var(--sp-6); }

    /* The mobile sticky CTA bar is a mobile device. From md up, real CTAs
       are always within reach in the layout itself. */
    .ss-cta-bar { display: none; }
  }


  /* ======================================================================
     ≥ 1024 · lg — the only breakpoint that changes what the page IS
     ====================================================================== */
  @media (min-width: 1024px) {
    :root {
      --gutter: 48px;
      --nav-h: 88px;
      --nav-h-scrolled: 64px;
    }

    .ss-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    /* ---- Named layout patterns (06-DESIGN-SYSTEM.md §7.5) --------------
       Defined here rather than in style.css because none of them exist
       below this width. */

    /* split-62 — hero panel, mobile-app section */
    .ss-layout--split62 {
      display: grid;
      grid-template-columns: 62fr 38fr;
      gap: var(--gap);
      align-items: center;
    }

    /* sticky-split — features, FAQ */
    .ss-layout--sticky-split {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: var(--gap);
    }
    .ss-layout--sticky-split > :first-child { grid-column: 1 / 5; }
    .ss-layout--sticky-split > :last-child  { grid-column: 6 / -1; }

    /* asym-quote — testimonials, alternating */
    .ss-layout--asym {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: var(--gap);
      align-items: start;
    }
    .ss-layout--asym > :first-child { grid-column: 1 / 8; }
    .ss-layout--asym > :last-child  { grid-column: 9 / -1; }

    .ss-layout--asym.is-reversed > :first-child { grid-column: 1 / 5; }
    .ss-layout--asym.is-reversed > :last-child  { grid-column: 6 / -1; }
  }


  /* ======================================================================
     ≥ 1280 · xl
     ====================================================================== */
  @media (min-width: 1280px) {
    :root { --gutter: 56px; }
  }


  /* ======================================================================
     ≥ 1440 · 2xl — containers cap; only the gutter keeps growing
     ====================================================================== */
  @media (min-width: 1440px) {
    :root { --gutter: 64px; }
  }


  /* ======================================================================
     SHORT VIEWPORTS
     Laptops at 1366×768 and split-screen windows. The hero must never
     require scrolling to reach its primary CTA.

     NOTE ON 100vh: this document runs inside an iframe, where 100vh is the
     IFRAME viewport, not the device viewport, and 100dvh is unreliable.
     Never use a bare 100vh — always min(100vh, <cap>).
     ====================================================================== */
  @media (min-width: 1024px) and (max-height: 800px) {
    :root {
      --section-y-airy:    clamp(64px, 4vw + 32px, 104px);
      --section-y-default: clamp(56px, 3.5vw + 28px, 88px);
    }
  }


  /* ======================================================================
     COARSE POINTER
     Applies to touch laptops and tablets as well as phones, so it is keyed
     to the pointer rather than to width.
     ====================================================================== */
  @media (pointer: coarse) {
    /* Every control clears the 44px touch minimum regardless of its
       visual box size. */
    a[class], button, [role="button"], input, select, textarea {
      min-block-size: var(--touch-min);
    }

    /* Icon-only controls keep their compact visual box but gain an
       invisible 44×44 hit area. */
    .ss-icon-btn { position: relative; }
    .ss-icon-btn::after {
      content: "";
      position: absolute;
      inset: 50% auto auto 50%;
      translate: -50% -50%;
      inline-size: var(--touch-min);
      block-size: var(--touch-min);
    }
  }


  /* ======================================================================
     FINE POINTER — hover-only enhancements are gated here, never by width
     ====================================================================== */
  @media (hover: hover) and (pointer: fine) {
    .ss-hoverable { transition: transform 200ms var(--ease-out-quad), box-shadow 200ms var(--ease-out-quad); }
  }


  /* ======================================================================
     PRINT
     Low priority, but a broken print stylesheet looks careless and the
     fix is fifteen lines.
     ====================================================================== */
  @media print {
    :root { --gutter: 0; }

    .ss-nav, .ss-float, .ss-cta-bar,
    .ss-line, .ss-utility, .ss-skip { display: none !important; }

    .ss-section { padding-block: 16pt; break-inside: avoid; }

    [data-theme="dark"] { background: #fff !important; color: #000 !important; }

    a[href^="http"]::after {
      content: " (" attr(href) ")";
      font-size: 9pt;
      color: #555;
    }
  }
}