/* ============================================================
   Solutions infographic page — desktop
   Uniform width-relative (vw) scale of NorthCarolina_Solutions_Desktop.jpg
   (a green header, a white 3-column body, and a cream footer nav).
   ============================================================ */
:root {
  --sol-green:  #2D7744;   /* header background */
  --sol-cream:  #E9E4DE;   /* footer nav background */
  --sol-title:  #6FBE1E;   /* bright green "SOLUTIONS" wordmark */
  --blue:       #39ACC7;   /* resilience pill / Floods nav */
  --gold:       #EDA900;   /* energy pill / Energy nav */
  --red:        #CC3433;   /* wildfire pill / Heat nav */
  --ink:        #201E1F;   /* body text */
  --link:       #2E7D44;   /* green link bullets */
  --rule:       #cbc6bf;   /* thin divider lines */
}

*, *::before, *::after { box-sizing: border-box; }

body.solutions {
  margin: 0;
  /* body copy is a humanist sans (Lato); headers use a bold condensed
     sans (Barlow Condensed); the SOLUTIONS wordmark is Montserrat Black */
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: #fff;
  border-bottom: 1.2vw solid #5DA513;   /* thin green bar at the very bottom */
  -webkit-font-smoothing: antialiased;
}
.cond { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* the reusable click cursor icon (inherits the surrounding text colour) */
.cur { width: 1.5vw; height: auto; flex: none; }

/* ---------- Header (green) ---------- */
.sol-header {
  background: var(--sol-green);
  color: #fff;
  display: flex;
  align-items: flex-start;
  gap: 2vw;
  padding: 2.2vw 2vw 1.2vw;
}
.sol-head-left { flex: 1 1 0; min-width: 0; }
.sol-titleblock { display: flex; align-items: center; gap: 1.4vw; }
.sol-badge-link { display: block; flex: none; line-height: 0; transition: filter .12s ease, transform .12s ease; }
.sol-badge-link:hover { filter: brightness(1.06); transform: translateY(-1px); }
.sol-badge { width: 9.5vw; }
.sol-title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 5.1vw;
  line-height: .9;
  font-weight: 900;
  letter-spacing: -.005em;
  color: var(--sol-title);
}
.sol-subtitle {
  margin: .55vw 0 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 2.53vw;
  line-height: 1.0;
  font-weight: 700;
}
.sol-intro {
  margin: 1.3vw 0 0;
  font-size: 1.05vw;
  line-height: 1.5;
  max-width: 49vw;
}
.sol-tagline { display: none; }   /* header tagline shown only on mobile */
.sol-hero {
  width: 47vw;
  flex: none;
  align-self: flex-start;
  display: flex;
  gap: .85vw;            /* gap shows the background (green header here) */
}
.sol-hero img { flex: 1; min-width: 0; height: auto; }

/* ---------- Body (white, three columns) ---------- */
.sol-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;   /* pill / paragraph / bold lead / links */
  row-gap: 1.9vw;
  padding: 2.1vw 2vw 2.4vw;
}
/* each column is a subgrid, so the pill, paragraph, bold lead and link list
   line up row-for-row across all three columns (shorter paragraphs leave a
   gap so every bold lead starts on the same line, matching the mockup) */
.sol-col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / span 4;
  padding: 0 1.3vw;
}
.sol-col + .sol-col { border-left: 1px solid var(--rule); }

