/* ============================================================
   Issues — the fights we are in right now
   Build doc: ISSUES-DESIGN-SPEC.md

   Structure: cinematic hero -> Forest-deep frame band -> three runs of four
   with alternating grounds -> two full-bleed photo breaks -> CTA band.
   Follows the /take-action/ and /public-lands-under-attack/ conventions so
   this page sits beside its siblings instead of looking like a text file.

   Prose is inset and CENTRED at 680px per the photography system (full-bleed
   image against inset text). The 8/13 build put a 624px measure flush left in
   an 1100px container, which left a 436px dead gutter down the whole page.
   ============================================================ */

.iss {
  background: var(--cream);
}

/* ---------- CINEMATIC HERO ----------
   Starts at document top with NO nav padding. nav.nav is fixed and transparent
   until main.js adds .scrolled, which is how every other hero page works.
   -------------------------------------------------------------------- */

.iss-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.iss-hero-bg {
  position: absolute;
  inset: 0;
}

.iss-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}

/* Bottom-weighted so the type sits on the dark half. No black bar. */
.iss-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 10, 8, .15) 0%,
    rgba(11, 10, 8, .22) 40%,
    rgba(11, 10, 8, .68) 72%,
    rgba(11, 10, 8, .95) 100%
  );
}

.iss-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--wide);
  width: 100%;
  margin: 0 auto;
  padding: 0 max(2rem, 5vw) 5rem;
}

.iss-kicker {
  font-family: var(--font);
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 .85rem;
}

.iss-hero-heading {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing:-.03em;
  color: #fff;
  max-width: 15ch;
  margin: 0 0 1.2rem;
  text-wrap: balance;
}

.iss-hero-sub {
  font-family: var(--font);
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .88);
  max-width: 46ch;
  margin: 0 0 1.6rem;
}

.iss-hero-byline {
  font-family: var(--font);
  font-size: var(--caption-size);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  margin: 0;
}

/* Sacred credit. Reads More Than Just Parks, never a person. */
.iss-hero-credit {
  position: absolute;
  z-index: 2;
  right: max(1.25rem, 3vw);
  bottom: 1rem;
  margin: 0;
  font-family: var(--font);
  font-size: .72rem;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .5);
}

/* ---------- FOREST-DEEP FRAME BAND ----------
   Brand ethos leads the page. Real color contrast on the first screen after
   the hero rather than cream on cream.
   -------------------------------------------------------------------- */

.iss-frame {
  background: #14271c;
  padding: clamp(3.5rem, 7vw, 5.5rem) 1.25rem;
}

.iss-frame-inner {
  max-width: 680px;
  margin: 0 auto;
}

.iss-frame-title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 1.1rem;letter-spacing:-.02em;font-weight:700;}

.iss-frame-inner p {
  font-family: var(--font);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.72;
  color: rgba(247, 244, 238, .84);
  margin: 0;
}

/* ---------- THE RUNS ----------
   Alternating grounds. LOCKED v3 bans same-treatment monotony, which is what
   twelve identical blocks on one cream ground was.
   -------------------------------------------------------------------- */

.iss-run {
  padding: clamp(3rem, 7vw, 5.5rem) 1.25rem;
}

.iss-run--paper { background: var(--cream); }
.iss-run--warm  { background: var(--warm); }

.iss-run-inner {
  max-width: 680px;
  margin: 0 auto;
}

.iss-item + .iss-item {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: clamp(2.5rem, 5vw, 3.75rem);
  border-top: 1px solid rgba(26, 24, 20, .1);
}

/* Forest-bright dot marker. Component #3, minus the number: Will's call is
   that these are unordered, and a number implies a ranking. */
.iss-item-title {
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.15;
  color: var(--text-1);
  margin: 0 0 clamp(.75rem, 1.5vw, 1rem);
  scroll-margin-top: calc(var(--nav-h) + 1rem);letter-spacing:-.02em;font-weight:700;}

