/* ---------------------------------------------------------------------------
   Responsive layer for Run The Page.

   The page markup carries its styles inline, so every rule here needs
   !important to win. Nothing in this file changes the desktop design: the
   first breakpoint starts at 1080px. Layout hooks are the rp-* classes on
   the containers in the HTML — see README.md.

   Breakpoints
     <=1080px  laptop / landscape tablet  — 4-up becomes 2-up, splits stack
     <=820px   portrait tablet / big phone — 3-up becomes 2-up, nav wraps
     <=560px   phone                       — everything single column
--------------------------------------------------------------------------- */

.rp-burger { display: none; }

/* Long words (handles, URLs) must never push the page sideways. */
.rp-page { overflow-x: clip; }
.rp-page h1, .rp-page h2, .rp-page p { overflow-wrap: break-word; }

/* ── laptop / landscape tablet ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .rp-shell        { padding-left: 28px !important; padding-right: 28px !important; }
  .rp-shell-bar    { padding-top: 12px !important; }

  .rp-page h1      { font-size: 46px !important; }
  .rp-page h2      { font-size: 34px !important; }

  .rp-grid-4       { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rp-split        { grid-template-columns: minmax(0, 1fr) !important; gap: 44px !important; }
  .rp-qa-row       { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .rp-cta          { padding: 60px 34px !important; }

  /* Once the split collapses, the "Starting takes one message" column sits
     directly above the steps, so a sticky column would ride down over them
     as you scroll. Note this cannot be an inline-style attribute selector:
     the runtime re-serialises style attributes ("position: sticky"), so
     matching on "position:sticky" silently never fires. */
  .rp-sticky       { position: static !important; }
}

/* ── portrait tablet / large phone ─────────────────────────────────────── */
@media (max-width: 820px) {
  .rp-shell        { padding-left: 22px !important; padding-right: 22px !important; }
  .rp-page section { padding-top: 76px !important; }

  .rp-page h1      { font-size: 40px !important; }
  .rp-page h2      { font-size: 30px !important; }

  .rp-grid-3       { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .rp-band         { flex-direction: column !important; align-items: flex-start !important;
                     gap: 20px !important; padding: 28px 26px !important; }
  .rp-cta          { padding: 48px 26px !important; }

  /* Header: the section links collapse behind a burger, leaving the logo and
     the WhatsApp button on one row. Open state is html.rp-nav-open, set by
     assets/js/nav.js. */
  .rp-bar          { height: auto !important; flex-wrap: wrap !important;
                     padding: 11px 11px 11px 16px !important; row-gap: 0 !important; }
  /* The logo does the pushing, not the button: margin-left:auto on the CTA
     would swallow the free space and wrap the burger onto its own row. */
  .rp-bar > a:first-child { margin-right: auto !important; }
  .rp-navcta       { order: 2 !important; margin-left: 8px !important;
                     padding: 0 14px !important; }
  .rp-burger       { order: 3 !important; display: flex !important; margin-left: 8px !important; }
  .rp-burger > span { display: block; width: 15px; height: 1.5px; border-radius: 1px;
                      background: #171717; transition: transform .18s ease, opacity .18s ease; }

  .rp-nav          { order: 4 !important; position: static !important; transform: none !important;
                     display: none !important; width: 100% !important;
                     flex-direction: column !important; align-items: stretch !important;
                     gap: 0 !important; }
  .rp-nav > a      { padding: 13px 2px !important; border-top: 1px solid #F1F1EE !important;
                     font-size: 15px !important; }

  .rp-nav-open .rp-nav        { display: flex !important; padding-bottom: 4px !important; }
  /* Burger becomes a close mark while the menu is open. */
  .rp-nav-open .rp-burger > span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .rp-nav-open .rp-burger > span:nth-child(2) { opacity: 0; }
  .rp-nav-open .rp-burger > span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* The role/what-they-touch/what-they-cost table stops being a table. */
  .rp-table-row    { grid-template-columns: minmax(0, 1fr) !important;
                     gap: 4px !important; padding: 16px 22px !important; }
  .rp-table-row:first-child { display: none !important; }   /* column headings */

  .rp-footer       { gap: 26px !important; }

  /* The hero runs tall once the headline wraps; claw back some of the air
     under it so the first real section is not a scroll away. */
  .rp-hero            { padding-bottom: 56px !important; }
  .rp-hero > p:last-of-type { margin-top: 36px !important; }
}

/* ── phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .rp-shell        { padding-left: 18px !important; padding-right: 18px !important; }
  .rp-page section { padding-top: 60px !important; }

  .rp-page h1      { font-size: 33px !important; line-height: 1.14 !important;
                     letter-spacing: -.02em !important; }
  .rp-page h2      { font-size: 26px !important; line-height: 1.2 !important; }
  .rp-page p       { font-size: 15.5px !important; }

  .rp-grid-2,
  .rp-grid-3,
  .rp-grid-4       { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .rp-split        { gap: 34px !important; }
  .rp-step-row     { grid-template-columns: 40px minmax(0, 1fr) !important; gap: 14px !important; }

  /* Stacked full-width buttons beat two cramped ones side by side. */
  .rp-herobtns     { flex-direction: column !important; align-items: stretch !important; }
  .rp-herobtns > a { justify-content: center !important; }
  .rp-cta          { padding: 38px 20px !important; }
  .rp-cta a        { width: 100% !important; justify-content: center !important; }

  /* Floating social marks would sit on top of the headline at this width. */
  .rp-deco         { display: none !important; }
  /* Cards are absolutely stacked inside a fixed-height box; the copy needs
     one more line of room once it wraps on a narrow screen. */
  .rp-heronote     { height: 176px !important; }

  .rp-band         { padding: 24px 20px !important; }
  .rp-band a       { width: 100% !important; justify-content: center !important; }

  .rp-filters      { flex-direction: column !important; align-items: flex-start !important;
                     gap: 12px !important; }
  .rp-footer       { flex-direction: column !important; gap: 22px !important; }
  .rp-footer-links { gap: 16px 18px !important; }

  /* The bar has to hold logo + WhatsApp + burger on one row at 390px, so
     every piece of it loses a little weight here. */
  .rp-bar          { padding: 10px 10px 10px 14px !important; }
  .rp-wordmark     { font-size: 16px !important; }
  .rp-navcta       { height: 34px !important; padding: 0 12px !important;
                     font-size: 12.5px !important; gap: 7px !important; }
  .rp-burger       { width: 34px !important; height: 34px !important; margin-left: 6px !important; }

  .rp-hero            { padding-top: 40px !important; padding-bottom: 40px !important; }
  .rp-hero > p:last-of-type { margin-top: 26px !important; }
}

/* ── very small phones (<=380px) ────────────────────────────────────────── */
@media (max-width: 380px) {
  /* Not enough room for logo + labelled button + burger, and the button is
     worth more than its label: keep it as the WhatsApp icon alone. The text
     node collapses but is still read out by screen readers. */
  .rp-navcta       { font-size: 0 !important; width: 34px !important; padding: 0 !important;
                     gap: 0 !important; justify-content: center !important; }
}