/* MOB-001 — shared responsive layer.
   Loaded after the Industry design-system stylesheet on every page.
   Desktop rendering is untouched: every rule sits inside a max-width media
   query, except the anchor scroll-margin fix (which applies at all widths
   because the nav is sticky at all widths). !important is required only
   because the layouts it corrects are authored as inline styles. */

/* Sticky-nav anchor offset — keeps in-page jump targets clear of the bar. */
#quote-form, #services, #areas, #faq { scroll-margin-top: 84px; }

/* Comparison tables scroll horizontally instead of crushing their columns. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
  /* Grid children default to a min-content floor, which lets one wide child
     (the comparison table) stretch its whole column past the viewport.
     Releasing that floor is what actually lets the columns stack. */
  [style*="grid-template-columns"] > * { min-width: 0; }
  .table-scroll { min-width: 0; }
  .table-scroll > .table { min-width: 460px; }

  /* Two-column editorial/hero splits stack. */
  [style*="grid-template-columns: 1.15fr 0.85fr"],
  [style*="grid-template-columns: 0.85fr 1.15fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Three- and four-up card rows and the footer drop to two columns. */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Header bar wraps: brand on its own line, links and phone CTA below. */
  .nav { flex-wrap: wrap; row-gap: var(--space-2); }
  .nav-brand { flex: 1 0 100%; margin-right: 0; }

  /* Comfortable tap targets. */
  .btn { min-height: 44px; }
  .input { min-height: 44px; }
  #faq button[aria-controls] { min-height: 48px; }

  iframe { max-width: 100%; }
}

@media (max-width: 600px) {
  /* Single column below phablet width — two-up cards get too narrow to read. */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Tighter page gutters so content keeps its measure. */
  section[style] { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  footer[style] { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .nav { padding-inline: var(--space-4) !important; }

  h1 { font-size: 32px; }
  h2 { font-size: 25px; }

  /* Hero action rows wrap instead of overflowing. */
  [style*="display: flex"][style*="gap"] { flex-wrap: wrap; }
}

@media (max-width: 380px) {
  /* Hero stat row stays two-up but loosens; everything else is single column. */
  h1 { font-size: 29px; }
  .nav a:not(.btn) { font-size: 13px; }
}