/* ============================================================================
   responsive.css — mobile/tablet layer for the Simpiller site.

   WHY THIS FILE EXISTS, AND WHY IT LOOKS LIKE THIS
   The site is compiled to app.js as React.createElement calls whose styling is
   inline `style` objects. Inline styles cannot carry media queries, so the only
   way to make the layout respond to viewport width without rewriting the bundle
   is to override those inline styles from a stylesheet — hence the attribute
   selectors on serialised style strings, and the !important flags.

   The upside: this file is NOT generated, so re-exporting app.js from the
   design system will not wipe it (unlike the contact-form patch noted in
   DEPLOY-NOTES.md). The cost: selectors match on inline style text, so if the
   design system changes a value — e.g. a hero grid from 1.05fr/0.95fr to
   1fr/1fr — the matching rule stops applying. Re-check this file after any
   export. Each block below says what it targets so mismatches are easy to spot.

   Proper responsive behaviour belongs upstream in ui_kits/website/Site.jsx.
   This is a shim for the deployed site until that lands.

   Breakpoints:  <=1024px tablet   <=680px phone
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Type
   Fluid display type. Upper bound is the original desktop size, so wide
   screens are unchanged; the vw term only takes over below ~1000px. */
[style*="font-size: 62px"] { font-size: clamp(34px, 6.2vw, 62px) !important; }
[style*="font-size: 50px"] { font-size: clamp(30px, 5.0vw, 50px) !important; }
[style*="font-size: 46px"] { font-size: clamp(28px, 4.6vw, 46px) !important; }
[style*="font-size: 44px"] { font-size: clamp(27px, 4.4vw, 44px) !important; }
[style*="font-size: 40px"] { font-size: clamp(25px, 4.0vw, 40px) !important; }
[style*="font-size: 34px"] { font-size: clamp(23px, 3.4vw, 34px) !important; }
[style*="font-size: 30px"] { font-size: clamp(21px, 3.0vw, 30px) !important; }
[style*="font-size: 25px"] { font-size: clamp(20px, 2.5vw, 25px) !important; }

/* Nothing may force a horizontal scrollbar. */
img, svg, video, canvas { max-width: 100%; }

