/* ============================================================
   HERO — Canon Cinematic Image Block (Clean)
   ============================================================ */

/* ---------------------------------------
   HERO WRAPPER
   --------------------------------------- */
.hero {
  width: 100%;
  height: 70vh;            /* Cinematic height */
  max-height: 820px;
  min-height: 360px;

  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;

  /* Hero sits directly under the fixed nav in normal flow */
  margin-top: 0;

    -webkit-transform: translateZ(0); /* iOS: force layer render */
}

/* ---------------------------------------
   HERO IMAGE — Canon iOS-safe rendering
   --------------------------------------- */
.hero-image {
  position: absolute;            /* <-- REQUIRED for iOS */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  height: 100%;

  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;

  display: block;
  z-index: 0;

  -webkit-transform: translateZ(0); /* iOS: force layer */
}


/* ---------------------------------------
   MOBILE RESPONSIVE TUNING
   --------------------------------------- */
@media (max-width: 820px) {

  .hero {
    height: 58vh;
    min-height: 300px;
    margin-top: 0;
  }

  .hero-image,
  .hero img {
    object-position: center 45%;
  }
}

/* ---------------------------------------
   ULTRA-SMALL SCREENS (older iPhones)
   --------------------------------------- */
@media (max-width: 420px) {

  .hero {
    height: 54vh;
    min-height: 280px;
    margin-top: 0;
  }

  .hero-image,
  .hero img {
    object-position: center 48%;
  }
}

/* ============================================================
   🔐 iOS NO-SAVE PROTECTION — Invisible Shield Layer
   Prevents long-press “Save Image” WITHOUT affecting layout,
   scrolling, nav, search, or player.
   ============================================================ */

.hero-image {
  position: relative; /* anchor overlay */
}

.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  
  /* Invisible layer that blocks iOS image saving */
  background: rgba(255, 255, 255, 0.003);

  pointer-events: none;

  /* Guaranteed iOS compositing layer for reliability */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

/* ============================================================
   Prevent hero zooming on pages without media elements
   (Homepage, audio pages, misc pages)
   ============================================================ */

/* ============================================================
   FORCE correct hero scaling for all pages (homepage, audio, video)
   ============================================================ */

.hero {
  background-size: cover !important;
  background-position: center 40% !important;
  background-repeat: no-repeat !important;
}