/* ============================================================
   EU funding page. No mockup exists in the handoff - built from
   the sitewide design tokens and the patterns of the other pages
   (page-hero + dark band + card grid, as on /careers and /about).
   ============================================================ */

/* ---------- Hero ---------- */
/* The headline here is a full article title, not the one-line statement the
   other pages carry, so it steps down a size and wraps on a wider measure.
   Same specificity as ".page-hero h1" in common.css - this file loads second,
   which is also why every breakpoint below has to restate the size. */
.eu-hero h1{max-width:980px;font-size:44px;overflow-wrap:break-word}
.eu-hero h1 span{color:var(--orange)}
.eu-hero>p{max-width:760px}

/* ---------- Funding facts band ---------- */
/* The structured summary of the grant decision. Same dark-indigo band as
   .apply on /careers, so the two pages read as one system. */
.eu-facts{margin:36px max(56px,calc((100% - var(--content-w))/2));background:var(--indigo-dark);color:#fff;border-radius:var(--r-band);padding:40px 52px;animation:sm-rise .85s ease .46s both}
.eu-facts-logos{display:flex;flex-wrap:wrap;gap:12px}
/* White chip behind each logo: both files carry the EU blue and would lose
   contrast straight on the indigo. */
.eu-facts-chip{display:inline-flex;background:#fff;border-radius:12px;padding:10px 14px}
.eu-facts-chip img{display:block;height:38px;width:auto}
.eu-facts h2{margin:26px 0 0;max-width:820px;font:700 22px/1.4 var(--font);letter-spacing:-.01em}

.eu-facts-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px;margin:24px 0 0}
.eu-fact{padding:16px 0;border-top:1px solid rgba(255,255,255,.14)}
.eu-fact dt{font:600 11px var(--font);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.eu-fact dd{margin:8px 0 0;font:500 15px/1.55 var(--font);color:rgba(255,255,255,.88)}
/* Full-width rows for the two long official names */
.eu-fact-wide{grid-column:1/-1}
/* The grant amount is the one number a visitor scans for */
.eu-fact-strong dd{font:700 24px var(--font);color:#fff}

/* ---------- Article body ---------- */
.eu-article{padding:52px max(56px,calc((100% - var(--content-w))/2)) 0}
.eu-article p{max-width:820px;font:400 15.5px/1.78 var(--font);color:var(--ink-2)}
.eu-article p+p{margin-top:20px}
.eu-article .hl{color:var(--ink);font-weight:600}

/* The funding sentence is bold in the client's original document; the callout
   preserves that emphasis without a wall of bold body text. Selector is
   doubled up so it outranks ".eu-article p". */
.eu-article p.eu-callout{margin-top:28px;background:var(--indigo-tint);border-left:4px solid var(--orange);border-radius:0 var(--r-card) var(--r-card) 0;padding:24px 28px;font:600 15.5px/1.7 var(--font);color:var(--ink)}

/* ---------- Mandatory publicity disclaimer ---------- */
/* Set apart from the article so it does not read as part of the story. The
   bottom margin keeps it clear of the dark CTA band footer.php renders below. */
.eu-disclaimer{margin:48px max(56px,calc((100% - var(--content-w))/2)) 64px;padding-top:24px;border-top:1px solid var(--border)}
/* Weighted up and near-black at the client's request: this is the mandatory
   publicity notice, not incidental fine print. */
.eu-disclaimer p{max-width:900px;font:600 12.5px/1.72 var(--font);color:#111}

/* ---------- Responsive ---------- */
@media (max-width:1240px){
  .eu-hero h1{font-size:39px}
  .eu-facts{margin:32px 32px;padding:36px 40px}
  .eu-article{padding:44px 32px 0}
  .eu-disclaimer{margin:40px 32px 56px}
}
@media (max-width:900px){
  /* Two columns of facts start hyphenating the long official names */
  .eu-facts-list{grid-template-columns:1fr;column-gap:0}
}
@media (max-width:760px){
  .eu-hero h1{font-size:30px}
  .eu-facts{margin:28px 20px;padding:28px 24px;border-radius:24px}
  .eu-facts-chip{padding:8px 12px}
  .eu-facts-chip img{height:30px}
  .eu-facts h2{font-size:19px}
  .eu-fact-strong dd{font-size:21px}
  .eu-article{padding:32px 20px 0}
  .eu-article p{font-size:15px;line-height:1.72}
  .eu-article p.eu-callout{padding:20px 22px;font-size:15px}
  .eu-disclaimer{margin:32px 20px 44px;padding-top:20px}
}
@media (max-width:430px){
  .eu-hero h1{font-size:25px}
  .eu-facts h2{font-size:18px}
}