/* ─────────────────────────────────────────────────────────────────────
   EDITORIAL PAGE HERO — shared component
   Prefix: .vh-editorial-hero

   One hero for every editorial page: About (page-about.php) and the blog
   listings (home.php, archive.php). Extracted from page-about.css so the
   background, spacing and type scale live in a single place instead of
   being re-styled per template.

   Markup:
     <section class="vh-editorial-hero">
       <div class="vh-editorial-hero__content">
         <span class="vh-editorial-hero__eyebrow">…</span>   (optional)
         <h1   class="vh-editorial-hero__heading">…</h1>
         <p    class="vh-editorial-hero__subtitle">…</p>     (optional)
         <div  class="vh-editorial-hero__line"></div>
       </div>
     </section>

   The breadcrumb strip (.s-page-hero) stays a separate bar above it.
   ───────────────────────────────────────────────────────────────────── */

.vh-editorial-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #FAF9F7 0%, #F0EDE8 100%);
  padding: 72px 24px 56px;
}

/*
 * Decorative prism wash (tools/build_about_hero_bg.py). Deliberately a CSS
 * background and not an <img>: a full-bleed <img> here would become the LCP
 * candidate and push the H1 out of that slot. The file keeps its original
 * images/about/ path — it is shared artwork now, but moving it would mean
 * re-uploading over FTP for no visual gain.
 */
.vh-editorial-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/about/about-hero-bg-2400.webp") center / cover no-repeat;
  pointer-events: none;
}

.vh-editorial-hero__content {
  position: relative;
  text-align: center;
  max-width: 640px;
}

.vh-editorial-hero__eyebrow {
  display: block;
  font-family: 'Onest', 'Onest Fallback', 'Onest Fallback Android', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8A8A8A;
  margin-bottom: 14px;
}

.vh-editorial-hero__heading {
  font-family: 'Geologica', 'Geologica Fallback', 'Geologica Fallback Android', 'Georgia', serif;
  font-size: 48px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.15;
  margin: 0 0 14px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.vh-editorial-hero__subtitle {
  font-family: 'Onest', 'Onest Fallback', 'Onest Fallback Android', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: #4A4A4A;
  max-width: 560px;
  margin: 0 auto;
}

/* Archive descriptions arrive as wrapped HTML, so the subtitle also has to
   read right when it is a <div> holding paragraphs. */
.vh-editorial-hero__subtitle p {
  margin: 0;
}
.vh-editorial-hero__subtitle p + p {
  margin-top: 12px;
}

.vh-editorial-hero__line {
  width: 60px;
  height: 2px;
  background: #E5E2DD;
  margin: 22px auto 0;
}

@media (max-width: 767px) {
  .vh-editorial-hero {
    padding: 52px 20px 40px;
  }
  .vh-editorial-hero::before {
    background-image: url("../images/about/about-hero-bg-1400.webp");
  }
  .vh-editorial-hero__heading {
    font-size: 32px;
  }
  .vh-editorial-hero__subtitle {
    font-size: 15px;
  }
}