.sol-pill {
  border-radius: .9vw;   /* rounded rectangle (r ~= 0.17 of pill height in the mockup), not a full pill */
  color: #fff;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: 1.75vw;
  line-height: 1.05;
  text-align: center;
  padding: .5vw 1.3vw;
  min-height: 4.6vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sol-pill--blue { background: var(--blue); }
.sol-pill--gold { background: var(--gold); }
.sol-pill--red  { background: var(--red);  }

.sol-para  { margin: 0; font-size: 0.97vw; line-height: 1.5; }
.sol-lead  { margin: 0; font-size: 0.97vw; line-height: 1.5; font-weight: 700; }
.sol-links { list-style: none; margin: 0; padding: 0; }
.sol-links li {
  position: relative;
  padding-left: 1vw;
  margin: 0 0 .55vw;
  color: var(--link);
  font-weight: 700;
  font-size: 0.84vw;
  line-height: 1.25;
}
.sol-links li::before { content: "•"; position: absolute; left: 0; }

/* ---------- Footer nav (label images, four equal columns, in line) ---------- */
.sol-nav {
  background: var(--sol-cream);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;  /* 4 equal cols, dividers between */
  align-items: center;
  padding: 2.3vw 0;
}
.sol-nav a {
  justify-self: center;                 /* centre each label image in its equal column */
  display: block;
  text-decoration: none;
}
/* hover lifts only the label image — the divider lines (borders / ::after) stay put */
.sol-nav-desk, .sol-nav-mob { transition: transform .12s ease, filter .12s ease; }
.sol-nav a:hover .sol-nav-desk,
.sol-nav a:hover .sol-nav-mob { transform: translateY(-2px); filter: brightness(1.06); }
.sol-nav-desk { height: 2.1vw; width: auto; display: block; }  /* uniform height keeps labels in line & inside each column */
.sol-nav-mob { display: none; }   /* two-line label images only on mobile */
.sol-nav .divider { flex: none; width: 2px; height: 3vw; background: #555; }

/* ============================================================
   TABLET (<= 1024px) — matches NorthCarolina_Solutions_Tablet.jpg
   Header stacks: text block, then the three hero photos as a full-width
   row on the white body; the three-column body/footer just scale up in vw.
   ============================================================ */
@media (max-width: 1024px) {
  /* green covers ONLY the text block; the hero photos sit on the white body */
  .sol-header {
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    gap: 3vw;
    padding: 0 0 1.5vw;
  }
  .sol-head-left {
    width: 100%;
    flex: none;
    background: var(--sol-green);
    padding: 3vw 3vw 2.8vw;
  }
  .sol-badge { width: 15vw; }
  .sol-titleblock { gap: 2.5vw; }
  .sol-title { font-size: 12vw; }
  .sol-subtitle { font-size: 4.7vw; margin-top: 1vw; }
  .sol-intro { font-size: 2.6vw; line-height: 1.36; max-width: none; margin-top: 1.8vw; }
  .sol-hero { width: 100%; gap: 1.6vw; padding: 0 3vw; }   /* full-width row on white body */
  /* reference tablet crops the hero photos shorter than the desktop portraits */
  .sol-hero img { aspect-ratio: .79; object-fit: cover; object-position: center; height: auto; }

  .sol-body { padding: 1.5vw 3vw 4vw; row-gap: 2vw; }
  .sol-col { padding: 0 1.4vw; min-width: 0; }
  .sol-pill { font-size: 1.6vw; min-height: 3.8vw; padding: .4vw .9vw; border-radius: .7vw; }
  .sol-para  { font-size: 1.35vw; line-height: 1.45; }
  .sol-lead  { font-size: 1.35vw; line-height: 1.45; }
  .sol-links li { font-size: 1.28vw; line-height: 1.28; padding-left: 1.6vw; margin-bottom: .9vw; }

  .sol-nav { padding: 2.6vw 0; }
  .sol-nav a { min-width: 0; }
  .sol-nav-desk { height: 2.3vw; }
  .sol-nav .divider { height: 3.2vw; }
}

/* ============================================================
   MOBILE (<= 600px) — matches northcarolina_solutions-mobile.jpg
   Single column: green header (badge + tagline, SOLUTIONS, subtitle, intro,
   hero photos), white body with the three sections stacked, and a 2x2 text
   footer nav.
   ============================================================ */
@media (max-width: 600px) {
  /* ---- Header: full-bleed green, stacked (hero photos stay on the green) ---- */
  .sol-header {
    flex-direction: column;
    align-items: stretch;
    background: var(--sol-green);   /* reset the tablet's transparent header */
    gap: 4.5vw;
    padding: 5vw 5vw 6vw;
  }
  /* the text block is not its own green card on mobile — the whole header is green */
  .sol-head-left { width: 100%; flex: none; background: transparent; padding: 0; }
  .sol-titleblock { flex-wrap: wrap; align-items: center; gap: 3.5vw; }
  .sol-badge { width: 24vw; flex: none; }
  .sol-tagline {
    display: block; flex: 1; min-width: 0; margin: 0;
    font-style: italic; font-weight: 700; font-size: 4.7vw; line-height: 1.15;
    color: #fff;
  }
  .sol-titles { flex-basis: 100%; margin-top: 1vw; }
  .sol-title { font-size: 13vw; }
  /* let the subtitle wrap naturally on mobile (mockup breaks after "FOR") */
  .sol-subtitle { font-size: 5.5vw; line-height: 1.08; margin-top: 1.5vw; }
  .sol-subtitle .sub-br { display: none; }
  .sol-intro { font-size: 2.9vw; line-height: 1.5; max-width: none; margin-top: 3vw; }
  /* mobile hero photos are taller portraits than the tablet crop, on the green header */
  .sol-hero { width: 100%; gap: 2vw; padding: 0; }
  .sol-hero img { aspect-ratio: .54; object-fit: cover; object-position: center; }

  /* ---- Body: single column, sections stacked ---- */
  .sol-body { display: block; padding: 6vw 5vw; }
  .sol-col { display: block; padding: 0; }
  .sol-col + .sol-col { border-left: none; margin-top: 6vw; }
  .sol-pill {
    width: 100%;
    font-weight: 700;
    font-size: 5.8vw; line-height: 1.05; min-height: 15vw;
    padding: 3vw 3.5vw; border-radius: 2.4vw;
  }
  .sol-para  { font-size: 3vw; line-height: 1.45; margin-top: 3.5vw; }
  .sol-lead  { font-size: 3vw; line-height: 1.45; margin-top: 3.5vw; }
  .sol-links { margin-top: 3vw; }
  .sol-links li { font-size: 2.85vw; line-height: 1.32; padding-left: 2.6vw; margin-bottom: 1.6vw; }

  /* ---- Footer: 2x2 grid of two-line label images (grey, like the mockup) ---- */
  .sol-nav {
    background: #D2D3D5;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    padding: 0;
  }
  .sol-nav .divider { display: none; }
  .sol-nav a {
    position: relative;
    justify-self: stretch;
    display: flex; align-items: center; justify-content: center;
    padding: 7vw 5vw;
  }
  .sol-nav-desk { display: none; }
  .sol-nav-mob { display: block; width: auto; height: 12vw; }
  .sol-nav--home .sol-nav-mob { height: 6.8vw; }   /* one-line label: match the others' cap height */
  /* full-width dark rule between the two rows */
  .sol-nav a:nth-of-type(1), .sol-nav a:nth-of-type(2) { border-bottom: 1px solid #2b2b2b; }
  /* short, centred vertical divider between the two columns of each row */
  .sol-nav a:nth-of-type(1)::after, .sol-nav a:nth-of-type(3)::after {
    content: ""; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: #2b2b2b;
  }
}