/* ==========================================================================
   About our Advocacy — page-scoped styles (Block 5 — Key Industry Issues)
   Figma node 11176:1226. Spec: roadmap/phase-08-content-pages/artifacts/page-about-our-advocacy-spec.md

   Reuses (no overrides here): .section-tagline (typography.css), .card / .card-grid--3
   (cards.css), .btn--primary/.btn--link/.btn--tangerine (buttons.css). Blocks 4/6/7
   live in about.css; block 8 reuses partnerships.css .colour-form-cta__* as-is.

   Desktop-first: mobile @media (max-width) blocks AFTER desktop rules.
   ========================================================================== */

.key-issues {
  padding: 112px 80px;                    /* Figma 11176:1226 padding 112 80 */
  background-color: var(--color-accent-light-blue); /* Figma 11176:1226 #CBDAE6 */
}

.key-issues__inner {
  max-width: 1280px;                      /* Figma 11176:1228 w1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 112px;                             /* Figma 11176:1226 section gap */
}

/* Intro row — content column left, CTA button right */
.key-issues__intro {
  display: flex;
  flex-direction: row;
  justify-content: space-between;         /* Figma 11176:1228 space-between */
  align-items: flex-start;                /* Figma 11176:1228 — button top-aligned with the "WHAT WE FIGHT FOR" tagline, not centred on the text column */
  gap: 32px;
}

.key-issues__intro-content {
  display: flex;
  flex-direction: column;
  gap: 22px;                              /* Figma 11176:1229 gap 22 */
  max-width: 820px;
}

.key-issues__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11176:1233 Heading/H2 Roman */
  font-size: 44px;                        /* sitewide Pastel H2 (Figma 11176:1233 also 44) */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-navy);               /* Figma 11176:1233 — both spans navy (NOT two-tone) */
}

.key-issues__heading-lead {
  color: var(--color-navy);               /* same navy — not a tangerine accent */
}

.key-issues__copy {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;                       /* Figma 11176:1235 Text/Large/Bold */
  font-size: 20px;                        /* Figma 11176:1235 */
  line-height: 1.3;
  color: var(--color-navy-darkest);       /* Figma 11176:1235 #03060C */
}

.key-issues__intro > .btn {
  flex: 0 0 auto;                         /* keep the CTA from shrinking */
}

/* 6 issue cards reuse .card + .card-grid--3 (cards.css). Page-scoped overrides
   (cards.css base is shared site-wide — left untouched):
   Figma 11194:5501 (Card "XSmall, Image, Link") puts the image INSIDE the 24px-padded
   content (inset, not edge-to-edge) with an 18px gap to the text, and the Link button
   has NO underline (base .card__image is flush + base .btn--link underlines). */
.key-issues__card .card__image {
  margin: 24px 24px 0;                    /* Figma I11194:5501;10303:38811 Content padding 24 — image inset top + sides */
}

.key-issues__card .card__content {
  padding-top: 18px;                      /* Figma I11194:5501;10303:38811 gap 18 — image → text (image carries no bottom margin) */
  gap: 18px;                              /* QA 2026-06-24 #7 — body text → "Read our policy primer" link (base .card__content gap is 8) */
}

.key-issues__card .btn--link {
  text-decoration: none;                  /* Figma 4179:8937 Link variant — no underline (base .btn--link underlines) */
  font-size: 14px;                        /* QA 2026-06-24 #10 / Figma I11194:5501 Text/Small/Bold 14px (base .btn is 16) */
}

/* Dark navy "Recent key advocacy topics" box */
/* Navy "Recent key advocacy topics" box (Figma 11194:6362): 764px, LEFT-aligned in
   the section. No corner cut — the Figma badge 11194:6404 is filled #0B1628 (same as
   the box), so it's invisible (we previously applied a real clip-path cut). */
.key-issues__dark-box {
  max-width: 764px;                       /* Figma 11194:6362 designedWidth 764 */
  margin: 0;                              /* Figma — left-aligned (was centred via margin:0 auto) */
  padding: 36px;                          /* Figma 11194:6362 padding 36 */
  background-color: var(--color-navy);    /* Figma 11194:6362 #0B1628 */
  border-radius: var(--radius-sm);        /* Figma 11194:6362 borderRadius 4 */
}

