/* 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;
  }
}

/* ============================================================
   Frame of Mind Atlanta — build-specific mobile hardening. */
@media (max-width: 768px) {
  [style*="grid-template-columns:repeat(12"],
  [style*="grid-template-columns: repeat(12"] {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  [style*="grid-column:1/8"],
  [style*="grid-column: 1/8"],
  [style*="grid-column:8/13"],
  [style*="grid-column: 8/13"] {
    grid-column: auto !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }
  .story-grid,
  .promo-inline,
  .frames-grid,
  .location-grid,
  .testimonial-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .brands-row { gap: 1rem 1.75rem !important; }
  .rwall-grid { columns: 1 !important; }
  html, body { max-width: 100% !important; overflow-x: hidden !important; }
  .container-prose { max-width: 100% !important; box-sizing: border-box !important; }
}