/* ============================================================
   North Carolina's Changing Future — main page
   Colors sampled directly from the design mockups in /docs
   ============================================================ */

:root {
  --bg:            #0F4920;  /* deep forest green (matches background.png) */
  --text:          #ffffff;
  --energy:        #EDA900;  /* gold  */
  --heat:          #CC3433;  /* red   */
  --floods:        #4EBAD7;  /* blue  */
  --solutions:     #5DA513;  /* green */
  --teal:          #10BAAD;  /* contact button */
  --btn-text:      #0E3A1A;  /* dark green text on bright buttons */
  --hpad:          clamp(20px, 3.1vw, 60px);  /* page side padding */
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background-color: var(--bg);
  background-image: url("assets/img/background.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* ---------- Layout shell ---------- */
/* DESKTOP: the whole composition fits in one viewport (100vh).
   Left column (text) + right column (areas of concern) fill the top;
   a full-bleed scene strip and a thin footer bar sit at the bottom.
   Flexible 1fr "gap" rows distribute the left-column items evenly. */
.hero-inner {
  min-height: 100vh;
  overflow: visible;               /* grow & scroll when content can't fit 100vh */
  display: grid;
  column-gap: clamp(24px, 2.6vw, 72px);
  /* Fixed 2.55 : 1 column ratio — see the min-width:1025px block below, where
     every desktop dimension is width-relative (vw) so the whole composition is
     a uniform scale of NorthCarolina_MainPage.jpg at any width. */
  grid-template-columns: minmax(0, 2.55fr) minmax(0, 1fr);
  /* Natural spacing: the composition keeps its own proportions and is NOT
     stretched to fill 100vh (stretching spread the elements apart and looked
     weird). Content packs from the top with fixed gaps; if it's shorter than
     the viewport the background shows below, if taller the page scrolls. */
  align-content: start;
  row-gap: clamp(14px, 2.4vh, 32px);
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-template-areas:
    "title    aside"
    "subtitle aside"
    "intro    aside"
    "cta      aside"
    "edf      aside"
    "strip    strip"
    "footer   footer";
  padding: clamp(20px, 3vh, 40px) var(--hpad) 0;
}

.title       { grid-area: title;    }
.subtitle    { grid-area: subtitle; }
.intro       { grid-area: intro;    }
.chevron     { grid-area: chevron;  display: none; }
.cta-row     { grid-area: cta;      }
.edf         { grid-area: edf;      }
.strip       { grid-area: strip;    }
.hero-right  { grid-area: aside;    }
.site-footer { grid-area: footer;   }

/* Right column: banner pinned to top, concern list distributed below */
.hero-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: clamp(8px, 1.8vh, 22px);   /* keeps rows clear of the banner */
}

/* ---------- Title ---------- */
.title { text-align: center; }
/* width fills the column at the mockup's 1920x1080, but a vh cap keeps the
   wordmark from overgrowing (and pushing the footer past 100vh) on shorter
   viewports — it shrinks to fit while preserving aspect ratio. */
.title .wordmark { width: auto; max-width: 100%; max-height: 22vh; margin: 0 auto; }
.title .badge    { display: none; }

.subtitle {
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.2rem, 2.05vw, 2.1rem);
  margin: 0;
  line-height: 1.1;
  text-align: center;
}

.intro {
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.5rem);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 66rem;
  text-align: center;
}

/* ---------- CTA buttons (image assets) ---------- */
.btn {
  display: inline-flex;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn img {
  height: clamp(38px, 4.4vh, 52px);
  width: auto;
  max-width: 100%;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.4vw, 22px);
  align-items: center;
  justify-content: center;
}

/* ---------- EDF supporter line ---------- */
.edf {
  font-size: clamp(.95rem, 1.1vw, 1.15rem);
  font-weight: 400;
  margin: 0;
  text-align: center;
}

/* ---------- Scene strip (full-bleed band at the bottom) ---------- */
.strip {
  height: 31.6vh;                          /* matches mockup proportion */
  margin: 0 calc(-1 * var(--hpad));        /* break out of side padding */
  overflow: hidden;
}
.strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

