/* Final section — "Drive your Limits." Heading on the black above a full-bleed
   track photograph, using the same section-heading scale as the sections above.
   Compact by design: the page is already tall and this is the closing beat.

   Desktop only for now; responsive tuning is a later pass. */

.drive {
  /* Black breathing room so this photograph doesn't butt straight into the A1 one. */
  padding-top: clamp(3rem, 7vh, 5rem);
  background-color: var(--zh-black);
  scroll-margin-top: var(--zh-header-height);
}

.drive__frame {
  position: relative;
  /* Same heading-to-image gap the A1 section uses. */
  margin-top: clamp(3.125rem, 5vh, 4.25rem);
  /* ~25% shorter — the vh term is what applies at desktop sizes. */
  height: clamp(12rem, 43.5vh, 28.5rem);
  overflow: hidden;
  background-color: var(--zh-black);
}

.drive__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Keeps the car in the right half and the quiet track surface on the left,
     where the copy sits. One value to change if the photograph is replaced. */
  object-position: 50% 65%;
}

/* Localised to the left: the car and the track keep their own light. */
.drive__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgb(5 5 5 / 0.75) 0%,
    rgb(5 5 5 / 0.5) 24%,
    rgb(5 5 5 / 0.18) 42%,
    rgb(5 5 5 / 0) 58%
  );
}

.drive__overlay {
  position: absolute;
  inset: 0;
  /* Same heading offset inside the frame as the A1 section uses. */
  padding-top: clamp(3rem, 7vh, 5rem);
}

.drive__content .cars__lede {
  margin-top: 1rem;
  max-width: 26ch;
}

.drive__cta {
  margin-top: clamp(1.5rem, 3.5vh, 2.25rem);
}

/* Same treatment as the A1 section below the desktop breakpoint: photograph full
   width in flow, copy and CTA underneath it on black. */
@media (max-width: 59.9375rem) {
  .drive__frame {
    height: auto;
    margin-top: clamp(1.5rem, 4vh, 2.5rem);
  }

  .drive__media {
    position: static;
    width: 100%;
    height: auto;
  }

  .drive__scrim {
    display: none;
  }

  .drive__overlay {
    position: static;
    padding-top: clamp(1.5rem, 4vh, 2.25rem);
    padding-bottom: clamp(2.5rem, 6vh, 3.5rem);
  }

  .drive__content .cars__lede {
    margin-top: 0;
    max-width: 40ch;
  }
}