/* Section — Arrive at A1 Motor Park.

   The photograph is full-bleed; only the copy sits on the content grid, so its
   left edge and heading scale match "Choose your Z." exactly (it reuses that
   section's heading and lede classes).

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

.a1 {
  /* Same top padding as the other sections, so this heading sits at the same
     height within its section as "Choose your Z." and "Book your Experience." */
  padding-top: clamp(4rem, 9vh, 7rem);
  background-color: var(--zh-black);
  scroll-margin-top: var(--zh-header-height);
}

/* Structural section break, edge to edge — deliberately not on the content grid,
   unlike the heading beneath it. */
.a1__rule {
  height: 1px;
  background-color: #333333;
}

.a1__heading {
  /* ~46–54px: keeps the rule-to-title gap in range on short and tall screens alike. */
  padding-top: clamp(2.875rem, 4.5vh, 3.4rem);
}

/* Edge to edge, with a viewport-relative height so the whole composition stays
   on screen. One value to change if the photograph is replaced. */
.a1__frame {
  position: relative;
  /* ~50–68px between the heading and the photograph. */
  margin-top: clamp(3.125rem, 5vh, 4.25rem);
  /* The photograph is pre-cropped, so this only decides how tall the band is;
     the crop stays centred. */
  /* ~25% shorter. The vh term is the one that applies at desktop sizes — the min
     only takes over below ~585px of viewport height, the max only above ~1440. */
  height: clamp(23rem, 61.5vh, 39rem);
  overflow: hidden;
  background-color: var(--zh-black);
}

.a1__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 83%;
}

/* Localised to the left so the copy stays legible over the sky while the sign,
   building and car keep their daylight. */
.a1__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgb(5 5 5 / 0.72) 0%,
    rgb(5 5 5 / 0.5) 24%,
    rgb(5 5 5 / 0.18) 42%,
    rgb(5 5 5 / 0) 58%
  );
}

.a1__overlay {
  position: absolute;
  inset: 0;
  /* Unchanged: keeps the supporting copy where it already sat on the photograph. */
  padding-top: clamp(4rem, 9vh, 7rem);
}

/* Copy in this section runs ~30% larger than the shared section scale, to hold its
   own against the full-bleed photograph. Scoped here so other sections keep theirs. */
.a1__content .cars__lede {
  max-width: 34ch;
  font-size: clamp(1.8rem, 2.37vw, 2.125rem);
}

.a1__text {
  margin: 1.25rem 0 0;
  max-width: 34ch;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 0.75);
}

/* Up ~25% only, so it stays clearly the quietest of the three levels. */
.a1__note {
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}

/* Below the desktop breakpoint the copy moves out of the photograph and sits under
   it on black: at phone widths there is no negative space left to read it against. */
@media (max-width: 59.9375rem) {
  .a1__frame {
    height: auto;
    margin-top: clamp(1.5rem, 4vh, 2.5rem);
  }

  /* Image back in flow at its own ratio — full width, no crop, no scrim needed. */
  .a1__media {
    position: static;
    width: 100%;
    height: auto;
  }

  .a1__scrim {
    display: none;
  }

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

  /* Back to the shared section-subtitle scale; the +30% desktop size is for
     reading against a photograph. */
  .a1__content .cars__lede {
    font-size: clamp(1.375rem, 1.82vw, 1.625rem);
    max-width: 40ch;
  }

  /* Caps the measure on tablets, where the full-width column would otherwise run
     to ~90 characters a line. No effect at phone widths. */
  .a1__text {
    font-size: 1rem;
    max-width: 52ch;
  }

  .a1__note {
    font-size: 0.8125rem;
  }
}