/* ==========================================================
   General SEO -page-specific tweaks
   ----------------------------------------------------------
   This page's creative visuals reuse the existing grs-* toolkit
   from google-ranking-service.css (frame/terminal/ring dashboards)
   and mobile-seo.css (.grs-phone, .grs-float-chip) -no new visual
   language is introduced. Only true one-offs live here.
   ========================================================== */

/* Section-level split/zigzag layout helpers, shared naming with
   other inner pages (mobile-seo.php, google-ranking-service.php) */


/* ==========================================================
   RESPONSIVE HARDENING -no cutoffs on any device
   ----------------------------------------------------------
   The shared stylesheets already handle .grs-frame/.grs-terminal/
   .grs-phone/.grs-ring-grid narrowing (see mobile-seo.css). The
   rules below close the remaining gaps specific to the custom
   markup this page adds: the hero's floating stat chip, the
   2-column icon-tile grid in the Benefits section, and general
   overflow safety so nothing forces horizontal scroll.
   ========================================================== */

/* Universal overflow guard -flex/grid children default to
   min-width:auto, which lets one wide child push the whole
   section wider than the viewport. */
.grs-visual,
.grs-visual * ,
.grs-steps,
.grs-step,
.faq-map,
.cards-row > * {
  min-width: 0;
}

/* Never allow horizontal scroll regardless of what a section adds */
body { overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }

/* Hero floating "Visibility Score" stat chip -hide below 480px so
   it can never overlap or spill outside the framed browser mockup
   on the smallest phones (matches mobile-seo.css's own pattern for
   .grs-float-chip). */
@media (max-width: 480px) {
  .grs-review-chip { display: none; }
}

/* Benefits section icon-tile grid -drop to a single column on very
   narrow screens so labels never truncate or wrap awkwardly. */
@media (max-width: 420px) {
  .grs-frame-body [style*="grid-template-columns:repeat(2,minmax(0,1fr))"] {
    grid-template-columns: 1fr !important;
  }
}

/* Process-step timeline (Content Optimization visual) -tighten gap
   and icon size on small phones so text never gets squeezed. */
@media (max-width: 480px) {
  .grs-step { gap: 0.75rem; padding: 1rem 1.1rem; }
  .grs-step-icon { width: 42px; height: 42px; }
  .grs-step-icon svg,
  .grs-step-icon i { width: 18px; height: 18px; }
}

/* Search-result card scene in hero -on very narrow screens the
   star-rating + review-count row can wrap awkwardly; force it to
   stack cleanly instead of overlapping. */
@media (max-width: 380px) {
  .grs-stars { display: block; }
  .grs-stars span { display: block; margin-top: 0.15rem; }
}

/* Directory-consistency rows (Citations Building visual) -allow
   the status pill to wrap under the label instead of overflowing
   the card on the narrowest phones. Scoped to rows with a border-
   radius pill row inside the frame body, not the footer bar. */
@media (max-width: 360px) {
  .grs-frame-body > div > div[style*="border-radius:.75rem"] {
    flex-wrap: wrap;
    row-gap: 0.3rem;
  }
}