/* ============================================================
   Heat & Drought — "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 cream/red band:
     - desktop set  > 1024px      (mixed source — see below)
     - tablet set   601–1024px    NorthCarolina_Heat_Tablet-rev2026-08.jpg   974x2294
     - mobile set   ≤ 600px       northcarolina_heat-mobile-rev2026-08.jpg  1197x16968

   DESKTOP PROVENANCE — deliberately two sources. The Aug-2026 desktop revision
   was only exported at 1920px, half the 4000px the other Area-of-Concern pages
   ship at. Comparing it against the previous 4000px master shows the artwork is
   pixel-identical everywhere except the ED-visits chart (2026 bar 1,808 added;
   caption July -> June 2026). So:
     - heat-5-health.jpg          <- NorthCarolina_Heat_Desktop-rev2026-08.jpg (1920px,
                                     the only section whose content actually changed)
     - all other desktop slices   <- NorthCarolina_Heat and Drought-FINAL.jpg  (4000px)
   That keeps 7 of 8 sections at full resolution. If a 4000px re-export of the
   revision arrives, re-cut the whole set from it and drop this split.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body.heat {
  margin: 0;
  background: #4C0405;                 /* matches the poster maroon 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 */
.heat-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. */
.heat-tablet { display: none; }
.heat-mobile { display: none; }

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

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

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

/* DESKTOP: four columns over the cream nav band (top 70.9% of the cropped band);
   the two underlined links sit in the red legal bar below it. */
.heat-nav--desktop .nav-col    { top: 0;     height: 70.9%; }
.heat-nav--desktop .legal-link { top: 79.9%; height: 9%; }

/* TABLET: reuses the desktop nav band (Energy/Floods/Solutions/Home), so it
   shares the desktop band's overlay geometry. */
.heat-nav--tablet .nav-col     { top: 0;     height: 70.9%; }
.heat-nav--tablet .legal-link  { top: 79.9%; height: 9%; }

/* MOBILE: 2x2 quadrant hit areas over the gray nav band (top 86.4% of the band);
   legal links sit in the red bar, padded out to a usable touch height. */
.heat-nav--mobile .legal-link  { top: 89%; height: 9%; }