.key-issues__dark-box-content {
  display: flex;
  flex-direction: column;
}

.key-issues__dark-box-heading {
  margin: 0 0 16px;                       /* Figma 11194:6365 List gap 16 (heading → topic rows) */
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11194:6367 Heading/H3 Roman */
  font-size: 36px;                        /* Figma 11194:6367 */
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-white);              /* Figma 11194:6367 #FFFFFF */
}

.key-issues__topic-list {
  list-style: none;
  margin: 0 0 36px;                       /* Figma 11194:6364 Content Box gap 36 (rows → button) */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;                                 /* Figma 11194:6368 rows flush (each 38px with its own bottom border) */
}

.key-issues__list-row {
  padding: 8px 0;                         /* Figma EL-c6165c7f pad 8 0 → row height 38 */
  border-bottom: 1px solid var(--color-navy-lighter); /* Figma EL-c6165c7f border #CED0D4 */
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11194:6370 Text/Regular/Normal */
  font-size: 16px;                        /* Figma 11194:6370 */
  line-height: 1.4;                       /* Figma Text/Regular/Normal 1.4 → 38px row */
  color: var(--color-white);              /* Figma 11194:6370 #FFFFFF */
}

.key-issues__dark-box .btn--link.btn--tangerine {
  align-self: flex-start;
  text-decoration: none;                  /* Figma 10343:75217 Link variant — no underline (base .btn--link underlines) */
}

/* --------------------------------------------------------------------------
   Block 4 — Your voice (REPRESENTING YOU): image scaling + equal heights.
   Base .content-block--yourvoice lives in about.css; these are PAGE-SCOPED
   overrides (loads after about.css) so the change stays on this page only —
   About Us uses other .content-block--* modifiers and is unaffected.
   -------------------------------------------------------------------------- */
/* Text column + image share the row in the Figma 496:720 ratio (11162:6468 box 496 /
   11162:6467 row 1280 − 64 gap → image 720): flex-basis 0 + proportional grow → both
   shrink together as the viewport narrows, instead of a fixed text column that turns
   the image into a mini-copy. Top-align so the image keeps its own ratio (not stretched). */
.content-block--yourvoice .content-block__inner {
  align-items: stretch;                 /* QA 2026-06-24 #3 — image equal-height with the text column (was flex-start) */
}

.content-block--yourvoice .content-block__box {
  flex: 496 1 0;
  width: auto;
  min-width: 0;
}

/* QA 2026-06-24 #3 — "image changed in different sizes": the previous
   aspect-ratio:3/2 + max-height:373 decoupled the image height from the text
   column (1440: img 373 vs box 376, but 1100: img 346 vs box 469). Mirror the
   Pastel R4 sitewide treatment (about.css .content-block--history): align-self:
   stretch + base img object-fit:cover so the image ALWAYS equals the text-column
   height and scales uniformly. Figma 496/720 width ratio kept via flex grow. */
.content-block--yourvoice .content-block__image {
  flex: 720 1 0;
  align-self: stretch;                  /* QA 2026-06-24 #3 — equal-height with text column */
  min-width: 0;
  min-height: 0;                        /* override base min-height:400 so the height tracks the (<400) text column */
  position: relative;                   /* QA 2026-06-25 — anchor the absolute img below */
}

/* QA 2026-06-25 #3 — image must track the text-column CONTENT height, not the img's
   own intrinsic height (which exceeds it: 480 vs 376, pushing the row taller and
   leaving the button floating ~105px above the photo). An absolutely-positioned img
   has 0 intrinsic height → the stretch row sizes to the text content → the button
   (last element in the column) ends level with the image bottom, as in Figma
   11162:6465 (Content Box = hug, Image = stretch to it). */
.content-block--yourvoice .content-block__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;            /* Figma 11162:6477 cropTransform [_,0.7645,0.2365] — lower band (top ~23.65% cropped) */
}