/* ------------------------------------------------------- 2. Tablet <=1024px */
@media (max-width: 1024px) {
  /* Band (section) gutters: `padding: <n>px 32px` */
  section[style*="px 32px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Hero + feature splits (text beside a visual) stack. */
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 0.95fr 1.05fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Four-across card rows become 2x2. */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Two-across splits that hold only a text column + a visual also stack;
     2x2 card grids (4 children) are left alone until the phone breakpoint. */
  [style*="grid-template-columns: 1fr 1fr"] {
    gap: 28px !important;
  }
}

/* -------------------------------------------------------- 3. Phone <=680px */
@media (max-width: 680px) {
  section[style*="px 32px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Tall vertical section padding is wasteful on a phone; halve it. */
  section[style*="88px 32px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  section[style*="84px 32px"] { padding-top: 46px !important; padding-bottom: 46px !important; }
  section[style*="80px 32px"] { padding-top: 44px !important; padding-bottom: 44px !important; }

  /* Every grid collapses to a single column. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* A grid item defaults to `min-width: auto`, so it refuses to shrink below
     its content's min-content width and spills out of its track however narrow
     the column gets. This is what pushed the patient hero ~18px past the right
     edge at 360px. Long unbroken strings get to wrap too. */
  [style*="grid-template-columns"] > * {
    min-width: 0;
  }

  h1, h2, h3, p, a, button {
    overflow-wrap: break-word;
  }

  /* Contact-form fields (DField) carry `grid-column: span 2` for full-width
     rows. In a collapsed single-column grid that span creates an implicit
     SECOND column, which put the fields back side by side and pushed the
     notes textarea wider than the dialog. Pin every field to one column. */
  [style*="grid-column: span 2"],
  [style*="grid-column: span 1"] {
    grid-column: span 1 !important;
  }

  /* Flex rows wrap rather than overflow. */
  [style*="display: flex"] { flex-wrap: wrap; }

  /* The dark closing-CTA panels use a flat 56px of padding on every side. At
     phone width that leaves ~246px of usable space inside a 358px panel, which
     is narrower than the "Ask your care team about Simpiller" button and was
     pushing it past the right edge of the page. */
  [style*="padding: 56px"] {
    padding: 28px 22px !important;
  }

  /* Buttons (Btn) are `white-space: nowrap` with 28px side padding and a hard
     height from the size scale (sm 34 / md 42 / lg 52). A long label such as
     "Ask your care team about Simpiller" therefore cannot shrink and ran off
     the page below ~380px. Let those labels wrap and the button grow, keeping
     a 44px minimum so they stay comfortable tap targets. Scoped to `button`
     so the 42px-tall text inputs and selects are not caught by it. */
  [style*="display: flex"] > button { max-width: 100%; }

  button[style*="height: 52px"],
  button[style*="height: 42px"] {
    max-width: 100%;
    height: auto !important;
    min-height: 44px;
    white-space: normal !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* ------------------------------------------------- 4. Header and top bar
   Both are built with hard-coded heights (top bar 40px, header 72px) around
   single-line flex rows. Their contents need ~810px; below that they wrap and
   spill out of those fixed heights, which is what made the nav sit on top of
   the hero. Free the heights, let the rows wrap, and drop the sticky
   behaviour — a wrapped header is ~3 rows tall and would eat a fifth of a
   phone screen on every scroll. */
@media (max-width: 860px) {
  /* Top bar: fixed 40px row -> wrapping auto-height row. */
  div[style*="height: 40px"][style*="max-width: 1200px"] {
    height: auto !important;
    flex-wrap: wrap;
    justify-content: center;
    padding: 9px 16px !important;
    gap: 6px 16px !important;
  }

  header[style*="height: 72px"] {
    height: auto !important;
    position: static !important;
  }

  header > div[style*="height: 100%"] {
    height: auto !important;
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 16px !important;
    gap: 10px !important;
  }

  /* `margin-left: auto` pushes a group to the far right on one line; once the
     row wraps it strands the group on a line of its own. */
  header nav[style*="margin-left: 28px"],
  [style*="margin-left: auto"][style*="display: flex"] {
    margin-left: 0 !important;
  }
}

/* ==========================================================================
   5. demo.html and provider-demo.html

   These two pages are hand-written HTML with real CSS classes (not compiled
   from app.js), so they are targeted normally rather than through inline-style
   selectors. Both were authored at a fixed 1180px stage.
   ========================================================================== */
@media (max-width: 680px) {
  /* Shared shell: 32px gutters are too generous once the stage has to fit. */
  .wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* demo.html — the device mockup is a hard 392px, which alone exceeds a
     390px viewport. Let it shrink; everything inside it is flex/percent so it
     reflows. The 720px screen height is left alone: it is a phone mockup and
     is meant to be tall. */
  .phone {
    width: 100% !important;
    max-width: 392px;
    margin-left: auto;
    margin-right: auto;
  }

  /* provider-demo.html — four-across step chips stack. */
  .steps {
    grid-template-columns: 1fr !important;
  }

  /* The simulated portal's left nav is decorative chrome; at phone width it
     costs 210px that the roster table needs. */
  .side {
    display: none !important;
  }

  /* The roster is a real table and does not usefully reflow below ~400px, so
     let it scroll inside its own card instead of being clipped. `.card` is the
     element that actually clips it (overflow-x: hidden); putting the scroll on
     `.main` looks right but has no effect, because `.card` crops the table
     first. Other cards are unaffected — `auto` only scrolls when it must. */
  .card {
    overflow-x: auto !important;
  }

  .url {
    max-width: none !important;
  }

  /* The simulated portal is a fixed 620px-tall stage. Once its stat cards
     stack, the content inside runs to ~1110px and the bottom half — including
     the rest of the roster — is silently cropped. Let the stage grow to fit
     on phones; it stays a fixed 620px stage at desktop sizes. */
  .app { height: auto !important; }
  .main { overflow: visible !important; }
  .content { overflow-y: visible !important; height: auto !important; }
}