/* HOVY LEE hero reliability + responsive portrait fix, 2026-09-23 */
.home-hero {
  background: #050505 !important;
  color: #f3f0e8;
  isolation: isolate;
}

/* Use a real image layer instead of relying on a CSS background. */
.home-hero::before {
  content: none !important;
  display: none !important;
}

.home-hero .hero-art {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 0 !important;
  pointer-events: none;
  background: #050505;
}

.home-hero .hero-art picture,
.home-hero .hero-art img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

.home-hero .hero-art img {
  object-fit: cover !important;
  object-position: 50% 50% !important;
  filter: none !important;
  transform: none;
}

.home-hero .hero-shade { z-index: 1 !important; }
.home-hero .hero-panel,
.home-hero .hero-footnote,
.home-hero .mobile-now-list { z-index: 2 !important; }

/* Mobile uses a portrait-specific asset built from the original hero image.
   `contain` keeps the full available portrait visible; the black canvas makes
   the remaining vertical space seamless with the hero background. */
@media (max-width: 820px) {
  .home-hero {
    background: #050505 !important;
  }

  .home-hero .hero-art img {
    object-fit: contain !important;
    object-position: 50% 52% !important;
    transform: scale(1.07);
    transform-origin: 50% 52%;
  }

  .home-hero .hero-shade {
    background:
      linear-gradient(90deg, rgba(0,0,0,.76) 0%, rgba(0,0,0,.38) 43%, rgba(0,0,0,.10) 82%),
      linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.07) 100%) !important;
  }
}

@media (max-width: 430px) {
  .home-hero .hero-art img {
    transform: scale(1.03);
  }
}