/* V116 — reliable automatic poster artwork, balanced release hero and clean discussion header. */

/* The artwork is rendered as two lightweight CSS layers: a soft full-bleed poster
   and an aspect-ratio-safe foreground copy. No separate banner upload is required. */
.home-showcase-backdrop,
.release-cinematic-backdrop {
  z-index: 0 !important;
}

.home-showcase-artwork,
.release-cinematic-artwork {
  position: absolute !important;
  z-index: 0 !important;
  display: block;
  pointer-events: none;
  background-repeat: no-repeat;
}

.home-showcase-slide.is-poster-fallback .home-showcase-backdrop {
  opacity: .48 !important;
  background-position: center 20% !important;
  background-size: cover !important;
  filter: blur(14px) saturate(.94) contrast(1.07) !important;
  transform: scale(1.1) !important;
}
.home-showcase-slide.is-poster-fallback.is-active .home-showcase-backdrop {
  transform: scale(1.1) !important;
}
.home-showcase-artwork {
  inset: -7% -1% -7% 42%;
  opacity: 0;
  background-position: right center;
  background-size: auto 116%;
  filter: saturate(1.06) contrast(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.34) 18%, #000 46%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.34) 18%, #000 46%, #000 100%);
}
.home-showcase-slide.is-poster-fallback .home-showcase-artwork { opacity: .7; }
.home-showcase-slide::before {
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(3, 8, 16, .99) 0%, rgba(3, 9, 18, .93) 35%, rgba(3, 9, 18, .49) 66%, rgba(3, 8, 16, .2) 100%),
    linear-gradient(0deg, rgba(3, 8, 16, .92) 0%, transparent 60%) !important;
}
.home-showcase-content { z-index: 2 !important; }
.home-showcase-rail { z-index: 4 !important; }

/* Release hero: the poster and information now sit in the visual centre instead
   of being pushed to the bottom with a large unexplained empty area above. */
.release-page .release-cinematic-hero {
  min-height: 520px !important;
  grid-template-columns: clamp(210px, 21vw, 250px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(28px, 3vw, 40px) !important;
  padding: 58px 40px !important;
}
.release-page .release-cinematic-hero .release-hero-poster {
  width: clamp(210px, 21vw, 250px) !important;
  max-width: 250px !important;
  align-self: center !important;
}
.release-page .release-cinematic-hero .release-hero-info {
  align-self: center !important;
}
.release-cinematic-hero .release-cinematic-backdrop,
.release-cinematic-hero.is-poster-fallback .release-cinematic-backdrop {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.release-cinematic-hero.is-poster-fallback .release-cinematic-backdrop {
  opacity: .5 !important;
  background-position: center 20% !important;
  background-size: cover !important;
  filter: blur(14px) saturate(.94) contrast(1.06) !important;
  transform: scale(1.1) !important;
}
.release-cinematic-artwork {
  inset: -7% -1% -7% 43%;
  opacity: 0;
  background-position: right center;
  background-size: auto 116%;
  filter: saturate(1.06) contrast(1.05);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 18%, #000 45%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 18%, #000 45%, #000 100%);
}
.release-cinematic-hero.is-poster-fallback .release-cinematic-artwork { opacity: .56; }
.release-page .release-cinematic-hero::before,
.release-page .release-cinematic-hero.is-poster-fallback::before {
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(3, 9, 17, .98) 0%, rgba(5, 12, 22, .9) 42%, rgba(5, 12, 22, .44) 75%, rgba(3, 9, 17, .25) 100%),
    linear-gradient(0deg, rgba(3, 9, 17, .95) 0%, transparent 66%) !important;
}

/* The discussion heading needs breathing room, not a decorative divider. */
.release-community-title-v87 {
  margin-bottom: 18px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}
.release-community-title-v87::before,
.release-community-title-v87::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .release-page .release-cinematic-hero {
    min-height: 480px !important;
    grid-template-columns: 185px minmax(0, 1fr) !important;
    gap: 24px !important;
    padding: 48px 26px !important;
  }
  .release-page .release-cinematic-hero .release-hero-poster {
    width: 185px !important;
    max-width: 185px !important;
  }
  .release-cinematic-artwork { left: 46%; }
}

@media (max-width: 680px) {
  .home-showcase-slide.is-poster-fallback .home-showcase-backdrop {
    height: 62% !important;
    opacity: .5 !important;
    filter: blur(10px) saturate(.95) contrast(1.06) !important;
    transform: scale(1.08) !important;
  }
  .home-showcase-artwork {
    inset: -2% -4% 38% 22%;
    background-position: right top;
    background-size: auto 104%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  }
  .home-showcase-slide.is-poster-fallback .home-showcase-artwork { opacity: .58; }

  .release-page .release-cinematic-hero {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 244px 16px 20px !important;
  }
  .release-page .release-cinematic-hero .release-hero-poster { display: none !important; }
  .release-cinematic-hero .release-cinematic-backdrop,
  .release-cinematic-hero.is-poster-fallback .release-cinematic-backdrop {
    height: 310px !important;
    opacity: .54 !important;
    filter: blur(9px) saturate(.95) contrast(1.06) !important;
    transform: scale(1.07) !important;
  }
  .release-cinematic-artwork {
    inset: 0 -3% auto 20%;
    height: 310px;
    background-position: right top;
    background-size: auto 108%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  }
  .release-cinematic-hero.is-poster-fallback .release-cinematic-artwork { opacity: .54; }
  .release-page .release-cinematic-hero::before,
  .release-page .release-cinematic-hero.is-poster-fallback::before {
    background: linear-gradient(0deg, rgba(3, 9, 17, .99) 31%, rgba(3, 9, 17, .82) 62%, rgba(3, 9, 17, .08) 100%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-showcase-backdrop,
  .home-showcase-artwork,
  .release-cinematic-backdrop,
  .release-cinematic-artwork { transition: none !important; }
}