/* ---------- Areas of Concern banner (image) ---------- */
.aoc-banner { flex: none; }
.aoc-banner picture { display: block; }
.aoc-banner img { width: 100%; height: auto; }

/* ---------- Areas of Concern list ---------- */
/* DESKTOP: the four rows are distributed down the right column, below the
   banner, mirroring the mockup's rhythm. */
.aoc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(18px, 3vh, 46px);
}

/* Each concern is a single combined image (icon + title + button).
   DESKTOP: all four images render at the SAME height so their icon
   circles are identical in size (only the label/button width varies by
   text length, exactly like the mockup). The height is tuned in vw so
   the widest image (Energy, ~4.67:1) always fits the right column
   without max-width shrinking it below the others. */
.aoc { display: block; }
.aoc > a {
  display: block;
  transition: transform .12s ease, filter .12s ease;
}
.aoc picture { display: block; }
.aoc > a:hover { transform: translateY(-2px); filter: brightness(1.06); }
.aoc > a:active { transform: translateY(0); }

/* Each image is sized as a percentage of the right column so that:
   - the widest concern (Energy) spans the full AREAS OF CONCERN banner width,
   - every icon comes out the SAME height (width% = image aspect ÷ Energy's
     aspect of 4.67), so the circles match regardless of label length.
   This tracks the column width at every viewport, no vw/vh guessing. */
.aoc img { display: block; height: auto; }
.aoc--energy    img { width: 100%;   }  /* 4.67 / 4.67 */
.aoc--heat      img { width: 90.1%;  }  /* 4.21 / 4.67 */
.aoc--floods    img { width: 93.6%;  }  /* 4.37 / 4.67 */
.aoc--solutions img { width: 67.7%;  }  /* 3.16 / 4.67 */

/* ---------- Chevron (mobile scroll cue) ---------- */
.chevron svg {
  width: 48px;
  height: 28px;
  margin: 4px auto 0;
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Footer (thin full-bleed bar) ---------- */
.site-footer {
  margin: 0 calc(-1 * var(--hpad));
  padding: clamp(8px, 1.2vh, 14px) var(--hpad);
}
.site-footer p {
  margin: 0;
  font-size: clamp(.75rem, .9vw, .95rem);
  color: rgba(255, 255, 255, .9);
}
.site-footer a { text-decoration: underline; }

/* ============================================================
   TABLET  (single column, areas as 2x2 grid)
   Kicks in at 1024px (so iPad-portrait / 1024x1366 gets the tablet
   layout): below this width we switch from the wide two-column,
   100vh-pinned desktop composition to the airy single-column tablet
   layout (matches NorthCarolina_MainPage_Tablet.jpg) and scroll.
   ============================================================ */
@media (max-width: 1024px) {
  /* Uniform scale of NorthCarolina_MainPage_Tablet.jpg: single centered column
     with every dimension width-relative (vw), so the proportions match the
     mockup at any tablet width. Flows at its natural portrait height & scrolls.
     Values calibrated from the mockup (bands measured as % of its width). */
  .hero-inner {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    justify-items: stretch;
    text-align: center;
    column-gap: 0;
    align-content: start;
    row-gap: 4.5vw;
    padding: 5vw var(--hpad) 0;
    grid-template-areas:
      "title"
      "subtitle"
      "intro"
      "strip"
      "aside"
      "cta"
      "edf"
      "footer";
  }

  .title .wordmark { width: 88%; max-height: none; }
  .subtitle { font-size: 3.25vw; }
  .intro { font-size: 2.4vw; line-height: 1.4; max-width: 94%; }

  /* right column flows as a centered block */
  .hero-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    gap: 4vw;                 /* banner -> concern grid */
  }
  .aoc-banner { width: 88%; }

  /* scene strip full-bleed; cover crops the PNG's dead green band off the top */
  .strip {
    justify-self: stretch;
    height: 18.6vw;
    margin: 0 calc(-1 * var(--hpad));
    overflow: hidden;
  }
  .strip img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }

  .aoc-list {
    display: grid;
    flex: initial;
    height: auto;
    width: 100%;
    grid-template-columns: 1fr 1fr;   /* 2 x 2 */
    gap: 5.5vw 4vw;
    max-width: 92%;
    --aoc-h: 9vw;
  }

  /* rows are grid items here, not equal-height flex rows */
  .aoc { flex: initial; max-height: none; align-items: center; }
  .aoc > a, .aoc picture { height: auto; }
  .aoc img { max-height: var(--aoc-h); width: auto; height: auto; max-width: 100%; }

  /* tablet/mobile reading order: Energy, Floods, Heat, Solutions */
  .aoc--energy    { order: 1; }
  .aoc--floods    { order: 2; }
  .aoc--heat      { order: 3; }
  .aoc--solutions { order: 4; }

  .btn img { height: 5vw; }
  .cta-row { justify-content: center; flex-direction: column; gap: 2vw; }

  .edf { font-size: 2vw; }
  .site-footer { margin: 0; padding: 2.8vw 0 4vw; }
  .site-footer p { font-size: 1.8vw; text-align: center; }
}

