/**
 * =====================================================================
 * PAGE HERO COMPONENT — STYLES
 * =====================================================================
 * Copied verbatim from the provided design system's ".page-hero"
 * rules — 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.
 *
 * 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: -140px; top: -140px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,16,46,0.08), transparent 70%);
}
.page-hero .container { position: relative; }
.page-hero h1 {
  /* Explicitly repeated here (not just relying on the generic
     "h1, h2, h3, h4 { font-family: var(--font-display); }" rule in
     global.css) because that generic rule is a bare-tag selector with
     very low specificity — low enough that Blocksy's own parent-theme
     heading styles can (and did, in testing) win the cascade over it,
     silently falling back to Blocksy's own default heading font
     instead of Fraunces. 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. This was very likely a latent, unreported
     bug here too (this component's font-family fix predates that
     discovery), matched with !important now for the same reason. */
  font-family: var(--font-display) !important;
  font-size: clamp(2.4rem, 1.4rem + 4.5vw, 4.4rem); font-weight: 300; letter-spacing: -0.02em;
}
.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. */