/* ============================================================
   Floods & Storms — "Area of Concern" infographic (desktop + tablet + mobile).
   Each breakpoint is a dense data-viz poster presented as full-width
   section-slice images with a rebuilt, clickable footer nav overlaid on the
   cropped gray/blue band:
     - desktop set  (NorthCarolina_Flooding Costs_FINAL.jpg, 4000w)  > 1024px
     - tablet set   (NorthCarolina_Flooding_Tablet.jpg,       974w)  601–1024px
     - mobile set   (northcarolina_flooding-costs-mobile-FINAL.jpg, 2496w) ≤ 600px
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body.flood {
  margin: 0;
  background: #1B6870;                 /* matches the poster teal so letterboxing blends in */
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* posters fill the full viewport width (100vw) at any screen size — no cap */
.flood-page {
  width: 100%;
  background: #fff;
  container-type: inline-size;
}

.strip { display: block; width: 100%; height: auto; }

/* ---------- Responsive swap between the three slice sets ----------
   Desktop is the default; tablet takes over at ≤1024px; mobile at ≤600px. */
.flood-tablet { display: none; }
.flood-mobile { display: none; }

@media (max-width: 1024px) {
  .flood-desktop { display: none; }
  .flood-tablet  { display: block; max-width: none; }
}
@media (max-width: 600px) {
  .flood-tablet { display: none; }
  .flood-mobile { display: block; max-width: none; }
}

/* ---------- Footer nav + legal bar (cropped image + clickable overlays) ---------- */
.flood-nav { position: relative; line-height: 0; }
.flood-nav > img { display: block; width: 100%; height: auto; }

.flood-nav .nav-col,
.flood-nav .nav-quad,
.flood-nav .legal-link {
  position: absolute;
  display: block;
  transition: background-color .12s ease;
}
.flood-nav .nav-col:hover,
.flood-nav .nav-quad:hover { background: rgba(0, 0, 0, .05); }

/* DESKTOP: four columns over the gray nav band; legal links in the blue bar */
.flood-nav--desktop .nav-col    { top: 0; height: 70.7%; }
.flood-nav--desktop .legal-link { top: 83%; height: 12%; }

/* TABLET: reuses the desktop nav band (Energy/Heat/Solutions/Home), so it shares
   the desktop band's overlay geometry. */
.flood-nav--tablet .nav-col     { top: 0; height: 70.7%; }
.flood-nav--tablet .legal-link  { top: 83%; height: 12%; }

/* MOBILE: 2x2 quadrant hit areas over the gray nav band; legal links in the blue bar */
.flood-nav--mobile .legal-link  { top: 85.3%; height: 14.7%; }