/* --------------------------------------------------------------------------
   Block 6 — What We Do: image scales (no crop), keeps Figma frame ratio.
   Columns are already 50/50 (.what-we-do__content / __images flex:1). The image
   was align-self:stretch (= content height) + object-fit:cover, so it cropped harder
   as the column narrowed. Top-align + a fixed ratio (≈ content height at 1440) makes
   it scale uniformly. Page-scoped (these classes are advocacy-only). Figma 11162:6463. */
.what-we-do__inner {
  align-items: flex-start;
}

.what-we-do__images {
  aspect-ratio: 608 / 858;              /* image fills the content height at 1440 (608 col); ratio locked so it scales, not crops */
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Block 7 — Our Approach: 50/50 columns + image scales + NO corner cut.
   Mirror of Block 6 (Figma 11177:751): image-left / text-right, both columns 608 at
   1440. Base .content-block__box is a fixed 496px (mini-copy) and
   .content-block__image--left carries a clip-path corner cut — neither matches this
   block's Figma, so override page-scoped. Figma badge is absent here (no cut). */
.content-block--our-approach .content-block__inner--image-left {
  align-items: flex-start;
}

.content-block--our-approach .content-block__box {
  flex: 1 1 0;                          /* 50/50 with the image (was fixed 496 → mini-image) */
  width: auto;
  min-width: 0;
}

.content-block--our-approach .content-block__image--left {
  flex: 1 1 0;
  align-self: flex-start;
  aspect-ratio: 608 / 728;             /* Figma 11177:791 ~606×728 — fills the content height, locked ratio scales (no narrowing crop) */
  min-width: 0;
  border-radius: var(--radius-sm);     /* Figma 11177:791 borderRadius 4 */
  clip-path: none;                     /* Figma: no corner cut (badge absent — base .content-block__image--left adds one) */
}

/* ==========================================================================
   QA fixes — 2026-06-24 QA sheet (About our advocacy). Page-scoped overrides,
   each citing the QA item + Figma node. Desktop rules — mobile @media stays below.
   NB: card title/body sizes (#5/#9/#10) are the card component (cards.css), NOT
   the content-block list typography held at Pastel 18/16 per B3-Q7 — distinct.
   ========================================================================== */

/* Block 4 — REPRESENTING YOU (Your voice) */
/* QA #1 — "extra gap in text": copy was inheriting LH 1.5; Figma is 1.4. */
.content-block--yourvoice .content-block__copy p {
  line-height: 1.4;                     /* Figma 11162:6476 Text/Regular LH 1.4 (was 1.5) */
}
/* QA #2 — gap before "I've got an advocacy issue" button → 36px (box gap is 24).
   QA 2026-06-25 #3 — button is hug-width (Figma 11162:7659), not stretched to the
   full 496px text column (the box defaults to align-items:stretch). */
.content-block--yourvoice .content-block__box > .btn {
  margin-top: 12px;                     /* Figma 11162:6471 Content gap 36 = box gap 24 + 12 */
  align-self: flex-start;               /* QA 2026-06-25 #3 — hug width (was stretched to 496) */
}

/* Block 5 — WHAT WE FIGHT FOR (Key Industry Issues) */
/* QA #4 — intro text → cards gap 112 → 48. (Inner gap drives this; the cards →
   dark-box gap is restored to 112 below — QA 2026-06-25.) */
.key-issues__inner {
  gap: 48px;                            /* QA 2026-06-24 #4 — intro → cards was 112 */
}
/* QA 2026-06-25 — cards → dark-box gap must stay 112 (Figma), NOT 48. The 48 inner
   gap only applies to intro → cards; add 64 on the dark-box so cards → dark-box = 112. */
.key-issues__dark-box {
  margin-top: 64px;                     /* 48 (inner gap) + 64 = 112 cards → dark-box */
}
/* QA #8 — gap between cards 32 → 24. */
.key-issues__card-grid {
  gap: 24px;                            /* QA 2026-06-24 #8 / Figma 11176:1239 grid gap 24 (base .card-grid is 32) */
}
/* QA #5 — card title 18 → 20. */
.key-issues__card .card__title {
  font-size: 20px;                      /* QA 2026-06-24 #5 / Figma I11194:5501 Heading/H6 20px */
  line-height: 1.3;
}
/* QA #9 — card body 16 → 14. */
.key-issues__card .card__excerpt {
  font-size: 14px;                      /* QA 2026-06-24 #9 / Figma I11194:5501 Text/Small/Normal 14px */
  line-height: 1.4;
}
/* QA #6 — gap after card title (title → body) 16px. */
.key-issues__card .card__content-top {
  display: flex;
  flex-direction: column;
  gap: 16px;                            /* QA 2026-06-24 #6 / Figma I11194:5501 Content gap 16 */
}
/* QA #7 — unpin the card CTA so the link sits 18px after the text (Figma: link
   follows text, not bottom-pinned). Gap set on .card__content above. */
.key-issues__card .card__cta {
  margin-top: 0;                        /* base .card__cta is margin-top:auto (bottom-pinned) */
  padding-top: 0;                       /* base .card__cta adds 16px top padding */
}

/* Block 6 — What We Do */
/* QA #12 — gap after "What we do" title → 36px (content column gap is 24). */
.what-we-do__content .content-block__heading {
  margin-bottom: 12px;                  /* QA 2026-06-24 #12 — 24 (column gap) + 12 = 36 after the title */
}
/* QA #13 — list-row titles 18 → 20. PM 2026-06-25 approved reverting B3-Q7 to the
   Figma 20px, but PAGE-SCOPED to Advocacy only (other content-block pages keep the
   Pastel 18px). Figma 11162:6442 Heading/H6 20px. */
.what-we-do .content-block__list-label {
  font-size: 20px;                      /* QA 2026-06-24 #13 — was Pastel 18 (B3-Q7); advocacy-only revert */
}

/* Block 7 — Our Approach */
/* QA #14 — list-row titles 18 → 20 (same advocacy-only B3-Q7 revert). Figma 11177:764 H6 20px. */
.content-block--our-approach .content-block__list-label {
  font-size: 20px;                      /* QA 2026-06-24 #14 — was Pastel 18 (B3-Q7); advocacy-only revert */
}
/* QA #15 — intro paragraph 16 → 18 (advocacy-only B3-Q7 revert). Figma 11177:763 Lead Text/Medium/Normal 18px. */
.content-block--our-approach .content-block__copy p {
  font-size: 18px;                      /* QA 2026-06-24 #15 — was Pastel 16 (B3-Q7); advocacy-only revert */
}

/* Block 8 — Advocacy Enquiry form-CTA */
/* QA #16 — padding before the form section → 112px. Advocacy Figma 11177:2142 is
   padding 112 80; the reused partnerships base sets top to 64. */
.colour-form-cta--advocacy {
  padding-top: 112px;                   /* QA 2026-06-24 #16 / Figma 11177:2142 padding-top 112 (was 64) */
}

/* QA #17 — after AJAX submit GF replaces the form with a short confirmation, the card
   collapses and the absolute white logo watermark rides up over the (white) intro text.
   Hide the watermark once GF renders its confirmation so nothing overlaps the message. */
.colour-form-cta--advocacy .colour-form-cta__card:has(.gform_confirmation_message) .colour-form-cta__logo-watermark,
.colour-form-cta--advocacy .colour-form-cta__card:has(.gform_confirmation_wrapper) .colour-form-cta__logo-watermark,
.colour-form-cta--advocacy .colour-form-cta__card:has([id^="gform_confirmation"]) .colour-form-cta__logo-watermark {
  display: none;                        /* QA 2026-06-24 #17 — no watermark behind the confirmation */
}

/* ==========================================================================
   Mobile — @media (max-width) AFTER desktop (css-architecture.md).
   No Figma mobile frame for B3 — derived per roadmap/mobile-derivation-catalog.md.
   Card grid 3→2→1 col handled by cards.css .card-grid--3 breakpoints.
   ========================================================================== */

/* Block 8 form-CTA (Advocacy Enquiry) switches to the stacked/mobile layout at ≤1200
   (not the partnerships.css ≤1024 base) — client request. Replicate the partnerships
   stacking here, scoped to --advocacy: column card, full-width copy hugging the form,
   watermark hidden. Content basis auto (advocacy copy is short; the partnerships 270px
   basis would otherwise leave a gap before the form). */
@media (max-width: 1200px) {
  .colour-form-cta--advocacy .colour-form-cta__card {
    flex-direction: column;
    gap: 32px;
  }
  .colour-form-cta--advocacy .colour-form-cta__content {
    width: 100%;
    flex: 0 1 auto;
  }
  .colour-form-cta--advocacy .colour-form-cta__logo-watermark {
    display: none;
  }
}

/* Blocks 6 & 7 stack EARLY (≤1100) — the tall icon-list columns leave a big empty gap
   under the scaled photo in the narrow 2-col range, so collapse to one column there.
   Photo becomes a full-width frame. Above 1100 the balanced 50/50 desktop layout applies. */
@media (max-width: 1100px) {
  /* Block 6 — What We Do */
  .what-we-do__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .what-we-do__images {
    flex: none;
    width: 100%;
    aspect-ratio: 768 / 705;            /* source ratio — whole landscape photo, full width */
  }

  /* Block 7 — Our Approach (about.css only stacks .content-block__inner at ≤1024) */
  .content-block--our-approach .content-block__inner--image-left {
    flex-direction: column;
    align-items: stretch;
  }
  .content-block--our-approach .content-block__box {
    flex: none;
    width: 100%;
  }
  .content-block--our-approach .content-block__image--left {
    flex: none;
    width: 100%;
    align-self: stretch;
  }
}

/* Block 4 (Your voice) stacks to one column at ≤1210 (client request — stack earlier
   so the side-by-side photo's height shifts are less noticeable while narrowing). The
   about.css base only stacks .content-block__inner at ≤1024, so set flex-direction
   here to cover the 1025–1210 range too. In column mode reset the desktop ratio-grow
   + the absolute-img height-tracking: the photo becomes a full-width 3:2 frame
   (= source) — whole image, no crop. */
@media (max-width: 1210px) {
  .content-block--yourvoice .content-block__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .content-block--yourvoice .content-block__box {
    flex: none;
    width: 100%;
  }
  .content-block--yourvoice .content-block__image {
    flex: none;
    width: 100%;
    align-self: stretch;
    aspect-ratio: 3 / 2;
    max-height: none;                   /* lift the desktop 373px cap when stacked — show the whole 3:2 photo full-width */
  }
}

/* Key-issues intro (heading/copy + CTA button) stacks to a column at ≤1000 — the
   space-between row gets cramped below this width. */
@media (max-width: 1000px) {
  .key-issues__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .key-issues {
    padding: 64px 24px;                   /* derived — container cap */
  }

  .key-issues__inner {
    gap: 48px;                            /* derived — tighten the 112 section gap on mobile */
  }

  .key-issues__heading {
    font-size: 32px;                      /* sitewide H2 mobile */
  }

  .key-issues__dark-box {
    max-width: none;                      /* derived — fixed 764 exceeds viewport */
    padding: 24px;
    margin-top: 0;                        /* drop the desktop +64 — mobile keeps the tightened 48 cards → dark-box gap */
  }

  /* QA #16 desktop fix (padding-top:112) must not leak to mobile — restore the
     partnerships mobile derivation (top 48). */
  .colour-form-cta--advocacy {
    padding-top: 48px;                    /* matches partnerships.css ≤768 .colour-form-cta */
  }
}

@media (max-width: 402px) {
  .key-issues {
    padding: 48px 16px;                   /* derived */
  }

  .key-issues__dark-box {
    padding: 16px;
  }

  .colour-form-cta--advocacy {
    padding-top: 32px;                    /* matches partnerships.css ≤402 .colour-form-cta */
  }
}