/* ==========================================================================
   Iron Shore Roofing — hero + page gutter layout
   --------------------------------------------------------------------------
   Fixes two related problems:

   1. Dead space down the left. The site container is capped at 1280px and
      centred, leaving ~320px empty each side on a 1920 screen. The logo, hero
      copy and every section below inherit it.

   2. The hero lead-form card sits on top of the house. `.hero-inner` uses
      `justify-content: space-between`, pinning the card to the container's
      right edge — but the artwork is *also* right-anchored, so the card and
      the house fight for the same space. Measured overlap before this file:
      391px @1920, 472px @1600, 589px @1366.

   THE GEOMETRY
   The artwork is 16:9, right-anchored, and its width is derived from the
   hero's height. The house occupies roughly the right 56% of the frame, so
   its left edge lands near `100vw - 660px` — and that edge slides LEFT as the
   window narrows. The usable "safe lane" to the left of the house therefore
   shrinks faster than the content in it, which is why one fixed arrangement
   cannot clear the house at every width.

   So the layout switches:
     · >= 1500px  copy and card side by side, both sized into the safe lane
     · < 1500px   card stacks beneath the copy, still hard left, still clear
                  of the house
     · <= 1023px  untouched — the existing tablet/mobile treatment already
                  stacks and is tuned separately

   Additive only. Loaded after coast-hero.css. No colour, type or content
   changes; nothing is restructured.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reclaim the dead side margins, site-wide
   --------------------------------------------------------------------------
   Everything inside .container moves left together — header logo and nav, and
   every section on every page — so alignment stays consistent top to bottom.
   The min() keeps a comfortable gutter at narrower widths; capping at a flat
   1660px alone let the logo sit flush against the window edge at 1600.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .container {
    max-width: min(1660px, calc(100vw - 96px));
  }
}

/* --------------------------------------------------------------------------
   2. Wide screens — copy and form side by side, inside the safe lane
   -------------------------------------------------------------------------- */
@media (min-width: 1500px) {
  .hero.ch-on .hero-inner {
    /* space-between is what threw the card onto the house. */
    justify-content: flex-start;
    align-items: center;
    gap: clamp(24px, 2vw, 44px);
    max-width: none;
    padding-left: clamp(24px, 2.6vw, 72px);
    padding-right: clamp(20px, 2vw, 48px);
  }

  /* Copy and card scale together with the viewport so the pair stays inside
     the lane instead of the card being pushed into the artwork. */
  .hero.ch-on .hero-content {
    flex: 0 1 auto;
    max-width: clamp(360px, 26vw, 560px);
  }

  .hero.ch-on .hero-form-card {
    flex: 0 1 auto;
    width: clamp(320px, 22vw, 400px);
    margin-left: 0;
    margin-right: 0;
  }
}

/* --------------------------------------------------------------------------
   3. 1024–1499 — same two columns, tightened
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1499px) {
  .hero.ch-on .hero-inner {
    justify-content: flex-start;
    align-items: center;
    gap: clamp(18px, 1.8vw, 30px);
    max-width: none;
    padding-left: clamp(20px, 2.4vw, 40px);
    padding-right: 20px;
  }

  .hero.ch-on .hero-content {
    flex: 0 1 auto;
    max-width: clamp(310px, 25vw, 400px);
  }

  .hero.ch-on .hero-form-card {
    flex: 0 1 auto;
    width: clamp(292px, 22vw, 336px);
    margin-left: 0;
    margin-right: 0;
  }

  /* In a narrowed column the headline was wrapping to four lines instead of
     three, which pushed the hero to 689px tall — and via the height/width
     coupling below, dragged the house left and re-created the collision.
     Sizing it to hold three lines keeps the hero short and the house right. */
  .hero.ch-on .hero-content h1 {
    font-size: clamp(34px, 3.4vw, 46px) !important;
  }

  /* The trust strip is 62px; 96px of reserved shelf was more slack than the
     geometry can afford here. */
  .hero.ch-on .hero-inner {
    padding-bottom: 80px;
  }
}





/* --------------------------------------------------------------------------
   4. Very wide screens — keep the copy from drifting off on its own
   -------------------------------------------------------------------------- */
@media (min-width: 2100px) {
  .hero.ch-on .hero-inner {
    padding-left: clamp(72px, 5vw, 140px);
  }
}