/* ============================================================================
   PREPARIFIED — responsive.css

   This holds ONLY what inline styles cannot express: media queries, the mobile
   hero re-order, and a couple of layout corrections. Vertical density is no
   longer here — those values are baked into the markup in site/, so this file
   stopped being an override layer when the site became source-of-truth.

   !important is still required throughout: the pages carry inline styles, and
   an author !important is the one thing that outranks them.

   Selector note: support.js re-serialises every style attribute at runtime, so
   the live DOM holds "padding: 48px" (with a space) even where the file says
   "padding:48px". Any NEW attribute-substring selector must match both forms.
   The rules below avoid attribute matching wherever a tag selector will do.
   ========================================================================== */

/* ── tablet and below ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {

  /* Uniform vertical rhythm on small screens. Tag selector, not an attribute
     match, so it keeps working when a section's desktop padding is edited. */
  section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Grids reflow rather than collapsing outright, so two columns of small
     cards survive where they fit. Forcing 1fr everywhere would make the page
     LONGER on mobile — the opposite of what we want. */
  [style*="grid-template-columns"] {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  }

  /* the hero is the one grid that must always stack */
  [style*="1.05fr"] { grid-template-columns: 1fr !important; }

  /* Hero running order: copy, then photo, then the two buttons. The photo and
     the buttons sit in DIFFERENT grid columns, so `order` alone cannot
     interleave them — `display:contents` dissolves both column wrappers so
     every child becomes a direct grid item and can be reordered. */
  [style*="1.05fr"] > div { display: contents !important; }

  /* the image column's wrapper was doing the centring — do it on the img now */
  [style*="1.05fr"] img {
    order: 1;
    display: block !important;
    margin: 4px auto 0 !important;
  }

  /* buttons last, equal width, side by side, slightly shorter */
  [style*="1.05fr"] div[style*="flex-wrap"] {
    order: 2;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100%;
    margin-top: 18px;
  }
  [style*="1.05fr"] div[style*="flex-wrap"] > a {
    flex: 1 1 0 !important;      /* equal width regardless of label length */
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;  /* min-height governs the height instead */
    min-height: 46px;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  /* "Get the App" has a 1px border, the filled button has none. `flex-basis:0`
     cannot shrink an item below its own padding+border, so that 1px each side
     survives free-space distribution and leaves the pair 2px apart. A matching
     transparent border equalises them; box-sizing alone does NOT fix it. */
  [style*="1.05fr"] div[style*="flex-wrap"] > a.btn--primary {
    border: 1px solid transparent !important;
  }

  /* Fixed px sizing from the canvas (width:521px; height:79px) is what pushed
     the hero copy underneath the phone image. */
  p[style*="width"], p[style*="height"],
  h1[style*="width"], h2[style*="width"] {
    width: auto !important; height: auto !important; max-width: 100% !important;
  }

  /* Header wraps to two rows: logo + CTA, then nav centred beneath. No
     hamburger needed for five items, and no JS to break. */
  header > div {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    padding: 12px 20px !important;
  }
  header nav {
    overflow: visible !important;   /* was clipped, hiding every link */
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px !important;
  }

  img { max-width: 100%; height: auto; }
}

/* ── phones ───────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important; gap: 16px !important;
  }

  /* The markup hard-wraps hero copy with <br> tuned to desktop measure; on a
     phone those breaks land mid-sentence. Let the text reflow naturally. */
  section p br { display: none; }

  /* wide letter-spacing pushed the eyebrow onto two lines */
  .t-eyebrow { letter-spacing: 0.1em !important; font-size: 13px !important; }

  /* the header CTA was ballooning to roughly half the header */
  header > div { padding: 10px 16px !important; row-gap: 8px !important; }
  header .btn, header a.btn { padding: 0 18px !important; font-size: 14px !important; }
  header img { height: 28px !important; }
  header nav { gap: 14px !important; }
  header nav a { font-size: 13px !important; }

  /* 44px minimum touch target — the audience skews 50+ */
  header a, .btn, button, a.btn {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
}