/* JOY Automart homepage final responsive visual lock — 2026-08-23.
   Dark artwork owns the visible hero pixels. React controls remain the live
   interaction layer through homepage-dark-control-stack.css. Light mode is
   intentionally unchanged. */

html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__hero::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  inset: auto !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
}

/* Light-mode hero plate geometry moved to
   src/styles/homepage-hero-plate-geometry-unified-20260827.css.
   The two artwork buckets that used to live here (>=916px landscape / >=1101px,
   and <=1100px portrait / <=915px) declared background-image only - no
   aspect-ratio and no background-size - so the light plate had no proportion of
   its own while dark had a seven-step ladder. That is why the light headline and
   status rail dropped below the photograph instead of sitting inside it, and why
   light had no geometry at all in landscape under 1024px. The unified sheet now
   mirrors dark's ladder step for step for both themes. */

/* Dark-mode base: no crop, no stretch, no legacy overlay. */
html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-production-home__hero {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: #070506 !important;
  filter: none !important;
}

/* Mobile phone — dedicated portrait showroom plate (941x1672). */
@media (max-width: 599px) {
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-production-home__hero {
    aspect-ratio: 9 / 16 !important;
    background-image: url('/homepage/hero-dark-phone-portrait.png?v=20260824-showroom-1') !important;
    background-size: contain !important;
  }
}

/* Fold cover — portrait plate contained in the ultra-tall surface. */
@media (min-width: 600px) and (max-width: 719px) {
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-production-home__hero {
    aspect-ratio: 9 / 21 !important;
    background-image: url('/homepage/hero-dark-phone-portrait.png?v=20260824-showroom-1') !important;
    background-size: contain !important;
  }
}

/* Tablet portrait — dedicated 3:4 showroom plate (1086x1448). */
@media (min-width: 720px) and (max-width: 1023px) {
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-production-home__hero {
    aspect-ratio: 3 / 4 !important;
    background-image: url('/homepage/hero-dark-tablet-portrait.png?v=20260824-showroom-1') !important;
    background-size: contain !important;
  }
}

/* Open fold / squarer inner display — 3:4 plate contained. */
@media (min-width: 600px) and (max-width: 1023px) and (min-aspect-ratio: 4 / 5) {
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-production-home__hero {
    aspect-ratio: 5 / 6 !important;
    background-image: url('/homepage/hero-dark-tablet-portrait.png?v=20260824-showroom-1') !important;
    background-size: contain !important;
  }
}

/* Laptop / notebook. Keep complete 16:9 artwork inside 16:10 surface. */
@media (min-width: 1024px) and (max-width: 1439px) {
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-production-home__hero {
    aspect-ratio: 16 / 10 !important;
    background-image: url('/homepage/hero-dark-desktop.png?v=20260824-showroom-1') !important;
    background-size: contain !important;
  }
}

/* Desktop / TV — exact landscape source. */
@media (min-width: 1440px) {
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-production-home__hero {
    aspect-ratio: 16 / 9 !important;
    background-image: url('/homepage/hero-dark-desktop.png?v=20260824-showroom-1') !important;
    background-size: contain !important;
  }
}

/* Short notebook guard. */
@media (min-width: 1024px) and (max-width: 1439px) and (max-height: 900px) {
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-production-home__hero {
    height: auto !important;
    min-height: 0 !important;
  }
}