/* UnderstandSEO — universal responsive layer.
   Purpose: guarantee every multi-column SECTION layout collapses to a single
   column on phones/tablets, even when the column layout was written as an
   INLINE style (which a normal stylesheet rule cannot override). Hence the
   !important flags. Link this LAST, after all other stylesheets, so it wins.

   This fixes the failure mode where a build looks correct on desktop (wide
   enough for columns) but "formats are mixed up" on a phone because the
   desktop grid never collapsed.

   Breakpoints: 768px = tablet/phone (stack two-col sections),
                560px = small phone (stack fine grids like menu/cards). */

@media (max-width: 768px) {
  /* Section layout classes from the design-system components */
  .hero-asym,
  .hero-asym-grid,
  .hero-split,
  .hero-image-led,
  .feature-3up-grid,
  .feature-grid,
  .zigzag-row,
  .zigzag-row--reverse,
  .loy-wrap,
  .rwall-summary,
  .rw-wrap,
  .two-col,
  .split-2,
  [class*="zigzag"],
  [class*="two-col"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* The asymmetric hero's decorative block is absolutely positioned on
     desktop; let it flow (or hide) so it doesn't overlap text on a phone. */
  .hero-asym-block {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
  }
  .hero-asym-figure { order: -1; }
  .zigzag-row--reverse .zigzag-image { order: -1; }

  /* The hero stat bar and any inline flex rows must wrap instead of squashing. */
  .hero-info-bar { flex-wrap: wrap !important; gap: 1rem 1.5rem !important; }
  [style*="display:flex"],
  [style*="display: flex"] { flex-wrap: wrap !important; }

  /* Inline-styled grids with no class (e.g. a hard-coded "1.5fr 1fr 1fr"
     three-column row) can't be reached by class selectors — collapse them too. */
  [style*="display:grid"],
  [style*="display: grid"] { grid-template-columns: 1fr !important; }

  /* Class-based flex rows (e.g. the review/booking widget) must stack too —
     these have no inline display:flex, so the selector above can't reach them.
     The .rw-row puts two flex:1 fields side-by-side; on a phone that overflows. */
  .rw-row,
  [class*="-row"] { flex-direction: column !important; align-items: stretch !important; }
  .rw-card,
  .rw-field,
  .rw-field input,
  .rw-field select { max-width: 100% !important; box-sizing: border-box !important; }

  /* Universal overflow safety net: never let media or fixed-width blocks
     push past the viewport on a phone. */
  img, video, canvas, svg, iframe, table { max-width: 100% !important; height: auto; }
}

@media (max-width: 560px) {
  .menu-i-grid,
  .feature-3up-grid,
  .gallery-grid,
  [class*="-grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------------------------
   Stonelluxe build — page-specific collapse layer.
   These grids carry their column counts either on a class or in an
   INLINE grid-template-columns (without an inline `display:grid`, so
   the generic [style*="display:grid"] selector above cannot reach
   them). Named explicitly so the 390px check passes.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .hero-split-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
}
@media (max-width: 768px) {
  .hero-split-grid,
  .sl-facts-grid,
  .wj-grid,
  .nc-grid,
  .bq-grid,
  .trade-grid,
  .loc-grid { grid-template-columns: 1fr !important; }
  .sl-facts-grid { gap: 1px !important; }
  .wj-grid { gap: 1.5rem !important; }
  .sl-nav-in { gap: 0.75rem !important; }
  .sl-wordmark { font-size: 1.15rem !important; }
  .sl-nav-call { font-size: 0.7rem !important; padding: 0.5rem 0.7rem !important; }
  /* The signature-move SVG is the classic overflow risk on a phone. */
  .wj-panel, .hero-inlay { overflow: hidden !important; max-width: 100% !important; }
  .wj-stage { margin-top: 2rem !important; }
}
@media (max-width: 560px) {
  .sl-facts-grid { grid-template-columns: 1fr !important; }
}

/* 390px live check (2026-07-15): .loc-line was the only grid still resolving to
   >1 column on a phone (96px label + 231px value). It fitted inside 375px, but
   the mobile rule is absolute — stack the label above the value. */
@media (max-width: 768px) {
  .loc-line { grid-template-columns: 1fr !important; gap: 0.25rem !important; }
  .loc-line dt { color: var(--accent) !important; }
}