/**
 * Car + brand heroes — match Octane avtopark / brand slide heights
 *
 * Octane cascade (measured):
 *   ≤425px:  540px  (.slider-car .slide)
 *   default: 480px  (.slide)
 *   ≥768px:  700px  (.slide)
 *   ≥1200px: 752px  (.slider-car .slide)
 */

body.car-index .cars-company .slide,
body.car-index .cars-company .slide.slide--full-car,
body.car-index .cars-company .slide.slide--full-car.slide--banner-fit,
body.brand-landing-page .slider-car .slide,
body.brand-landing-page .slider-car .slide.slide--banner-fit,
body.brand-landing-page .slider-car.cars-company__sections .slide,
body.brand-page .slider-car .slide,
.slider-car .slide,
.slider-car .slide.slide--banner-fit {
  width: 100% !important;
  max-width: none !important;
  height: 480px !important;
  min-height: 480px !important;
  max-height: none !important;
  aspect-ratio: unset !important;
  background-size: cover !important;
  -webkit-background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: #111 !important;
}

@media (min-width: 768px) {
  body.car-index .cars-company .slide,
  body.car-index .cars-company .slide.slide--full-car,
  body.car-index .cars-company .slide.slide--full-car.slide--banner-fit,
  body.brand-landing-page .slider-car .slide,
  body.brand-landing-page .slider-car .slide.slide--banner-fit,
  body.brand-landing-page .slider-car.cars-company__sections .slide,
  body.brand-page .slider-car .slide,
  .slider-car .slide,
  .slider-car .slide.slide--banner-fit {
    height: 700px !important;
    min-height: 700px !important;
  }
}

@media (min-width: 1200px) {
  body.car-index .cars-company .slide,
  body.car-index .cars-company .slide.slide--full-car,
  body.car-index .cars-company .slide.slide--full-car.slide--banner-fit,
  body.brand-landing-page .slider-car .slide,
  body.brand-landing-page .slider-car .slide.slide--banner-fit,
  body.brand-landing-page .slider-car.cars-company__sections .slide,
  body.brand-page .slider-car .slide,
  .slider-car .slide,
  .slider-car .slide.slide--banner-fit {
    height: 752px !important;
    min-height: 752px !important;
  }
}

/* Autobiography — shift left so TITANE plate is in frame */
body.car-index .cars-company .slide.slide--hero-rr-auto,
body.car-index .slider-car .slide.slide--hero-rr-auto {
  background-size: cover !important;
  -webkit-background-size: cover !important;
  background-position: 90% 42% !important;
  background-color: #0a0a0a !important;
}

/*
 * Brand pages: Octane ≤425 → 540px + cover (unchanged).
 * Car pages: hero-mobile is mostly 918×1056 — box must match that ratio
 * with contain so the full Octane mobile frame is visible (no side crop).
 * User 2026-07-30 + 2026-08-03: cover+540 cropped the car.
 */
@media (max-width: 767px) {
  body.car-index:not(.brand-landing-page) .cars-company .slide,
  body.car-index:not(.brand-landing-page) .cars-company .slide.slide--full-car,
  body.car-index:not(.brand-landing-page) .cars-company .slide.slide--full-car.slide--banner-fit,
  body.car-index:not(.brand-landing-page) .cars-company .slide.slide--banner-fit,
  body.car-index:not(.brand-landing-page) .slider-car .slide,
  body.car-index:not(.brand-landing-page) .slider-car .slide.slide--banner-fit {
    width: 100% !important;
    max-width: none !important;
    height: calc(100vw * 1056 / 918) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    background-size: contain !important;
    -webkit-background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #0a0a0a !important;
  }

  body.car-index .slider-car {
    width: 100% !important;
    max-width: none !important;
    overflow-x: hidden !important;
  }

  body.car-index:not(.brand-landing-page) .cars-company .slide::before,
  body.car-index:not(.brand-landing-page) .slider-car .slide::before {
    display: block !important;
    background: rgba(0, 0, 0, 0.3) !important;
    pointer-events: none !important;
  }

  body.car-index:not(.brand-landing-page) .cars-company .slide[class*="slide--hero-"],
  body.car-index:not(.brand-landing-page) .slider-car .slide[class*="slide--hero-"] {
    background-position: center center !important;
  }
}

@media (max-width: 425px) {
  body.brand-landing-page .slider-car .slide,
  body.brand-landing-page .slider-car .slide.slide--banner-fit,
  body.brand-landing-page .slider-car.cars-company__sections .slide,
  body.brand-landing-page.brand-porsche .cars-company .slide,
  body.brand-landing-page.brand-porsche .slider-car.cars-company__sections .slide,
  body.brand-page .slider-car .slide {
    height: 540px !important;
    min-height: 540px !important;
    max-height: 540px !important;
    aspect-ratio: unset !important;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #0a0a0a !important;
  }

  body.brand-landing-page .slider-car {
    width: 100% !important;
    max-width: none !important;
    overflow-x: hidden !important;
  }
}