/* EWEW 2026 hero image-fit correction — v3.4.3
   Desktop/landscape screens display the complete 1920×960 artwork. A softly
   blurred copy fills any spare vertical space, so the hero remains edge to
   edge without enlarging or cropping the main artwork. */

.hero.hero-carousel > .hero-media,
.hero.hero-carousel > .hero-media > .hero-slide {
  background: var(--rift, #06203D) !important;
}

/* Soft edge-to-edge backdrop. */
.hero.hero-carousel > .hero-media > .hero-slide > img.hero-slide-backdrop {
  position: absolute !important;
  inset: -28px !important;
  z-index: 0 !important;
  display: block !important;
  width: calc(100% + 56px) !important;
  height: calc(100% + 56px) !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--hero-focus, center center) !important;
  transform: scale(1.035) !important;
  transition: none !important;
  filter: blur(22px) brightness(.50) saturate(.88) !important;
  opacity: .72 !important;
  background: var(--rift, #06203D) !important;
}

/* Complete, non-zoomed artwork. */
.hero.hero-carousel > .hero-media > .hero-slide > img.hero-slide-artwork {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: var(--hero-focus, center center) !important;
  transform: none !important;
  transition: none !important;
  filter: saturate(1.03) contrast(1.01) !important;
  background: transparent !important;
}

/* Portrait layouts need a controlled crop; otherwise a 2:1 image would
   occupy only a shallow strip inside the tall mobile hero. */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1024px) {
  .hero.hero-carousel > .hero-media > .hero-slide > img.hero-slide-backdrop {
    display: none !important;
  }
  .hero.hero-carousel > .hero-media > .hero-slide > img.hero-slide-artwork {
    min-width: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 72% center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero-carousel > .hero-media > .hero-slide > img {
    transform: none !important;
    transition: none !important;
  }
}