/* Full-viewport hero built around the real three-car photograph.
   Desktop: the photo fills the viewport and the copy overlays its empty upper-left.
   Mobile: the composition stacks — copy on black, whole photo as a band below. */

.hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--zh-black);
  isolation: isolate;
}

.hero__content {
  grid-column: 1;
  grid-row: 1;
}

/* Taken out of flow on desktop so the photo fills the viewport box exactly —
   in flow, its natural height would size the row and push the lineup below
   the fold. Mobile puts it back in flow as the second row. */
.hero__visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__media {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Vertical crop only — the lineup spans almost the full width of the frame, so
     any horizontal crop would cut the lead silver car or the black car at the back.
     The overflow comes off the empty sky and the empty asphalt instead. */
  object-position: 50% 50%;
}

/* Wide-and-short viewports (ultrawide, short laptops) overflow much further; bias
   the crop downward so the lineup keeps its wheels rather than its sky. */
@media (min-aspect-ratio: 2 / 1) {
  .hero__media {
    object-position: 50% 66%;
  }
}

/* Readability only: a top band for the nav, an upper-left pool for the headline,
   and a short fade at the bottom edge. Nothing reaches the cars. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(5 5 5 / 0.6) 0%, rgb(5 5 5 / 0.22) 11%, rgb(5 5 5 / 0) 22%),
    radial-gradient(68% 44% at 0% 30%, rgb(5 5 5 / 0.9) 0%, rgb(5 5 5 / 0.48) 46%, rgb(5 5 5 / 0) 78%),
    linear-gradient(to top, rgb(5 5 5 / 0.5) 0%, rgb(5 5 5 / 0) 8%);
}

.hero__content {
  position: relative;
  align-self: start;
  padding-block: calc(var(--zh-header-height) + clamp(1.5rem, 5vh, 4rem)) 3rem;
}

/* Small copy can cross brighter parts of the photograph on short viewports, where
   the scrim is deliberately weak. A tight shadow keeps it legible without
   darkening the photo itself. */
.hero__eyebrow,
.hero__location {
  text-shadow: 0 1px 3px rgb(5 5 5 / 0.85);
}

.hero__eyebrow {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--zh-white);
}

.hero__title {
  margin: 0;
  /* Sized so the copy block ends above the lineup rather than across it; the vh
     term does the same job on short laptops that the vw term does on narrow ones. */
  font-size: clamp(2.5rem, min(5.6vw, 9.5vh), 5.75rem);
  font-style: italic;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hero__title-row {
  display: block;
}

.hero__title-row--accent {
  color: var(--zh-red);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.9rem, 2.4vh, 1.5rem);
  margin-top: clamp(1.25rem, 3.4vh, 2.25rem);
}

.hero__location {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zh-white);
}

@media (min-width: 60rem) {
  .hero__eyebrow {
    margin-bottom: clamp(0.75rem, 2vh, 1.5rem);
  }
}

/* Mobile: stack rather than crop. A full-width photo at its native ratio keeps
   all three cars — and the lead silver car — intact. */
@media (max-width: 59.9375rem) {
  .hero {
    grid-template-rows: 1fr auto;
  }

  .hero__content {
    grid-row: 1;
    align-self: center;
    padding-block: calc(var(--zh-header-height) + 2rem) 2.5rem;
  }

  /* Back into flow: the whole frame is shown at its native ratio, uncropped. */
  .hero__visual {
    position: static;
    grid-row: 2;
  }

  .hero__media {
    height: auto;
  }

  /* Blend the top edge of the band into the black above it. */
  .hero__scrim {
    background: linear-gradient(to bottom, rgb(5 5 5 / 0.95) 0%, rgb(5 5 5 / 0) 20%);
  }
}