/* ============================================================================
   Catalyst Fund — Page-specific styles
   --------------------------------------------------------------------------
   Loaded conditionally for page-templates/catalyst-fund.php via functions.php.
   Companions BPA's _business-plan-page.css (which provides .gr-bp-cover,
   .gr-bp-cite-share, .gr-bp-cite-card, .gr-bp-roadmap, .gr-body__topic-paper-
   accordion etc). Only NEW components live here.

   Naming: .gr-cf-* prefix. Reuses .gr-bp-* where rendering is identical.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Cover — extends .gr-bp-cover with CF-specific framing paragraph
   ---------------------------------------------------------------------------- */
.gr-cf-cover__framing {
  max-width: 60ch;
  margin: 1.25rem 0 1.5rem; /* left-aligned with title/subtitle (Skip 2026-05-15) */
  font-size: var(--lnp-fs-body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
}

/* ----------------------------------------------------------------------------
   Anchor Nav — uses .gr-bp-toc pattern (BPA hub TOC bar).
   Rules COPIED from _business-plan-preview.css §HORIZONTAL TABLE-OF-CONTENTS
   BAR (lines 337-401) because that file is only enqueued on the BPA preview
   template, not catalyst-fund.php. Rather than expand the preview-CSS enqueue
   condition (would load preview-only rules on Catalyst Fund too), the .gr-bp-
   toc rules are duplicated here. If BPA's TOC styles change, update both.

   Changed 2026-05-15 (Skip review v2): copy was missing — .gr-bp-toc HTML
   rendered but had no styles, so the <li>s fell back to default block stacking.
   ---------------------------------------------------------------------------- */
.gr-bp-toc {
  position: static;
  background: #ffffff;
  border-top: 1px solid rgba(30, 58, 101, 0.12);
  border-bottom: 1px solid rgba(30, 58, 101, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.gr-bp-toc__inner {
  max-width: var(--lnp-max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.gr-bp-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
}
.gr-bp-toc__item {
  flex: 1 1 0;
  min-width: 0;
}
.gr-bp-toc__item + .gr-bp-toc__item {
  border-left: 1px solid rgba(30, 58, 101, 0.12);
}
.gr-bp-toc__link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 88px;
  padding: 18px 16px;
  font-family: var(--lnp-font-display);
  font-weight: 700;
  font-size: clamp(11px, 0.9vw + 4px, 14px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lnp-color-bg-section-chrome-alt);
  text-decoration: none;
  line-height: 1.25;
  transition: background var(--transition), color var(--transition);
}
.gr-bp-toc__link:hover,
.gr-bp-toc__link:focus-visible {
  background: rgba(30, 58, 101, 0.06);
  color: var(--lnp-color-bg-section-chrome-alt);
}
@media (max-width: 768px) {
  .gr-bp-toc__list { display: grid; grid-template-columns: repeat(2, 1fr); }
  .gr-bp-toc__inner { padding: 0 8px; }
  .gr-bp-toc__item + .gr-bp-toc__item { border-left: 1px solid rgba(30, 58, 101, 0.12); }
  .gr-bp-toc__item:nth-child(odd) { border-left: none; }
  .gr-bp-toc__item { border-top: 1px solid rgba(30, 58, 101, 0.12); }
  .gr-bp-toc__item:nth-child(-n+2) { border-top: none; }
  .gr-bp-toc__link { min-height: 72px; padding: 12px 8px; font-size: 11px; }
}

/* ----------------------------------------------------------------------------
   Launch Video — Vimeo embed wrapper, 16:9 responsive
   ---------------------------------------------------------------------------- */
.gr-cf-video {
  padding: 4rem 1.5rem;
  background: #ECEFF4;
}
.gr-cf-video__inner {
  max-width: 960px;
  margin: 0 auto;
}
.gr-cf-video__heading {
  font-size: var(--lnp-fs-h2);
  line-height: 1.2;
  color: #1E3A65;
  margin: 0 0 1.5rem;
  text-align: center;
}
.gr-cf-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(30, 58, 101, 0.12);
}
.gr-cf-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.gr-cf-video__caption {
  margin: 1.25rem auto 0;
  max-width: 70ch;
  font-size: var(--lnp-fs-body);
  line-height: 1.55;
  color: #1F1F1F;
  text-align: center;
}

/* ----------------------------------------------------------------------------
   In the Press — coverage + press releases, directly below the Overview video.
   White band by default (contrasts the video's #ECEFF4). Links follow the LNP
   rule: gold-arrow / color hover, never an underline.
   ---------------------------------------------------------------------------- */
.gr-cf-press {
  padding: 4rem 1.5rem;
}
.gr-cf-press__inner {
  max-width: 960px;
  margin: 0 auto;
}
.gr-cf-press__heading {
  font-size: var(--lnp-fs-h2);
  line-height: 1.15;
  color: #1E3A65;
  margin: 0 0 1.5rem;
}
.gr-cf-press__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gr-cf-press__item {
  padding: 1.5rem 0;
  border-top: 1px solid #DCE1E8;
}
.gr-cf-press__item:first-child { border-top: 0; padding-top: 0; }
.gr-cf-press__item:last-child { padding-bottom: 0; }
.gr-cf-press__source {
  font-size: var(--lnp-fs-eyebrow);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6B6B6B;
  margin: 0 0 0.35rem;
}
.gr-cf-press__title {
  font-size: var(--lnp-fs-h3);
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.gr-cf-press__title a {
  color: #1E3A65;
  text-decoration: none;
}
.gr-cf-press__title a:hover,
.gr-cf-press__title a:focus-visible {
  color: var(--gold-dark);
}
.gr-cf-press__link {
  display: inline-block;
  font-size: var(--lnp-fs-button);
  font-weight: 600;
  color: #1E3A65;
  text-decoration: none;
}
.gr-cf-press__link:hover,
.gr-cf-press__link:focus-visible {
  color: var(--gold-dark);
}

/* ----------------------------------------------------------------------------
   Opportunity — 3-pillar callout grid
   ---------------------------------------------------------------------------- */
.gr-cf-opportunity {
  padding: 4rem 1.5rem;
}
.gr-cf-opportunity__inner {
  max-width: var(--lnp-max-width); /* BPA-matched 1290px content width */
  margin: 0 auto;
}
.gr-cf-opportunity__heading {
  font-size: var(--lnp-fs-h2);
  line-height: 1.15;
  color: #1E3A65;
  margin: 0 0 1rem;
}
.gr-cf-opportunity__intro {
  max-width: 70ch;
  margin: 0 0 2.5rem;
  font-size: var(--lnp-fs-body);
  line-height: 1.6;
  color: #1E3A65;
}
.gr-cf-opportunity__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.gr-cf-opportunity__card {
  background: #fff;
  border: 1px solid rgba(30, 58, 101, 0.08);
  border-radius: 8px;
  padding: 1.75rem;
  box-shadow: 0 2px 8px rgba(30, 58, 101, 0.04);
}
.gr-cf-opportunity__card-eyebrow {
  font-size: var(--lnp-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-dark);
  margin: 0 0 0.5rem;
}
.gr-cf-opportunity__card-title {
  font-size: var(--lnp-fs-h3);
  line-height: 1.3;
  color: #1E3A65;
  margin: 0 0 0.75rem;
}
.gr-cf-opportunity__card-body {
  font-size: var(--lnp-fs-body);
  line-height: 1.55;
  color: #1F1F1F;
}
.gr-cf-opportunity__card-body p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .gr-cf-opportunity__grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ----------------------------------------------------------------------------
   How the Fund Works — accordion
   Reuses .gr-body__topic-paper-accordion styles (caret rotation already exists
   in BPA CSS). Only new selectors here for namespacing.
   ---------------------------------------------------------------------------- */
.gr-cf-how-it-works {
  padding: 4rem 1.5rem;
  background: #ECEFF4;
}
.gr-cf-how-it-works__inner {
  max-width: 880px;
  margin: 0 auto;
}
.gr-cf-how-it-works__heading {
  font-size: var(--lnp-fs-h2);
  line-height: 1.15;
  color: #1E3A65;
  margin: 0 0 2rem;
}
.gr-cf-how-it-works__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.gr-cf-how-it-works__accordion {
  background: #fff;
  border: 1px solid rgba(30, 58, 101, 0.08);
  border-radius: 6px;
}
.gr-cf-how-it-works__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-size: var(--lnp-fs-h3);
  font-weight: 600;
  color: #1E3A65;
  list-style: none;
}
.gr-cf-how-it-works__summary::-webkit-details-marker { display: none; }
.gr-cf-how-it-works__summary::marker { display: none; }
.gr-cf-how-it-works__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: #1E3A65;
  transition: transform 0.2s ease;
}
.gr-cf-how-it-works__accordion[open] .gr-cf-how-it-works__caret {
  transform: rotate(180deg);
}
.gr-cf-how-it-works__body {
  padding: 0 1.5rem 1.5rem;
  font-size: var(--lnp-fs-body);
  line-height: 1.6;
  color: #1F1F1F;
}
.gr-cf-how-it-works__body p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------------------
   Portfolio — category bands + org cards
   ---------------------------------------------------------------------------- */
.gr-cf-portfolio {
  padding: 4rem 1.5rem;
}
.gr-cf-portfolio__inner {
  max-width: var(--lnp-max-width); /* BPA-matched 1290px content width */
  margin: 0 auto;
}
.gr-cf-portfolio__heading {
  font-size: var(--lnp-fs-h2);
  line-height: 1.15;
  color: #1E3A65;
  margin: 0 0 1rem;
}
.gr-cf-portfolio__intro {
  max-width: 70ch;
  margin: 0 0 3rem;
  font-size: var(--lnp-fs-body);
  line-height: 1.6;
  color: #1E3A65;
}
.gr-cf-portfolio__category-band {
  margin-bottom: 3rem;
}
.gr-cf-portfolio__category-band:last-child { margin-bottom: 0; }
.gr-cf-portfolio__category-header {
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--gold);
}
.gr-cf-portfolio__category-label {
  font-size: var(--lnp-fs-h3);
  line-height: 1.2;
  color: #1E3A65;
  margin: 0 0 0.35rem;
}
.gr-cf-portfolio__category-descriptor {
  font-size: var(--lnp-fs-body);
  line-height: 1.55;
  color: #1F1F1F;
  margin: 0;
}
.gr-cf-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.gr-cf-portfolio__card {
  background: #fff;
  border: 1px solid rgba(30, 58, 101, 0.08);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 2px 8px rgba(30, 58, 101, 0.04);
}
.gr-cf-portfolio__card-logo {
  /* 2026-06-03 (Marie): enlarge logos + give wide wordmarks horizontal room.
     Full card width, taller box, left-aligned to match the card text. The img
     keeps object-fit:contain so round icons and wide wordmarks neither stretch
     nor crop. Was 80x80 square/centered. */
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 0.75rem;
}
.gr-cf-portfolio__card-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.gr-cf-portfolio__card-logo--placeholder {
  width: 110px; /* keep a missing-logo placeholder square, not a full-width bar */
  background: #ECEFF4;
  border-radius: 4px;
}
.gr-cf-portfolio__card-name {
  font-size: var(--lnp-fs-h3);
  line-height: 1.25;
  color: #1E3A65;
  margin: 0;
}
.gr-cf-portfolio__card-meta {
  font-size: var(--lnp-fs-eyebrow);
  color: #6B6B6B;
  margin: 0;
}
.gr-cf-portfolio__card-leadership {
  font-size: var(--lnp-fs-eyebrow);
  color: #1E3A65;
  font-weight: 600;
  margin: 0.15rem 0 0;
}
.gr-cf-portfolio__card-theory {
  font-size: var(--lnp-fs-body);
  line-height: 1.5;
  color: #1F1F1F;
  margin: 0.25rem 0 0.5rem;
  flex: 1;
}
.gr-cf-portfolio__card-link {
  font-size: var(--lnp-fs-button);
  font-weight: 600;
  color: #1E3A65;
  text-decoration: none;
  margin-top: auto;
}
.gr-cf-portfolio__card-link:hover,
.gr-cf-portfolio__card-link:focus-visible {
  color: var(--gold-dark);
}

