/* grant-detail.css: styles for the static /grants/<slug>/ programme pages.
 *
 * Loaded alongside explore.css, which provides the design tokens (:root --paper
 * / --ink / --accent ...), .wrap, .btn, and .tlink. This file adds only the
 * page chrome (nav) and the article layout, so the page is self-contained and
 * does NOT pull in editorial-page.css (the homepage hero machinery). No emojis. */

/* --- Top nav (twin of the site masthead, minimal) ------------------------- */
.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--paper-3); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -0.02em; }
.brand .mk { width: 13px; height: 13px; border-radius: 3px; background: var(--accent); display: inline-block; }
.brand .w { font-size: 15px; color: var(--ink); }
.nav-r { display: inline-flex; align-items: center; gap: 18px; }

/* --- Article shell -------------------------------------------------------- */
.gd-main { display: block; }
.gd-article { max-width: 760px; padding-top: 40px; padding-bottom: 96px; }

/* Centered header, readable body. The header block (breadcrumb, eyebrow, H1,
   agency line, the fact bar, and the CTAs) is centered to match the now-centered
   browse pages, using the same idiom as hub.css: text-align: center on each
   header element plus margin: 0 auto on the capped-width blocks. The long-form
   "About this funding opportunity" prose below stays in this centered,
   width-capped column but LEFT-aligned internally for readability -- the .gd-sec
   rules never inherit centering because it is set per-element here, not on the
   article, so nothing leaks down into the paragraphs. */
.gd-crumb { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 26px; text-align: center; }
.gd-crumb a { color: var(--ink-3); border-bottom: 1px solid transparent; }
.gd-crumb a:hover { color: var(--accent); border-color: var(--accent); }
.gd-crumb span[aria-hidden] { margin: 0 7px; color: var(--ink-4); }

.gd-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; text-align: center; }
.gd-title { font-family: var(--sans); font-weight: 650; letter-spacing: -0.03em; line-height: 1.08; font-size: clamp(30px, 4.6vw, 46px); color: var(--ink); margin: 0 auto 10px; text-wrap: balance; text-align: center; max-width: 20ch; }
.gd-agency { font-size: 15px; color: var(--ink-2); margin: 0 0 30px; text-align: center; }

/* Fact strip -- one rounded white B1 card of four facts, hairline dividers.
   Centered under the centered header (margin auto); the fact interiors reset to
   text-align: left so the label/value stacks read normally. */
.gd-facts { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--gf-white); border-radius: var(--gf-r-card); box-shadow: var(--gf-sh-card); overflow: hidden; margin: 0 auto 38px; text-align: left; }
.gd-facts > div { padding: 15px 18px; border-top: 1px solid var(--gf-hair); border-left: 1px solid var(--gf-hair); }
.gd-facts > div:nth-child(-n + 2) { border-top: 0; }
.gd-facts > div:nth-child(odd) { border-left: 0; }
.gd-facts dt { font-family: var(--gf-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gf-ink-3); margin: 0 0 5px; }
.gd-facts dd { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--gf-ink); font-variant-numeric: tabular-nums; }
@media (min-width: 720px) {
  .gd-facts { grid-template-columns: repeat(4, 1fr); }
  /* On the 4-up row, top border only on none, left border only off the first. */
  .gd-facts > div { border-top: 0; }
  .gd-facts > div:nth-child(odd) { border-left: 1px solid var(--gf-hair); }
  .gd-facts > div:first-child { border-left: 0; }
}

/* Sections */
.gd-sec { margin: 0 0 34px; }
.gd-sec h2 { font-family: var(--sans); font-weight: 650; font-size: 21px; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--paper-3); }
.gd-sec p { font-size: 15.5px; line-height: 1.68; color: var(--ink-2); margin: 0 0 12px; }
.gd-sec p:last-child { margin-bottom: 0; }
.gd-mono { font-family: var(--mono); font-size: 13px; line-height: 1.65; white-space: pre-wrap; color: var(--ink-2); }
.gd-domains { font-size: 14px; color: var(--ink-3); }

.gd-benes { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gd-benes li { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: 100px; padding: 5px 12px; }

/* CTA + footer */
.gd-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin: 44px 0 0; }
.gd-disclaimer { font-size: 12.5px; line-height: 1.6; color: var(--ink-4); margin: 28px auto 0; max-width: 60ch; }

/* .tlink hover. On grant pages .tlink resolves to gf-bridge.css (color + weight
   only, NO hover), so the secondary text links ("Browse all US R&D funding" in
   the top CTA, "How pricing works" in the fit callout) read as dead. Scoped to
   the grant-page containers so this never leaks to other pages: on hover the
   green deepens and an underline appears. Base gets a transition so it eases. */
.gd-cta .tlink,
.gd-fit .tlink { transition: color .15s; }
.gd-cta .tlink:hover,
.gd-fit .tlink:hover { color: var(--gf-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Post-root blocks (outside #root, so the React remount never touches them):
   the matcher CTA callout and the leaf-to-hub link list. */
.gd-after { margin: -40px auto 72px; max-width: 760px; }
/* Matcher CTA -- B1 frosted glass slab, dark-green ink, green CTA button.
   Mirrors .gf-slab-sage material (translucent white + blur + sage ring). */
.gd-fit { position: relative; border-radius: var(--gf-r-slab); overflow: hidden; padding: 26px 28px; margin: 10px 0 34px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.32));
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: 0 0 0 1px rgba(10, 92, 66, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 24px 60px rgba(10, 92, 66, 0.16); }
.gd-fit h2 { font-family: var(--gf-sans); font-weight: 620; font-size: 19px; letter-spacing: -0.01em; color: var(--gf-ink); margin: 0 0 10px; }
.gd-fit p { font-size: 15px; line-height: 1.65; color: var(--gf-ink-2); margin: 0 0 0; max-width: 62ch; }
.gd-fit-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px !important; }
.gd-more h2 { font-family: var(--gf-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gf-ink-3); font-weight: 500; margin: 0 0 12px; }
.gd-more ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.gd-more a { font-size: 14.5px; color: var(--gf-ink-2); text-decoration: none; border-bottom: 1px solid var(--gf-hair); padding-bottom: 1px; }
.gd-more a:hover { color: var(--gf-ink); border-bottom-color: var(--gf-ink-3); }