/* THE BOOK — media layer
   Subtle imagery / video accents wired to the canonical asset map. */

/* ---------- Home hero (background video + veil) ---------- */
.hero.hero-media { position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; }
.hero.hero-media .hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: .38;
  filter: saturate(.92) contrast(1.02);
  pointer-events: none;
}
.hero.hero-media .hero-veil {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 50% 60%, transparent 0%, var(--bg) 95%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent) 0%, var(--bg) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero.hero-media .hero-bg { display: none; }
  .hero.hero-media { background: url("MEDIA/Bible_on_desk_candlelight_202604292257.jpeg") center/cover no-repeat; }
  .hero.hero-media .hero-veil {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, var(--bg) 100%);
  }
}

/* ---------- Essay cover (header image) ---------- */
.essay-cover {
  height: clamp(160px, 30vw, 260px);
  margin: -8px -16px 24px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  position: relative;
  box-shadow: inset 0 -60px 60px -30px var(--bg);
}
.essay-cover::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--bg) 70%, transparent) 100%);
  pointer-events: none;
}

/* ---------- Library cover (small banner) ---------- */
.library-cover {
  height: clamp(120px, 22vw, 200px);
  margin: -8px -16px 20px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  opacity: .9;
  box-shadow: inset 0 -50px 50px -25px var(--bg);
}

/* ---------- Timeline page background ---------- */
.tl-wrap.tl-wrap-media { position: relative; isolation: isolate; }
.tl-wrap.tl-wrap-media::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: url("MEDIA/Ancient_parchment_scroll_oil-lamp_202604292257.jpeg") center/cover no-repeat;
  opacity: .08;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  pointer-events: none;
}

/* ---------- Bible category accent strips ---------- */
.cat .cat-head {
  position: relative;
  isolation: isolate;
}
.cat .cat-head::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 28px;
  z-index: -1;
  background-size: cover;
  background-position: center 40%;
  opacity: .22;
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  pointer-events: none;
}
.cat[data-key="torah"]   .cat-head::before { background-image: url("MEDIA/Single_scroll_with_seals_202604292257.jpeg"); }
.cat[data-key="history"] .cat-head::before { background-image: url("MEDIA/Twelve_river-stones_worn_sandal_…_202604292257.jpeg"); }
.cat[data-key="wisdom"]  .cat-head::before { background-image: url("MEDIA/Songbook_harp_dried_wildflowers_…_202604292257.jpeg"); }
.cat[data-key="major"]   .cat-head::before { background-image: url("MEDIA/Candlelight_still-life_with_scrolls_202604292257.jpeg"); }
.cat[data-key="minor"]   .cat-head::before { background-image: url("MEDIA/Parchment_scroll_with_ink_lines_202604292257.jpeg"); }
.cat[data-key="gospels"] .cat-head::before { background-image: url("MEDIA/Bible_on_desk_candlelight_202604292257_2.jpeg"); }
.cat[data-key="acts"]    .cat-head::before { background-image: url("MEDIA/Bread,_oil,_pen_still-life_202604292257.jpeg"); }
.cat[data-key="pauline"] .cat-head::before { background-image: url("MEDIA/Stack_of_letters_with_seal_202604292257.jpeg"); }
.cat[data-key="general"] .cat-head::before { background-image: url("MEDIA/Stack_of_letters_with_seal_202604292257_2.jpeg"); }
.cat[data-key="apoc"]    .cat-head::before { background-image: url("MEDIA/Ram's_horn,_scroll,_ash_202604292257.jpeg"); }
