/* SECTION / Models carousel
   Desktop (Figma 1920 frame, 1440 content column => px / 19.2):
     header 1440x120 (h2 36/36 700 + 220x4 accent), arrows row 44px pinned
     left at x=64/128, viewport 620 tall with 900x590 cards 24 apart, dots.
   Mobile (px / 3.75): heading, one card per view, swiper row underneath. */

.models {
  background: var(--page-bg);
  color: var(--page-ink);
  padding: 0 0 4.1667vw; /* 80 */
}

/* ----------------------------- header ----------------------------- */
.models__head {
  text-align: center;
  padding: 3.3333vw 0 0; /* 64 */
}

.models__title {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 1.875vw; /* 36 */
  line-height: 1; /* 36 */
  margin: 0;
}

/* Figma uses a different wording per breakpoint — see models.php */
.models__title-m {
  display: none;
}

.models__rule {
  display: block;
  width: 11.4583vw; /* 220 */
  height: 0.2083vw; /* 4 */
  margin: 0.8333vw auto 0; /* 16 */
  background: var(--brand-accent);
  border-radius: 999px;
}

/* ----------------------------- carousel ----------------------------- */
.models__carousel {
  position: relative;
  margin-top: 3.5417vw; /* 68 */
}

/* Figma pins the pair to the LEFT of the row at x 64 / 128 with the black
   "next" leading. row-reverse flips the RTL main axis so the first DOM child
   (next) lands leftmost and the row packs against the left edge. */
.models__arrows {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: 1.0417vw; /* 20 => 64 and 128 */
  padding: 0 3.3333vw; /* 64 */
  margin-bottom: 1.25vw; /* 24 */
}

