/* Homepage refinements for the owner's 15 September 2026 batch.
   Loaded only by index.html, hero-floating.html and hero-footer.html, and only after the last
   bundle, so every rule here is the last word on the property it sets. */

/* 1. Pre-hero pill: a little transparency so the hero collage reads through it. Phones only.
      color-mix keeps the site token instead of freezing today's value; a browser without it keeps
      the opaque background that is there now. */
@media (max-width: 767px) {
  .ry-float-content .ry-hero-pretitle.ry-pretitle-pill {
    background: color-mix(in srgb, var(--color-tokens-background-depth) 85%, transparent);
  }
}

/* 2. Hero CTA: phones read "Get my free listing", every other width keeps "Get free photos".
      display:none also keeps the hidden one out of the accessibility tree, so a screen reader
      hears exactly one label. The header CTA is a different button and is not selected here. */
.ry-hero-cta .ry-cta-label-phone { display: none; }
@media (max-width: 767px) {
  .ry-hero-cta .ry-cta-label-wide { display: none; }
  .ry-hero-cta .ry-cta-label-phone { display: inline; }
}

/* 5. iPad only: the listing arrows go back beside the phone, where desktop already puts them.
      css/ry-phone-pop.css drops them under it for everything below 1100px; phones override that
      themselves, tablets never did. Restored for 768-1024px, the widths the owner named. */
@media (min-width: 768px) and (max-width: 1024px) {
  .ry-phone-pop-nav { top: 50%; bottom: auto; transform: translateY(-50%); }
  .ry-phone-pop-prev { right: calc(100% + 12px); left: auto; }
  .ry-phone-pop-next { left: calc(100% + 12px); right: auto; }
}

/* 7. Closing band heading on phones: "getting more deals?" stays whole on its own line.
      The 32px is the size css/ry-mitra-footer.css already sets for this heading under 767px, and
      which .ry-site-page #footer-preview h2 had been overriding to 38px. */
@media (max-width: 767px) {
  #footer-preview .ry-mf-close h2 { font-size: 32px; }
  #footer-preview .ry-mf-close h2 .ry-phone-nowrap { white-space: nowrap; }
}

/* 8a. Step numbers on the card grid, which is what #three-steps renders up to 900px: the dark chip
       goes, the number grows 1.8x and turns white over the step photo. The photos are ordinary
       property shots, so a soft shadow carries the number over a light corner; where the photo is
       already dark it costs nothing. */
#three-steps .ry-steps-number {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  font-size: 22px;
  line-height: 1.1;
  text-shadow: 0 1px 8px #0000008c;
}
@media (max-width: 767px) {
  #three-steps .ry-steps-number { font-size: 18px; }
}

/* 8b. From 901px the card grid is hidden and the scrollytelling steps take over. Their number is
       already chipless, but it is 12px and it sits on the page, not on a photo, so it only grows
       by the same 1.8x. It is deliberately not turned white: the page behind it is #f7f6f5. */
@media (min-width: 901px) {
  #three-steps .ry-how-step > .label-large { font-size: 22px; line-height: 1.1; }
}

/* 3. "A photoshoot, from a phone video." goes back on the shared title ladder between 768 and
      1100px, where css/ry-phone-pop.css gives it a clamp of its own and drops it to 34px against
      the 45px of "An AED 3.3M rental. From one phone video." This is not a chosen size: it is the
      declaration `.ry-site-page .ry-section-heading .ry-section-title` already makes, resolving to
      --ry-section-display-size, which is the token the other heading reads. Phones never saw the
      clamp and do not see this; above 1100 the clamp stops and both were already equal. */
@media (min-width: 768px) and (max-width: 1100px) {
  #showcase-phone-pop .ry-section-title { font-size: var(--ry-title-size, var(--typography-size-h2)); }
}