/* ============================================================
   mobile-fixes.css  (v1.1)
   --------------------------------------------------------------
   Narrow-viewport refinements layered on top of the Webflow
   export (noritz.webflow.css). These rules address mobile-layout
   issues discovered while preparing the v1.1 release:

     1. Empty trailing <section class="section-22"> producing a
        ~1100px blank band above the footer on tablets.
     2. Empty trailing spacer column in the "Decade of Innovative
        Evolution" timeline appearing as a gap on mobile.
     3. Two new timeline columns (.column-23 / .column-35 — 2024
        and 2026 models) that weren't added to the 479px stack
        rule, so they stayed hidden on phones.
     4. Timeline images having max-width:none on tablets, letting
        them overflow their stacked columns on narrow screens.
     5. Oversized unit images in the "3 BTU Sizes" row on phones.
     6. A -180px left margin on the 2026 yellow "year" label at
        the 767px breakpoint that pushed it off-screen.
     7. ~99px / ~57px hardcoded left padding on the warranty copy
        at 767px, creating horizontal overflow on small phones.
     8. An empty .container-28 placeholder inside the "Need More
        Reasons" grid that added dead space on mobile.

   Load AFTER css/noritz.webflow.css so these rules win the cascade.
   ============================================================ */


/* ---------- 1. Collapse empty pre-footer section ---------- */
@media screen and (max-width: 991px) {
  .section-22 { min-height: 0; height: 0; padding: 0; margin: 0; }
}


/* ---------- 2. Hide trailing empty spacer in timeline row ---------- */
@media screen and (max-width: 991px) {
  .columns-7 > .w-col:empty { display: none; }
}


/* ---------- 3. Make all five timeline models visible & stacked on phones ---------- */
@media screen and (max-width: 767px) {
  /* Bring back the two new columns that were hidden at 991px
     but forgotten in the 479px stack rule. */
  .column-23, .column-35 { display: block; }
}

@media screen and (max-width: 479px) {
  .column-20, .column-21, .column-22,
  .column-23, .column-35 {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0 0 24px;
  }
}


/* ---------- 4. Keep timeline images inside their columns ---------- */
@media screen and (max-width: 991px) {
  .column-20 img, .column-21 img, .column-22 img,
  .column-23 img, .column-35 img,
  .image-41, .image-42, .image-43, .image-44 {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 479px) {
  .column-20 img, .column-21 img, .column-22 img,
  .column-23 img, .column-35 img {
    max-width: 220px;
    height: auto;
    margin: 0 auto;
    display: block;
  }
}

/* ---------- 5. Center the timeline row & kill large left offset on phones ---------- */
@media screen and (max-width: 767px) {
  .columns-7 {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
}

@media screen and (max-width: 479px) {
  /* Neutralize the -180px shift on the 2026 yellow label (it was
     aimed at tablet width but pushes the label off-screen on
     phones). */
  .text-block-12.yellow {
    margin-left: auto;
    margin-right: auto;
    padding-right: 0;
  }
  .text-block-10, .text-block-11, .text-block-12 {
    text-align: center;
  }
}


/* ---------- 6. Constrain "Now in 3 BTU Sizes" images on phones ---------- */
@media screen and (max-width: 767px) {
  .section-20 .ezimg {
    max-width: 260px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  .section-20 .text-block-16 {
    text-align: center;
  }
}


/* ---------- 7. Warranty block: remove hardcoded left padding on phones ---------- */
@media screen and (max-width: 479px) {
  .lndfeat.ez,
  .paragraph-14 {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
}


/* ---------- 8. Hide the empty spacer tile in "Need More Reasons" 2x2 grid ---------- */
@media screen and (max-width: 767px) {
  .section-21 .container-28:empty { display: none; }
}


/* ---------- 9. Prevent horizontal scroll / long headings ---------- */
html, body {
  overflow-x: hidden;
}

@media screen and (max-width: 479px) {
  .heading-26,
  .heading-28,
  .heading-13 {
    font-size: 2em;
    line-height: 1.2;
  }
  .paragraph-15 {
    font-size: 1em;
    line-height: 1.45;
  }
}


/* ---------- 10. Let the hero text breathe on phones ---------- */
@media screen and (max-width: 767px) {
  .columns-5 > .w-col + .w-col {
    margin-top: 16px;
  }
  .section-7.ez .text,
  .section-7.ez .text-block-8,
  .section-7.ez .text-block-13 {
    padding-left: 4%;
    padding-right: 4%;
  }
}


/* ---------- 11. Responsive-safe images (defensive) ---------- */
@media screen and (max-width: 991px) {
  .lndsection.ez img,
  .section-12 img,
  .section-8 img,
  .section-18 img,
  .section-21 img {
    max-width: 100%;
    height: auto;
  }
}