/* The dot HANGS in the margin so the title sets flush with its paragraph.
   Indenting the title instead pushed every heading 1.5rem right of its own
   body text, which read as a misalignment rather than a marker. */
.iss-item-title::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--forest);
}

.iss-item p {
  font-family: var(--font);
  font-size: var(--body-size-serif);
  line-height: 1.7;
  color: var(--text-2);
  margin: 0;
}

.iss-more {
  margin-top: 1.15rem !important;
}

.iss-more a {
  font-family: var(--font);
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 107, 64, .35);
  padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.iss-more a:hover,
.iss-more a:focus-visible {
  color: var(--forest-hover);
  border-bottom-color: var(--forest-hover);
}

/* ---------- FULL-BLEED PHOTO BREAKS ---------- */

.iss-break {
  position: relative;
  width: 100%;
  height: 52vh;
  min-height: 300px;
  max-height: 620px;
  margin: 0;
  overflow: hidden;
}

.iss-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scrim. The credit is sacred and has to stay legible, and it was not against
   the sunlit redwood bark without this. */
.iss-break::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(11, 10, 8, 0), rgba(11, 10, 8, .55));
  pointer-events: none;
}

.iss-break figcaption {
  z-index: 2;
  position: absolute;
  right: max(1.25rem, 3vw);
  bottom: 1rem;
  margin: 0;
  font-family: var(--font);
  font-size: .72rem;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* ---------- CTA BAND ---------- */

/* Photo CTA, the /take-action/ ta-photo-cta convention. A flat Forest-deep band
   here was invisible against the Forest-deep footer directly below it, so the
   page ended in one undifferentiated dark mass. The photograph gives the close
   its own ground and keeps the seam. */
.iss-cta {
  position: relative;
  padding: clamp(4rem, 8vw, 6.5rem) 1.25rem
           calc(clamp(4rem, 8vw, 6.5rem) + env(safe-area-inset-bottom, 0px));
  text-align: center;
  overflow: hidden;
  background: #14271c;
}

.iss-cta-bg {
  position: absolute;
  inset: 0;
}

.iss-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.iss-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11, 10, 8, .72), rgba(20, 39, 28, .88));
}

.iss-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}

.iss-cta-credit {
  position: absolute;
  z-index: 2;
  right: max(1.25rem, 3vw);
  bottom: .85rem;
  margin: 0;
  font-family: var(--font);
  font-size: .72rem;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .42);
}

.iss-cta-title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 1rem;letter-spacing:-.02em;font-weight:700;}

.iss-cta-inner p {
  font-family: var(--font);
  font-size: var(--body-size-serif);
  line-height: 1.7;
  color: rgba(247, 244, 238, .8);
  margin: 0;
}

.iss-cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .85rem;
  margin: 1.85rem 0 1.5rem;
}

.iss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: .92rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.iss-btn--solid {
  background: var(--forest);
  color: #fff;
}

.iss-btn--solid:hover,
.iss-btn--solid:focus-visible {
  background: var(--forest-hover);
  color: #fff;
}

.iss-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .38);
}

.iss-btn--ghost:hover,
.iss-btn--ghost:focus-visible {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .7);
}

.iss-cta-note {
  font-family: var(--font) !important;
  font-size: .85rem !important;
  color: rgba(247, 244, 238, .58) !important;
}

.iss-cta-note a {
  color: rgba(247, 244, 238, .85);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.iss-cta-note a:hover {
  color: #fff;
}

/* ---------- MOBILE ---------- */

@media (max-width: 700px) {
  .iss-hero {
    min-height: 78vh;
  }

  .iss-hero-inner {
    padding-bottom: 3.5rem;
  }

  .iss-hero-heading {
    max-width: 100%;
  }

  .iss-break {
    height: 38vh;
  }

  /* The hanging dot would clip past the 1.25rem page padding at this width,
     so it comes back inline and the title indents to meet it. */
  .iss-item-title {
    padding-left: 1.4rem;
  }

  .iss-item-title::before {
    left: 0;
  }

  .iss-cta-btns .iss-btn {
    flex: 1 1 100%;
  }
}