/* =========================================================
   Books & Cloud — Page hero modifier (v13)
   ---------------------------------------------------------
   Upgrades a plain ".page-intro" into a full-bleed hero with
   a background image, dark overlay, and light text. Used on
   the Authors and Announcements (News) pages.

   To opt a page in, add the "page-intro--hero" class to its
   <section class="page-intro"> AND set --hero-bg inline:

       <section class="page-intro page-intro--hero"
                style="--hero-bg: url('/assets/images/hero/x.jpg');">
         ...
       </section>

   Pages that don't add the modifier class continue to look
   exactly as they did before — no breakage.
   ========================================================= */

.page-intro--hero {
  position: relative;
  overflow: hidden;
  /* Override the base .page-intro padding for a more cinematic feel */
  padding: 120px 0 130px;
  margin-bottom: 60px;
  /* Remove the hairline border the base class draws — the dark overlay
     handles the visual transition into the page below. */
  border-bottom: none;
  color: #fdf8ed;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Dark overlay for legibility — same recipe as the Reading Room hero
   so the three hero pages feel like a family. */
.page-intro--hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 16, 12, 0.55) 0%,
    rgba(20, 16, 12, 0.50) 45%,
    rgba(20, 16, 12, 0.78) 100%
  );
  pointer-events: none;
}

html[data-theme="candlelit"] .page-intro--hero::before {
  background: linear-gradient(
    180deg,
    rgba(10, 8, 6, 0.72) 0%,
    rgba(10, 8, 6, 0.68) 45%,
    rgba(10, 8, 6, 0.88) 100%
  );
}

/* The container sits above the overlay */
.page-intro--hero .container {
  position: relative;
  z-index: 1;
}

/* Lift the subtitle pill onto the dark background */
.page-intro--hero .subtitle {
  color: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.32);
  /* If subtitles are rendered without a pill border by default, this
     also makes them visually pop on the dark backdrop. */
}

/* The H1 itself — slightly larger and warmer ivory than ink-black */
.page-intro--hero h1 {
  color: #fdf8ed;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* If there's a lead paragraph, soften it */
.page-intro--hero p {
  color: rgba(255, 255, 255, 0.86);
}

/* Mobile: less padding so the hero doesn't dominate the small screen */
@media (max-width: 720px) {
  .page-intro--hero {
    padding: 80px 0 90px;
  }
}