/* Prototype flush hero media: landing slideshow 2026.09.26-2 */

/* Slides "Iedere auto is uniek." and "Z4 Onderhoud": the image touches the
   header with no gap. The image files are cropped at the lowest visible car
   pixel, so the copy starting right at the image bottom reproduces the
   annotated overlap: heading line box begins where the car ends.
   --hero-flush-overlap pulls the copy further up into the image if wanted. */
:root {
  --hero-flush-overlap: 0px;
}

.prototype-hero .hero-slide--flush .hero-media {
  aspect-ratio: 1440 / 866;
  max-width: 900px;
  max-height: none;
  object-fit: contain;
  object-position: right top;
  filter: none;
}

/* Slides now differ in height on short or tablet-width screens. Hidden
   slides stay in the grid invisibly (still hidden + inert for assistive
   tech), so the stage keeps the tallest slide's height and never jumps. */
.prototype-hero .hero-slide[hidden] {
  display: grid;
  visibility: hidden;
}

.prototype-hero .hero-slide--flush[data-slide-index="2"] .hero-media {
  aspect-ratio: 1440 / 940;
}

/* Desktop: copy left, image right, top edge flush with the header and the
   right edge flush with the viewport, like the existing hero image. */
@media (min-width: 834px) {
  .prototype-hero .hero-slide--flush {
    align-content: stretch;
    padding-top: 0;
  }

  /* The removed slide top padding moves to the copy, so the copy keeps the
     same vertical position as on the Detailing slide. */
  .prototype-hero .hero-slide--flush .hero-content {
    align-self: center;
    padding-top: clamp(42px, 6vw, 72px);
  }

  .prototype-hero .hero-slide--flush .hero-media-wrap {
    align-self: start;
    transform: none;
  }
}

/* Mobile: full-bleed image first, directly under the header; copy below. */
@media (max-width: 833px) {
  .prototype-hero .hero-slide--flush {
    align-content: start;
    gap: 0;
    padding-top: 0;
  }

  .prototype-hero .hero-slide--flush .hero-media-wrap {
    order: -1;
    width: calc(100% + var(--padX));
    margin-left: calc(-1 * var(--padX));
  }

  /* Full width on phones; on short or tablet-width screens the car scales
     down (right-aligned) so the copy still fits the first viewport. */
  .prototype-hero .hero-slide--flush .hero-media {
    width: 100%;
    max-width: none;
    max-height: max(55vw, calc(100svh - var(--nav-h) - 400px));
  }

  .prototype-hero .hero-slide--flush .hero-content {
    margin-top: calc(-1 * var(--hero-flush-overlap));
    transform: none;
  }
}