/**
 * =====================================================================
 * PAGE HERO COMPONENT — STYLES
 * =====================================================================
 * Copied verbatim from the current static design system's ".page-hero"
 * rules (css/style.css) — class names were NOT renamed/prefixed here,
 * since they belong to an existing site-wide design system already
 * sharing these exact class names (.page-hero, .crumbs, .container,
 * .lede), rather than a new, isolated component.
 *
 * 2026 REDESIGN UPDATE: real subpage usage (About/Governance/
 * Membership/Activities/Partners) is the "page-hero--with-media"
 * two-column variant, with an actual photo alongside the intro text —
 * added below, along with the decorative ::before/::after marks the
 * real design uses (a dashed ring outline, not a solid gradient fill)
 * and this variant's own rule to suppress both of them.
 *
 * ONE INTENTIONAL CHANGE FROM THE ORIGINAL MARKUP:
 * The original HTML had `style="margin-top:20px"` written inline on
 * the <p class="lede"> tag. Per this project's rule to "keep the CSS
 * separate from the PHP," that inline style was removed from
 * template.php and turned into the ".page-hero .lede" rule below
 * instead — same visual result, but now it lives in exactly one place
 * (here) instead of being duplicated inline every time this component
 * renders.
 *
 * "section.page-hero" (NOT a bare selector): same fix confirmed live
 * on statistics' ".stat__num" — a bare single-class selector loses to
 * Blocksy's own base styling. (".crumbs" used to be documented here
 * too, but has since moved to global.css — see that file's comment.)
 * =====================================================================
 */

section.page-hero {
  padding-block: clamp(120px, 14vw, 180px) clamp(60px, 8vw, 90px);
  background: var(--ivory);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; right: -110px; top: -110px;
  width: 340px; height: 340px; border-radius: 50%;
  border: 2px dashed rgba(20, 23, 26, 0.12);
}
.page-hero::after {
  content: ""; position: absolute; right: 60px; top: 60px;
  width: 12px; height: 12px;
  border-top: 2px solid rgba(20, 23, 26, 0.2); border-right: 2px solid rgba(20, 23, 26, 0.2);
}
.page-hero .container { position: relative; }

/* A photo alongside the intro text — suppresses the plain version's
   decorative ring/tick so the two don't compete. */
.page-hero--with-media::before, .page-hero--with-media::after { display: none; }
.page-hero__inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: 50px; align-items: center; }
.page-hero__text { min-width: 0; }
.page-hero__media { aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--line); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero__media { order: -1; margin-bottom: 28px; aspect-ratio: 16/9; }
}

.page-hero h1 {
  /* Explicitly repeated here (not just relying on the generic
     ".entry-content h1, .entry-content h2 { font-family: var(--font-serif); }"
     rule in global.css) because a page_hero instance can render
     outside a Blocksy .entry-content wrapper (e.g. via a page
     template calling blocksy_child_render_component() directly), and
     because Blocksy's own parent-theme heading styles have, in
     testing, still won the cascade over a bare-tag selector.
     Declaring it again directly on the more specific ".page-hero h1"
     selector guarantees this component's intended font wins
     regardless of what the parent theme sets for plain "h1".
     !important ADDED: confirmed via a later, unrelated component
     (statistics' .stat__num) that Blocksy uses !important on its own
     font-family declaration specifically — a specificity-only fix
     isn't enough for this one property, even though it was for every
     other property tested. */
  --forced-font: var(--font-serif);
  font-family: var(--forced-font) !important;
  font-size: clamp(2.6rem, 1.5rem + 4.8vw, 4.8rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.005em;
}
.page-hero h1 em { font-style: italic; color: var(--red); font-weight: 400; }

/* Moved out of an inline style="" attribute — see file header note. */
.page-hero .lede { margin-top: 20px; }
/* .crumbs CSS moved to assets/css/global.css — it's now shared with
   article_component too. See global.css's own comment on that rule
   for why a rule shared across two component folders can't safely
   live in either component's own conditionally-loaded style.css. */