@media (max-width: 1024px) {
  .gr-cf-portfolio__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gr-cf-portfolio__grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   Roadmap — 2-column override on .gr-bp-roadmap--cf
   ---------------------------------------------------------------------------- */
.gr-cf-roadmap__two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}
.gr-cf-roadmap__col {
  background: #fff;
  border: 1px solid rgba(30, 58, 101, 0.08);
  border-radius: 8px;
  padding: 1.75rem;
  box-shadow: 0 2px 8px rgba(30, 58, 101, 0.04);
}
.gr-cf-roadmap__col-label {
  font-size: var(--lnp-fs-h3);
  line-height: 1.2;
  color: #1E3A65;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gold);
}
.gr-cf-roadmap__list {
  list-style: disc inside;
  padding: 0;
  margin: 0;
  font-size: var(--lnp-fs-body);
  line-height: 1.65;
  color: #1F1F1F;
}
.gr-cf-roadmap__list li { margin-bottom: 0.4rem; }

@media (max-width: 768px) {
  .gr-cf-roadmap__two-col { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* 2026-06-03 (Marie): kill the extra 80px top margin .gr-bp-roadmap carries
   (a full-bleed offset from the shared BPA CSS). On Catalyst Fund it leaves a
   big empty band above "Looking Ahead", made worse when the Opportunity /
   How-it-works sections above it are toggled off. Scoped to the --cf roadmap
   so BPA's roadmap spacing is unchanged. The section keeps its own 80px top
   padding, so it stays visually separated — just without the doubled gap. */
.gr-cf-main .gr-bp-roadmap--cf {
  margin-top: 0;
}

/* ----------------------------------------------------------------------------
   Get Involved — 3-card override on .gr-bp-cite-grid
   ---------------------------------------------------------------------------- */
.gr-bp-cite-grid--3up {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .gr-bp-cite-grid--3up { grid-template-columns: 1fr; }
}

/* Fix anchor buttons in Get Involved cards rendering with theme default link
   color instead of .gr-btn-sm's white. BPA cite-share uses <button> elements
   exclusively so didn't need this; Catalyst Fund cards 2+3 use <a> for
   mailto: and anchor links. Skip 2026-05-15: "make sure blue backgrounds
   have white copies." */
.gr-cf-get-involved a.gr-btn-sm,
.gr-cf-get-involved a.gr-btn-sm:link,
.gr-cf-get-involved a.gr-btn-sm:visited,
.gr-cf-get-involved a.gr-btn-sm:hover,
.gr-cf-get-involved a.gr-btn-sm:focus {
  color: #ffffff;
}

/* 2026-06-03 (Marie): more breathing room between the Get Involved cards and
   the navy newsletter band that follows. The newsletter signup card overlaps
   the band's top edge by design (keep that) — this just separates the band
   from the Get Involved cards above it. Was ~48px. */
.gr-cf-get-involved {
  padding-bottom: 96px;
}

/* ----------------------------------------------------------------------------
   Cover — brand type-scale sweep (2026-07-15, Marie)
   --------------------------------------------------------------------------
   The cover borrows .gr-bp-cover from _business-plan-page.css, whose title /
   subtitle / buttons / height predate the brand restyle and never picked up
   the site type scale: Plus Jakarta Sans (not the brand font), UPPERCASE, a
   clamp(32–72px) title, an italic subtitle, 5px-tracked gold buttons, and a
   560–900px-tall hero. That's the "business plan format" showing through.

   This block re-typesets the cover to the site tokens (brand-restyle.css
   .lnp-site: --lnp-fs-*, --lnp-brand-font) — sentence case, brand font, the
   display tier that auto-compresses on mobile, and a calmer hero height.
   Everything is scoped to .gr-cf-cover so the Business Plan page's own
   .gr-bp-cover is UNCHANGED. Scoped selectors also out-specify the shared
   .gr-bp-cover__* rules; _catalyst-fund.css also loads after the BPA file.
   ---------------------------------------------------------------------------- */

/* Hero height — was clamp(560px, 75vh, 900px). Calmer, content-first; still a
   proper navy/Liberty hero, just not monumental. min-height (not height) means
   taller stacked content on mobile expands the band rather than clipping. */
.gr-cf-cover {
  min-height: clamp(420px, 56vh, 620px);
}

/* Title — brand font, display tier (52 → 32 mobile via the token), sentence
   case. Out-specifies `.lnp-site .gr-bp-cover__title` (0,2,0) at 0,3,0. */
.lnp-site .gr-cf-cover .gr-bp-cover__title {
  font-family: var(--lnp-brand-font);
  font-size: var(--lnp-fs-display);
  line-height: var(--lnp-lh-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-transform: none;
  max-width: 22ch;
}

/* Subtitle — brand font, H3 tier (20 → 18 mobile), roman (was italic). */
.gr-cf-cover .gr-bp-cover__subtitle {
  font-family: var(--lnp-brand-font);
  font-style: normal;
  font-size: var(--lnp-fs-h3);
  line-height: 1.4;
  max-width: 46ch;
}

/* Framing paragraph already uses --lnp-fs-body; just align its family. */
.gr-cf-cover .gr-cf-cover__framing {
  font-family: var(--lnp-brand-font);
}

/* Buttons — tie to the type token band. The BPA cover uses 17–22px, 5px-tracked
   uppercase gold buttons; bring the cover's copies to the button token (14) and
   restrained tracking. Uppercase + gold is kept (matches the site's CTA style);
   only the oversizing/tracking that broke the scale is corrected. */
.gr-cf-cover .gr-btn-gold {
  font-size: var(--lnp-fs-button);
  letter-spacing: 0.08em;
}
.gr-cf-cover .gr-btn-gold--lg {
  padding: 16px 32px;
  font-size: var(--lnp-fs-button);
  letter-spacing: 0.08em;
}