/* =====================================================
   MIDWEST RESPONSIVE FIXES
   Targeted mobile/tablet adjustments for custom inline-styled
   sections added on top of the base theme (About collage,
   homepage stat bar, title banner, team grid, etc).
   ===================================================== */

/* ---------------------------------------------------------------
   About section image collage (index.html)
   Desktop: 2-col grid with a tall left image + 2 stacked right
   cells + a floating "Multi-State" badge poking out the left edge.
   On tablets/phones this collapses to a single column with
   natural image heights, and the floating badge becomes a normal
   inline card instead of an absolutely-positioned overlay.
--------------------------------------------------------------- */
@media (max-width: 991px) {
  .about-collage {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    padding-bottom: 90px; /* room for the floating badge below */
  }

  .about-collage__cell {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .about-collage__cell--main {
    height: 320px !important;
  }

  .about-collage__cell:not(.about-collage__cell--main) {
    height: 200px !important;
  }

  .about-collage__floating-badge {
    position: absolute !important;
    left: 50% !important;
    bottom: -70px !important;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 320px;
    justify-content: center;
  }
}

@media (max-width: 575px) {
  .about-collage__cell--main {
    height: 240px !important;
  }
  .about-collage__cell:not(.about-collage__cell--main) {
    height: 160px !important;
  }
  .about-collage__floating-badge {
    bottom: -60px !important;
    padding: 12px 16px !important;
    min-width: 0 !important;
  }
}

/* ---------------------------------------------------------------
   Homepage stat bar (40+ Years / 6+ Properties / etc)
   Hide the vertical divider lines once the row wraps onto
   multiple lines on narrow screens — a divider mid-wrap looks
   like a stray floating line.
--------------------------------------------------------------- */
@media (max-width: 767px) {
  .home-stat-bar {
    justify-content: center !important;
    padding: 28px 20px !important;
  }
  .home-stat-bar__divider {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   Title banner (team.html and other inner pages)
   Make sure long headings/paragraphs don't overflow on small
   screens and the <br> forced line-break in the subtext doesn't
   force awkward wrapping.
--------------------------------------------------------------- */
@media (max-width: 575px) {
  .title-banner h1 {
    font-size: clamp(24px, 7vw, 32px) !important;
  }
  .title-banner p br {
    display: none;
  }
}

/* ---------------------------------------------------------------
   General safety net: prevent any accidental horizontal scroll
   caused by absolutely-positioned decorative elements (glow
   blobs, floating badges) bleeding past the viewport edge.
--------------------------------------------------------------- */
html, body {
  overflow-x: hidden;
}

/* ---------------------------------------------------------------
   Footer 3-column layout: already responsive (collapses to 1
   column under 972px via footer-3col-css), this just tightens
   spacing further on very small phones.
--------------------------------------------------------------- */
@media (max-width: 420px) {
  footer .footer-col .contact-heading,
  footer .footer-col__body {
    padding: 16px !important;
  }
}