/* JOY Automart homepage visual repair — 2026-08-11
   Repairs owner-reported desktop/light/dark/mobile regressions without changing
   navigation, theme controls, carousel behaviour, or approved media assets. */

/* 1) Remove the accidental duplicate left logo plate injected by the temporary
   brand hotfix. The approved light/dark hero artwork already owns brand marks. */
html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__hero::before {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 2) The same temporary hotfix replaced the hero veil pseudo-element with a
   second Experience Center billboard. Remove the pseudo-element outright so it
   can never paint a box over the approved hero artwork in either theme. */
html body #root [data-testid="landing-page"] .joy-production-home .joy-production-home__hero::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  pointer-events: none !important;
}

/* 3) Every commissioned carousel plate is a 16:9 frame on large screens. */
html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising {
  width: min(1540px, calc(100% - 24px)) !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
}

html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising__media {
  background-size: cover !important;
  background-position: center center !important;
}

/* The commissioned UHD plates already carry their own headline/copy. Prevent
   a second live copy layer from painting over baked typography. Controls and
   accessibility labels remain active. */
html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising__copy {
  display: none !important;
}

/* Keep the six-screen filmstrip inside the frame and away from the artwork's
   safe area. */
html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising__controls {
  bottom: 14px !important;
}

/* --------------------------------------------------------------------------
   LARGE-SCREEN SLIDER FRAMING — LIGHT + DARK
   Keep all desktop/laptop slides cinematic 16:9 while preserving each subject.
   -------------------------------------------------------------------------- */
@media (min-width: 916px) {
  html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising {
    aspect-ratio: 16 / 9 !important;
  }

  html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising__media {
    background-size: cover !important;
  }

  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-advertising__media[data-slide="intelligence"] { background-position: 50% 50% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-advertising__media[data-slide="vellox"] { background-position: 55% 50% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-advertising__media[data-slide="workshop"] { background-position: 50% 50% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-advertising__media[data-slide="experience"] { background-position: 50% 48% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-advertising__media[data-slide="kits"] { background-position: 53% 50% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-advertising__media[data-slide="rims"] { background-position: 52% 50% !important; }

  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-home-advertising__media[data-slide="intelligence"] { background-position: 50% 50% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-home-advertising__media[data-slide="vellox"] { background-position: 54% 50% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-home-advertising__media[data-slide="workshop"] { background-position: 50% 49% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-home-advertising__media[data-slide="experience"] { background-position: 50% 48% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-home-advertising__media[data-slide="kits"] { background-position: 54% 50% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-home-advertising__media[data-slide="rims"] { background-position: 52% 50% !important; }
}

@media (max-width: 915px) {
  html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising {
    width: calc(100% - 20px) !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE / FOLD / PORTRAIT HARDENING — LIGHT + DARK
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  /* Keep the approved light portrait hero here. Dark mobile is deliberately
     left to canonical bundled CSS so this legacy repair sheet cannot restore
     an obsolete dark-mode photograph. */
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-production-home__hero {
    aspect-ratio: 904 / 1323 !important;
    min-height: 0 !important;
    height: auto !important;
    background-image: url('/homepage-light-final.jpg') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  /* The supplied burgundy/gold menu stays compact and anchored to the safe
     top-right zone; it must never grow over the logo or hero copy. */
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-production-home__menu-card,
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-production-home__menu-card {
    top: 1.6% !important;
    right: 3.4% !important;
    width: 34% !important;
    max-width: 168px !important;
    min-width: 118px !important;
    min-height: 42px !important;
    height: auto !important;
    aspect-ratio: 2.65 / 1 !important;
  }

  /* Mobile carousel becomes a portrait viewport; every theme/slide receives an
     explicit focal point rather than inheriting desktop center-crop. */
  html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising {
    width: calc(100% - 18px) !important;
    aspect-ratio: 4 / 5 !important;
    margin-top: 14px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising__media {
    inset: 0 !important;
    background-size: cover !important;
  }

  /* LIGHT mobile focal points. */
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-advertising__media[data-slide="intelligence"] { background-position: 58% 42% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-advertising__media[data-slide="vellox"] { background-position: 62% 42% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-advertising__media[data-slide="workshop"] { background-position: 54% 40% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-advertising__media[data-slide="experience"] { background-position: 50% 40% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-advertising__media[data-slide="kits"] { background-position: 58% 40% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-advertising__media[data-slide="rims"] { background-position: 56% 42% !important; }

  /* DARK mobile focal points. Dark plates differ from light plates, so they do
     not share one crop. This keeps the vehicle/headline/rim subject centered. */
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-home-advertising__media[data-slide="intelligence"] { background-position: 54% 42% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-home-advertising__media[data-slide="vellox"] { background-position: 60% 42% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-home-advertising__media[data-slide="workshop"] { background-position: 52% 40% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-home-advertising__media[data-slide="experience"] { background-position: 50% 40% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-home-advertising__media[data-slide="kits"] { background-position: 56% 40% !important; }
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-home-advertising__media[data-slide="rims"] { background-position: 54% 42% !important; }

  /* Reserve a clean bottom shelf for the six selectors so they never float on
     top of the primary title/vehicle subject. */
  html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising__controls {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    display: block !important;
    padding: 7px !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(7,5,6,.08), rgba(7,5,6,.50)) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-home-advertising__controls {
    background: linear-gradient(180deg, rgba(255,253,249,.12), rgba(255,253,249,.46)) !important;
  }

  html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising__dots {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 0 !important;
  }

  html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising__dots > button {
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 9px !important;
    background-size: cover !important;
    background-position: center center !important;
    transform: none !important;
  }

  html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising__dots > button.is-active {
    transform: none !important;
    box-shadow:
      0 0 0 1px var(--maison-champagne),
      0 0 14px color-mix(in srgb, var(--maison-burgundy) 46%, transparent) !important;
  }

  /* Preview artwork already contains its own captions; remove the second CSS
     caption on small screens and keep only the compact LIVE status. */
  html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising__dots > button::after {
    content: none !important;
    display: none !important;
  }

  html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising__dots > button::before {
    top: 4px !important;
    right: 5px !important;
    font-size: 5px !important;
  }

  html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising__nav,
  html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising__counter {
    display: none !important;
  }
}

@media (max-width: 390px) {
  html body #root [data-testid="landing-page"] .joy-production-home .joy-home-advertising__dots > button {
    height: 44px !important;
    min-height: 44px !important;
  }

  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="light"] .joy-production-home__menu-card,
  html body #root [data-testid="landing-page"] .joy-production-home[data-theme="dark"] .joy-production-home__menu-card {
    width: 36% !important;
    min-width: 112px !important;
  }
}