/* ============================================================
   MOBILE  (badge logo, stacked list, scroll chevron)
   ============================================================ */
@media (max-width: 600px) {
  /* Uniform scale of northcarolina_main page-mobile.jpg: badge shield logo,
     scroll chevron, stacked concern cards. Every dimension width-relative (vw)
     so proportions match the mockup at any phone width. Values calibrated from
     the mockup (element bands measured as % of its width). */
  .hero-inner {
    row-gap: 6vw;
    padding: 6vw 0 0;              /* no side padding: widths are true % of viewport */
    grid-template-areas:
      "title"
      "subtitle"
      "intro"
      "chevron"
      "strip"
      "cta"
      "aside"
      "edf"
      "footer";
  }

  .title .wordmark { display: none; }
  .title .badge    { display: block; width: 85%; margin: 0 auto; }

  .chevron { display: block; }
  .chevron svg { width: 9vw; height: auto; }

  .subtitle { font-size: 6vw; line-height: 1.15; }
  .intro    { font-size: 2.6vw; line-height: 1.5; max-width: 88%; }

  .strip { height: 20vw; margin: 0; }   /* full width already (no side padding) */
  .btn img { height: 8.2vw; }        /* -> take-action ~90% wide, contact ~44% */

  .hero-right { gap: 6.5vw; }        /* banner -> first card */
  .aoc-banner { width: 89%; }

  .aoc-list {
    grid-template-columns: 1fr;       /* stacked cards */
    max-width: 85%;
    gap: 7vw;
    justify-items: stretch;
  }
  /* Mobile concern assets are full cards (icon + 2-line title + button). */
  .aoc, .aoc > a, .aoc picture { display: block; width: 100%; }
  .aoc img { width: 100%; height: auto; max-width: 100%; max-height: none; }

  .edf { font-size: 3vw; }
  .site-footer p { font-size: 2.6vw; }
}

/* ============================================================
   DESKTOP — uniform scale of NorthCarolina_MainPage.jpg
   Every dimension is width-relative (vw), calibrated from the verified
   1920x1080 reference, so the whole composition scales as ONE piece: the
   aspect ratio and all proportions are identical at any width. It flows at
   its natural height and may leave background below 100vh — that's fine.
   ============================================================ */
@media (min-width: 1025px) {
  .hero-inner {
    row-gap: 1.16vw;   /* trimmed so the whole composition fits a 16:9 / 1080 frame */
    padding-top: 1.7vw;
  }
  .title .wordmark { width: 60.5vw; max-height: none; }
  .subtitle       { font-size: 1.75vw; }
  .intro          { font-size: 1.25vw; max-width: 55vw; }
  .btn img        { height: 2.475vw; }
  .cta-row        { gap: 1.15vw; }
  .edf            { font-size: 0.96vw; }
  .strip          { height: 17.55vw; }
  .hero-right     { gap: 1vw; }
  .aoc-list       { gap: 1.69vw; }
  .site-footer    { padding-top: 0.68vw; padding-bottom: 0.68vw; }
  .site-footer p  { font-size: 0.79vw; }
}