/* ============================================================
   Warrant Responsive Layer
   ------------------------------------------------------------
   Shared mobile media queries for landing (index.html) and
   demo (demo.html). Page-specific selectors (h1.hero vs .hero)
   are disjoint by class, so both pages can include this file
   safely — unmatched rules are no-ops.

   Breakpoints follow tokens.css:
     --bp-mobile  640px (header collapse)
     --bp-tablet  768px (typography + spacing scale-down)
     --bp-desktop 1024px (demo workspace stack)
   ============================================================ */

/* ---------- Demo workspace: stack columns under 1024px ---------- */
@media (max-width: 1024px) {
  .demo { grid-template-columns: 1fr !important; }
}

/* ---------- Tablet & below: typography + spacing ---------- */
@media (max-width: 768px) {
  .container { padding: 0 var(--space-5); }

  /* Landing: section + hero scaling */
  section { padding: var(--space-14) 0 !important; }
  section.section--hero { padding: var(--space-20) 0 var(--space-12) !important; }
  h1.hero { font-size: 36px !important; line-height: var(--leading-tight); max-width: 100%; }

  /* Hero metadata strip: stack 3-up on narrow widths instead of horizontal squeeze */
  .hero-bar { flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--space-3) 0 !important; font-size: 10px; margin-bottom: var(--space-8) !important; }
  .hero-bar .clk { font-size: 10px; }
  /* Hero seal: hide on mobile (decorative at corner; keeps hero copy from collision) */
  .hero-seal { display: none; }
  /* Serif lede: scale down on mobile */
  p.lede--serif { font-size: var(--text-md) !important; line-height: 1.55; max-width: 100%; }
  h2 { font-size: var(--text-xl) !important; line-height: var(--leading-snug); }
  p.lede { font-size: var(--text-base) !important; }

  /* Landing: PDF mockup compresses + scrolls */
  .pdf { padding: var(--space-6) var(--space-5) !important; max-width: 100%; overflow-x: auto; }
  .pdf table { font-size: 11px; }
  .pdf__head { font-size: 9px; }
  .pdf__title { font-size: 15px; }

  /* Landing: data tables become horizontal-scroll on narrow widths */
  table.regimes,
  table.cost { font-size: var(--text-xs); display: block; overflow-x: auto; white-space: nowrap; }

  /* Landing: numbered step rows collapse to single column */
  .step { grid-template-columns: 1fr; gap: var(--space-2); }
  .step__num { padding-top: 0; }

  /* Landing: footer stacks */
  .footer__row { flex-direction: column; gap: var(--space-3); }
  .footer a { display: inline-block; padding: var(--space-2) 0; min-height: 44px; }

  /* Landing: statute blockquote tightens */
  blockquote.statute { padding-left: 14px; font-size: 13px; }
  a.quiet-cta + a.quiet-cta { margin-left: var(--space-4); }

  /* Demo: hero scaling (note: demo .hero is a section class, distinct from landing's h1.hero) */
  .hero { padding: var(--space-10) 0 var(--space-6) !important; }
  .hero h1 { font-size: 28px !important; line-height: 1.15; letter-spacing: var(--tracking-tight); }
  .hero p { font-size: 15px; }

  /* Demo: workspace padding compresses */
  main { padding: var(--space-8) 0 !important; }
  .demo { gap: var(--space-8) !important; }

  /* Demo: pipeline stages wrap 2-up */
  .stage-row { flex-wrap: wrap; }
  .stage-row .stage { min-width: calc(50% - 4px); }

  /* Demo: sample buttons hit 44px touch target */
  .sample-btn { min-height: 44px !important; padding: 0 var(--space-4) !important; }

  /* Demo: result row values can wrap on narrow widths */
  .result__row .value { font-size: var(--text-xs); word-break: break-all; }

  /* Demo: dropzone padding compresses */
  .wrt-dropzone { padding: var(--space-8) var(--space-4) !important; }
}

/* ---------- Mobile: header collapse + 44px touch targets ---------- */
@media (max-width: 640px) {
  .wrt-header__nav { display: none !important; }
  .wrt-header { gap: var(--space-3); padding: var(--space-4) 0 !important; }
  .wrt-header__brand {
    padding: var(--space-3) 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .wrt-header > a:last-of-type {
    padding: var(--space-3) var(--space-2);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footer a {
    padding: var(--space-3) var(--space-2) !important;
    min-width: 44px;
    text-align: left;
  }
}

/* ---------- Reduced-motion: honor user preference ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Disable progress-bar transition on demo pipeline */
  .progress__fill { transition: none !important; }

  /* Disable any token-driven motion */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}