/* Owner's phones-only homepage batch, 16 September 2026.
   Loaded only by index.html, hero-floating.html and hero-footer.html, right after
   css/ry-home-mobile-20260915.css. Every rule is inside a phone media query, so tablet and
   desktop are untouched. See patch_home_mobile_20260916.py for what each letter refers to. */

/* A. The floating WhatsApp button is hidden on phones. js/ry-overlays.js only toggles the
      `hidden` attribute, so there is no inline display to fight, and this sits later in the
      cascade than `.ry-overlays-fab { display: grid }` in css/ry-overlays.css at the same
      specificity. The sticky phone CTA bar and the in-page WhatsApp buttons are untouched. */
@media (max-width: 767px) {
  .ry-overlays-fab { display: none; }
}

/* B. The paid-listing clock sentence in step 3, wrapped in the HTML so it can be dropped on
      phones only. The class does nothing at any other width. */
@media (max-width: 767px) {
  .ry-phone-hide { display: none; }
}

/* C. Review rows on phones: keep vertical page scrolling native while horizontal moves reach the
      pointer handlers in js/ry-home-mobile-20260916.js, which owns the rows at this width. */
@media (max-width: 767px) {
  #reviews .wrap_marquee-testimonials { touch-action: pan-y; }
}

/* F. Kyra's quote card goes above the CTA on phones and gets compact. Written with the
      #kyra-spotlight id because the rules it has to beat are id-qualified too. The story list is
      given margin-inline: 0 because the inherited `margin-inline: auto` would shrink-wrap it once
      its parent becomes a flex column, losing the full-width left-aligned bullets. */
@media (max-width: 767px) {
  #kyra-spotlight .ry-ks-copy { display: flex; flex-direction: column; }
  #kyra-spotlight .ry-ks-story-list { order: 0; margin-inline: 0; }
  /* A flex item is its own formatting context, so the last bullet's 12px bottom margin stops
     collapsing out of the list and the gap under it would grow by exactly that. Measured 264px
     tall before and 276px after without this line; with it the list is 264px again. */
  #kyra-spotlight .ry-ks-story-list > li:last-child { margin-bottom: 0; }
  #kyra-spotlight .ry-ks-quote {
    order: 1;
    margin: 0 0 20px;
    padding: 12px 14px;
    max-width: 100%;
    border-radius: 12px;
  }
  #kyra-spotlight .ry-ks-actions { order: 2; }
  #kyra-spotlight .ry-ks-quote blockquote { font-size: 14px; line-height: 1.4; }
  #kyra-spotlight .ry-ks-quote figcaption { gap: 8px; margin-top: 8px; }
  #kyra-spotlight .ry-ks-quote figcaption img { width: 28px; height: 28px; }
  #kyra-spotlight .ry-ks-quote figcaption > div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  #kyra-spotlight .ry-ks-quote strong { display: inline; }
  #kyra-spotlight .ry-ks-quote .ry-ks-stars {
    display: inline;
    margin: 0;
    font-size: 12px;
  }
}