/* =====================================================================
   Enviro Blocks — Layout heroes
   Part of the "Enviro Blocks — Layout" plugin. Loaded site-wide at
   priority 99, after each page's inline <style>.
   Only ever REDUCES spacing below 768px — desktop is untouched.
   ===================================================================== */

/* ── HEROES ──────────────────────────────────────────────────────────
   Hero min-heights ran 300/340/420/480/480/520/520px with no mobile
   rule on any of them. On a 667px-tall phone the Installation and
   Reviews heroes consumed 520px before a single word of content.

   Home is excluded: its calc(100svh - 60px) full-bleed hero is
   deliberate and already has its own mobile handling.
   ──────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .page-hero,
  .hero:not(.hero-home) { min-height: 380px !important; }
  .hero-content,
  .page-hero-content {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

@media (max-width: 480px) {
  .page-hero,
  .hero:not(.hero-home) { min-height: 320px !important; }
  .hero-content,
  .page-hero-content {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ── OVERFLOW GUARD ──────────────────────────────────────────────────
   Belt-and-braces against horizontal scroll on 360px devices. Wide
   tables scroll inside their own box rather than pushing the page.
   ──────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  html, body { overflow-x: hidden !important; }
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}