.models__nav {
  width: 2.2917vw; /* 44 */
  height: 2.2917vw;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

/* Both controls are solid #1a1a1a, same as the gallery arrows on the model
   pages — neither one greys out. */
.models__nav--next,
.models__nav--prev {
  background: var(--ink);
}

.models__nav img {
  width: 1.25vw; /* 24 */
  height: 1.25vw;
  display: block;
}

/* icon-chevron.svg already points left and icon-chevron-2.svg right, which is
   what the Figma draws for next / prev in RTL — no mirroring. */

.models__nav:hover {
  filter: brightness(1.15);
}

.models__nav:active {
  transform: scale(0.94);
}

.models__viewport {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

.models__viewport:active {
  cursor: grabbing;
}

.models__track {
  display: flex;
  align-items: stretch;
  gap: 1.25vw; /* 24 */
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.models__track.is-instant {
  transition: none;
}

/* ------------------------------- card ------------------------------- */
.models__card {
  position: relative;
  flex: 0 0 46.875vw; /* 900 */
  width: 46.875vw;
  height: 30.7292vw; /* 590 */
  box-sizing: border-box;
  background: var(--page-bg);
  border: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.6667vw 1.6667vw 1.25vw; /* 32 / 24 */
  text-align: center;
  user-select: none;
  transition: opacity 0.45s ease;
}

/* neighbours peek either side but read as background */
.models__card[aria-hidden="true"] {
  opacity: 1;
}

/* black benefits pill, top-left of the card */
.models__tag {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4167vw; /* 8 */
  background: var(--ink);
  color: var(--panel-ink);
  font-family: var(--f-semibold);
  font-weight: 600;
  font-size: 0.7292vw; /* 14 */
  line-height: 1.5714; /* 22 */
  padding: 0.4167vw 0.8333vw; /* 8 / 16 */
  white-space: nowrap;
}

.models__tag img {
  width: 0.8333vw; /* 16 */
  height: 0.8333vw;
  display: block;
}

.models__name {
  font-family: var(--f-extrabold);
  font-weight: 800;
  font-size: 3.3333vw; /* 64 */
  line-height: 0.75; /* 48 */
  margin: 1.0417vw 0 0;
  letter-spacing: 0.02em;
}

.models__name-m {
  display: none;
}

/* Figma "Model Image" is a 750x290 frame centred in the 900 card (75 either
   side). It used to be width:70% + max-width:630, but the percentage resolves
   against the <picture> wrapper — which max-width had already shrunk to 630 —
   so the car actually drew at 441 and read far too small. An explicit width
   sizes the wrapper and the car together, and align-items:center on the card
   keeps it centred. 1500x580 is exactly 750x290, so height:auto lands on 290. */
.models__pic {
  display: block;
  width: 39.0625vw; /* 750 */
  height: auto;
  margin: 1.0417vw auto 0;
  pointer-events: none;
}

.models__sub {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 1.4583vw; /* 28 */
  line-height: 1.25; /* 35 */
  margin: auto 0 0;
  text-transform: none;
}

.models__price {
  font-family: var(--f-regular);
  font-weight: 400;
  font-size: 1.4583vw; /* 28 */
  line-height: 1.25; /* 35 */
  margin: 0.2083vw 0 0; /* 4 */
}

.models__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4167vw; /* 8 */
  margin-top: 0.4167vw;
  color: var(--page-ink);
  text-decoration: none;
  font-family: var(--f-regular);
  font-size: 1.25vw; /* 24 */
  line-height: 1.1667; /* 28 */
}

/* the yellow rule under the label only, not under the arrow */
.models__link-txt {
  box-shadow: inset 0 -0.1563vw 0 var(--brand-accent);
  transition: box-shadow 0.2s ease;
}

.models__link img {
  width: 0.8333vw; /* 16 */
  height: 0.8333vw;
  display: block;
}

.models__link:hover .models__link-txt {
  box-shadow: inset 0 -0.3125vw 0 var(--brand-accent);
}

/* ------------------------------- dots ------------------------------- */
.models__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4167vw; /* 8 */
  margin-top: 2.2917vw; /* 44 */
}

.models__dot {
  width: 0.4167vw; /* 8 */
  height: 0.4167vw;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hairline);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.models__dot.is-active {
  background: var(--brand-accent);
  transform: scale(1.25);
}


/* ============================== MOBILE ============================== */
@media (max-width: 768px) {

  .models,
  .mobile .models {
    padding: 0 0 8.5333vw; /* 32 */
  }

  .models__head,
  .mobile .models__head {
    padding: 12.8vw var(--gutter) 0; /* 48 */
  }

  .models__title,
  .mobile .models__title {
    font-size: 8.5333vw; /* 32 */
    line-height: 1.25; /* 40 */
  }

  .models__title-d,
  .mobile .models__title-d {
    display: none;
  }

  .models__title-m,
  .mobile .models__title-m {
    display: inline;
  }

  .models__rule,
  .mobile .models__rule {
    width: 29.3333vw; /* 110 */
    height: 1.0667vw; /* 4 */
    margin-top: 4.2667vw;
  }

  .models__carousel,
  .mobile .models__carousel {
    margin-top: 6.4vw; /* 24 */
  }

  /* Figma mobile "swiper container": the two controls drop below the track and
     flank the dots. They stay in their DOM slot and are lifted onto the dots
     row, so the carousel wiring in campaign.js is untouched.
     row-reverse because in RTL the first child would otherwise land on the
     right — the Figma puts the black "next" control on the left. */
  .models__arrows,
  .mobile .models__arrows {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 0;
    padding: 0 var(--gutter);
    margin: 0;
    pointer-events: none;
  }

  .models__nav,
  .mobile .models__nav {
    pointer-events: auto;
  }

  .models__track,
  .mobile .models__track {
    gap: 4.2667vw; /* 16 */
  }

  .models__card,
  .mobile .models__card {
    flex: 0 0 85.3333vw; /* 320 */
    width: 85.3333vw;
    height: auto;
    min-height: 116.8vw; /* 438 */
    border: 0;
    padding: 0 0 4.2667vw;
  }

  /* the Figma mobile card has no benefits pill */
  .models__tag,
  .mobile .models__tag {
    display: none;
  }

  .models__name,
  .mobile .models__name {
    font-size: 12.8vw; /* 48 */
    line-height: 1; /* 48 */
    margin: 0;
  }

  .models__name-d,
  .mobile .models__name-d {
    display: none;
  }

  .models__name-m,
  .mobile .models__name-m {
    display: block;
  }

  .models__pic,
  .mobile .models__pic {
    width: 100%;
    max-width: none;
    margin-top: 4.2667vw;
  }

  /* Same weights as the desktop card: the model line is bold and the figure
     under it is regular. The sizes stay mobile (20/28 and 24/32). */
  .models__sub,
  .mobile .models__sub {
    font-size: 5.3333vw; /* 20 */
    line-height: 1.4; /* 28 */
    margin-top: 4.2667vw;
  }

  .models__price,
  .mobile .models__price {
    font-size: 6.4vw; /* 24 */
    line-height: 1.3333; /* 32 */
    margin-top: 2.1333vw; /* 8 */
  }

  .models__link,
  .mobile .models__link {
    font-family: var(--f-semibold);
    font-weight: 600;
    font-size: 4.8vw; /* 18 */
    line-height: 1.4444; /* 26 */
    gap: 2.1333vw;
    margin-top: 2.1333vw;
  }

  .models__link-txt,
  .mobile .models__link-txt {
    box-shadow: inset 0 -0.5333vw 0 var(--brand-accent);
  }

  .models__link img,
  .mobile .models__link img {
    width: 4.2667vw; /* 16 */
    height: 4.2667vw;
  }

  /* swiper row: chevron / dots / chevron, 44px controls at the gutter */
  .models__dots,
  .mobile .models__dots {
    position: relative;
    gap: 2.1333vw; /* 8 */
    margin-top: 8.5333vw; /* 32 */
    min-height: 11.7333vw; /* 44 */
  }

  .models__dot,
  .mobile .models__dot {
    width: 2.1333vw; /* 8 */
    height: 2.1333vw;
  }

  .models__nav,
  .mobile .models__nav {
    width: 11.7333vw; /* 44 */
    height: 11.7333vw;
  }

  .models__nav img,
  .mobile .models__nav img {
    width: 6.4vw; /* 24 */
    height: 6.4vw;
  }
}