/* ============================================
   Shared media-detail styling — cinematic hero
   Mirrors tutorials/_tutorial_detail.css but
   scoped to media item pages.
   See ~/.claude/.../memory/project_tutorial_hero_template.md
   for the locked design spec.
   ============================================ */

/* ── Media cinematic hero ────────────────────────────────────────────────────
   The cover image sits flush against the navbar's bottom edge (no bleed, no gap).
   Elements scattered across the canvas like a film poster:
     bottom-left → title, then publisher · date one line below
     bottom-right → source caption (italic, right-aligned, gold)
   Two gradient layers:
     ::before  radial vignette — clear ellipse over focal point
     ::after   bottom dissolve — ends at oklch(5% 0.005 230) body bg
   ─────────────────────────────────────────────────────────────────────────── */
.media-hero {
  position: relative;
  /* positionHero() in JS sets width, margin-left, height at runtime.
     These are no-JS fallbacks only. */
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 10;
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  animation: mediaHeroIn 1.4s ease forwards;
}

@keyframes mediaHeroIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.media-hero-img { display: none; }

/* Layer 1 — radial vignette */
.media-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 35%,
    transparent            25%,
    rgba(15, 20, 25, 0.22) 70%,
    rgba(15, 20, 25, 0.38) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Layer 2 — bottom dissolve into actual body bg */
.media-hero::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70%;
  background: linear-gradient(
    to bottom,
    transparent                  0%,
    rgba(10, 13, 16, 0.18)      20%,
    rgba(10, 13, 16, 0.55)      50%,
    rgba(10, 13, 16, 0.88)      78%,
    oklch(5% 0.005 230)        100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Positioning layer */
.media-hero-content {
  position: absolute;
  inset: 0;
  background: none;
  z-index: 3;
}

/* Every child: fade + drift up on entrance */
.media-hero-content > * {
  position: absolute;
  opacity: 0;
  transform: translateY(14px);
  animation: heroChildIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Title — bottom-left ── */
.media-hero-title {
  bottom: 5.2rem;
  left: 2.8rem;
  right: 36%;
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2.6rem);
  color: rgba(255, 255, 255, 0.90);
  letter-spacing: 0.015em;
  line-height: 1.22;
  margin: 0;
  animation-delay: 0.38s;
}

/* ── Authors · Date — one line below the title ── */
.media-hero-content .pub-meta { display: none; }
.media-hero-content .pub-authors {
  bottom: 3.8rem;
  left: 2.8rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.30);
  letter-spacing: 0.04em;
  animation-delay: 0.55s;
}
.media-hero-content .pub-authors strong {
  color: rgba(100, 181, 246, 0.55);
  font-weight: 400;
}

/* ── Source caption — bottom-right, right-aligned (replaces tutorial-allegory) ── */
.media-source {
  bottom: 4.0rem;
  right: 2.8rem;
  max-width: 30%;
  text-align: right;
  margin: 0;
  padding: 0;
  border: none;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.72rem;
  font-style: italic;
  color: rgba(235, 220, 195, 0.30);
  line-height: 1.75;
  letter-spacing: 0.01em;
  animation-delay: 0.70s;
}

.media-source .publisher {
  display: block;
  font-style: normal;
  font-weight: 500;
  color: rgba(212, 178, 120, 0.75);
  margin-bottom: 0.25rem;
  font-size: 0.63rem;
  letter-spacing: 0.05em;
}

.media-source .location {
  display: block;
  font-style: normal;
  font-size: 0.59rem;
  color: rgba(185, 160, 110, 0.52);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

/* Photo credit — minimal source attribution at the bottom of the slot */
.media-source .photo-credit {
  display: block;
  margin-top: 0.6rem;
  font-style: normal;
  font-size: 0.55rem;
  color: rgba(185, 160, 110, 0.40);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .media-hero-title {
    bottom: 5.2rem;
    left: 1.2rem;
    right: 1.2rem;
    font-size: clamp(1.3rem, 5.5vw, 1.8rem);
    line-height: 1.18;
  }

  .media-hero-content .pub-authors {
    bottom: 3.8rem;
    left: 1.2rem;
  }

  .media-source { display: none; }
}

/* Hide stray pub-divider that may follow the hero */
.media-hero + .pub-divider { display: none; }

/* Reuse the navbar scroll-progress line on media pages too */
.nav-progress {
  display: block !important;
}