/* Section 2 — Choose your Z. Editorial three-panel lineup: no rounded corners, no
   shadows, no floating cards. Separation comes from hairline rules, and the power
   progression is carried by the type scale plus a red meter per panel. */

.cars {
  --car-gutter: clamp(1rem, 2vw, 2rem);

  padding-block: clamp(4rem, 9vh, 7rem);
  background-color: var(--zh-black);
  /* Cleared by the fixed header when the nav or hero CTA jumps here. */
  scroll-margin-top: var(--zh-header-height);
}

.cars__intro {
  max-width: 44rem;
}

.cars__title {
  margin: 0 0 1rem;
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  font-style: italic;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

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

/* Shared section subtitle — also used by the how-it-works and A1 sections.
   Sized 30% above the original 1.0625/1.4vw/1.25rem scale. */
.cars__lede {
  margin: 0;
  font-size: clamp(1.375rem, 1.82vw, 1.625rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgb(255 255 255 / 0.75);
}

.cars__grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 5vh, 4rem);
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

/* Panels ----------------------------------------------------------------- */

.car-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-block: 2.25rem;
}

.car-card + .car-card {
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

/* Hover accent: a red rule drawn across the top of the panel. The most extreme
   car carries it permanently. */
.car-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--zh-red);
  transition: width 250ms ease;
}

.car-card:hover::before,
.car-card:focus-within::before,
.car-card--extreme::before {
  width: 100%;
}

.car-card__media {
  position: relative;
  /* The photography is portrait, so the stacked mobile slot takes a taller frame
     rather than cropping hard; desktop columns stay landscape. */
  aspect-ratio: 4 / 5;
  margin-bottom: 1.75rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.12);
  background-color: var(--zh-black);
}

.car-card__photo,
.car-card__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 300ms ease;
}

.car-card__photo {
  object-fit: cover;
  /* Per-photograph framing, set from the car data. */
  object-position: var(--car-photo-focus, 50% 50%);
}

/* Technical hatch, brand red only, until the per-car photography lands. */
.car-card__placeholder {
  display: grid;
  place-items: center;
  background-image: repeating-linear-gradient(
    135deg,
    rgb(227 0 12 / 0.16) 0 2px,
    rgb(227 0 12 / 0) 2px 11px
  );
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.55);
}

.car-card:hover .car-card__photo,
.car-card:hover .car-card__placeholder {
  transform: scale(1.03);
}

.car-card__position {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.7);
}

.car-card__number {
  color: var(--zh-red);
}

.car-card__name {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.car-card__power {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  font-size: clamp(2.75rem, 4.2vw, 3.75rem);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.car-card__power-unit {
  font-size: 0.32em;
  font-style: normal;
  letter-spacing: 0.2em;
}

/* The extreme car is the only one whose figure is red. */
.car-card--extreme .car-card__power {
  color: var(--zh-red);
}

.car-card__meter {
  height: 2px;
  margin-top: 1rem;
  background-color: rgb(255 255 255 / 0.14);
}

.car-card__meter span {
  display: block;
  height: 100%;
  background-color: var(--zh-red);
}

.car-card__specs {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.car-card__specs li {
  padding-block: 0.65rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.78);
}

.car-card__prices {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.car-card__price {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.car-card__price-label,
.car-card__price-note {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.6);
}

.car-card__price-amount {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.car-card__price-unit {
  margin-left: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.65);
}

.car-card__note {
  margin: 1.25rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.55);
}

.car-card__restriction {
  margin: 1.25rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--zh-red);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zh-white);
}

.car-card__footer {
  padding-top: 2rem;
}

@media (min-width: 60rem) {
  /* Pulling the grid out by one gutter lets every panel keep identical padding —
     so all three photos are the same size — while the first panel's copy still
     lines up with the section headline. */
  .cars__grid {
    grid-template-columns: repeat(3, 1fr);
    margin-inline: calc(-1 * var(--car-gutter));
  }

  .car-card {
    padding: 2.5rem var(--car-gutter);
  }

  .car-card__media {
    aspect-ratio: 4 / 3;
  }

  .car-card + .car-card {
    border-top: 0;
  }

  /* Hairline rules between panels instead of gaps or boxes. Drawn as an overlay
     rather than a border so no panel loses a pixel of content width to it. */
  .car-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background-color: rgb(255 255 255 / 0.14);
  }

  /* CTAs line up across the three panels regardless of copy length. */
  .car-card__footer {
    margin-top: auto;
  }
}

/* Tablet: the column is wide but there is only one of it, so a portrait photo slot
   would make each panel roughly a screen tall. Landscape keeps the section walkable. */
@media (min-width: 40rem) and (max-width: 59.9375rem) {
  .car-card__media {
    aspect-ratio: 16 / 10;
  }
}