/* SECTION / Model-page hero
   Desktop (Figma 1920 frame, content column 1440 => px / 19.2):
     "Hero — Desktop" 1440x770. Still fills the frame; the #1a1a1a panel
     (48 / 64 / 48 / 32 padding, 16 gap) is pinned bottom-right, with the
     "הכירו מקרוב" cue below it, inset 44 from the right edge.
     Panel type: h1 44/40 700, price 44/40 700, was 36/36 line-through,
     yellow accent 330x4, lead 36/36 400.
   Mobile (Figma 402 frame, project convention => px / 3.75):
     still 402x300 over #f5f4f0, then the same panel full width
     (32/16 padding, 8 gap): h1 32/40, price 32/40, accent 241x4,
     lead 28/36. "למבחר הדגמים" pill pinned top-left. */

.mhero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL start = right, as in the Figma */
  justify-content: flex-end;
  height: 40.1042vw; /* 770 */
  padding-inline-end: 3.3333vw; /* 64 */
  box-sizing: border-box;
  overflow: hidden;
  background: #1a1a1a;
}

.mhero__media {
  position: absolute;
  inset: 0;
  display: block;
}

.mhero__still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- per-model desktop crop ----------
   object-fit:cover centres the crop, but the Figma does NOT centre: each hero
   frame scales and offsets its own photo so the car sits where the designer
   put it (Arkana is the worst case — cover eats 248 off each side where the
   Figma only trims 85 off the left). The numbers below are the image-fill
   placements read straight off the 1440x770 frames, as percentages of the
   frame, so they keep scaling with the vw-sized hero. Each pair of w/h
   matches its source file's own aspect, so nothing is stretched.
     r5      1243:6049   austral 1454:7802
     arkana  1477:8665   captur  1477:9107 (fill is mirrored)
   Symbioz (1663:7761) is NOT in this list: its asset is pre-cut to the design's
   own framing (see images/model-hero/symbioz.png below), so it wants the plain
   cover above. Clio (1477:9549) carries no image fill at all in the Figma and
   no client still exists, so it stays on the -m.png fallback and that cover. */
.mhero[data-model="r5"] .mhero__still,
.mhero[data-model="arkana"] .mhero__still,
.mhero[data-model="austral"] .mhero__still {
  position: absolute;
  max-width: none;
  object-fit: fill;
}

.mhero[data-model="r5"] .mhero__still {
  width: 121.95%;
  height: 127.35%;
  left: -14.69%;
  top: -8.5%;
}

/* left: the Figma places this fill at -5.9%. Nudged one more vw to the left
   (PM, this thread) so the car clears the black panel by a little more. That
   is as far as it goes: the width is already the minimum that covers the frame
   (the file is 2.515:1 against a 1.87:1 box, so anything smaller shows
   background under it), and the car's tail is the limit on this side — at
   -5.9% it sat 47 from the left edge, and this leaves it 32. */
.mhero[data-model="arkana"] .mhero__still {
  width: 134.48%;
  height: 100%;
  left: -6.94%; /* Figma -5.9% − 15 of 1440 */
  top: 0;
}

/* Captur is no longer in that list. The PM supplied a new desktop still
   (1360x768, images/model-hero/captur.png) that is already framed the way the
   page needs it — car in the left half, empty backdrop on the right under the
   panel — so it takes the plain cover above. The old asset wanted the Figma's
   mirrored fill (109.87% x 123.7% with scaleX(-1)); applying that to this file
   would flip the car over to the right and straight under the panel, which is
   exactly the overlap we were asked to remove. Previous still kept at
   .figma-ref/hero-originals/captur-desktop-prev-1500x903.png. */

.mhero[data-model="austral"] .mhero__still {
  width: 129.74%;
  height: 133.77%;
  left: -20.13%;
  top: -18.83%;
}

/* Symbioz needed no rule here because the fix had to happen in the ASSET.
   The design frames a window the client's still does not contain: registering
   the still against the Figma frame (car template ncc 0.94) puts the designed
   window at x 821..2278 of our 1920-wide file, so its right quarter falls off
   the edge of the photo we were given — no crop of that file can reproduce the
   design. images/model-hero/symbioz.png is therefore a 1457x779 composite, cut
   to exactly that window: the client's sharp still wherever it reaches, and
   the Figma's own 1500x400 banner (registered to it at ncc 0.99/0.96, graded
   to match and feathered over 90px) for the empty backdrop strip on the right.
   Being already the design's framing at 1440:770, it just takes the cover
   above. TODO(client): a Symbioz still wide enough to drop the banner half.
   The untouched original is in .figma-ref/hero-originals/. */

/* ---------- value-proposition panel ---------- */
.mhero__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8333vw; /* 16 */
  padding: 2.5vw 3.3333vw 2.5vw 1.6667vw; /* 48 / 64 / 48 / 32 */
  background: #1a1a1a;
  color: var(--panel-ink);
  box-sizing: border-box;
}

.mhero__head {
  display: flex;
  align-items: center;
  gap: 0.4167vw; /* 8 */
}

.mhero__logo {
  display: block;
  width: 1.9792vw; /* 38 */
  height: 2.6042vw; /* 50 */
  flex: none;
}

.mhero__title {
  margin: 0;
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 2.2917vw; /* 44 */
  line-height: 0.9091; /* 40 */
  color: var(--panel-ink);
}

.mhero__offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL start = right */
  gap: 0.4167vw; /* 8 */
}

/* Campaign kicker — "RENAULT NOVEMBER SALE" in the yellow accent, sitting
   above the offer heading. Latin-only, so it is isolated LTR inside the RTL
   panel and still starts at the right edge like everything else here.
   Kept on ONE line with nowrap — the panel is sized off the model name, so
   letting it wrap would silently put it back on two lines on the narrower
   breakpoints.

   SIZE — 40, not the title's 44 (PM, this thread). The panel has no width of
   its own: it is content-sized, and this nowrap line is its widest child, so
   the kicker IS the box. At 44 it measured 559 and pushed the panel to 655,
   which is 135 wider than the Figma's own panel — and that extra width is what
   dropped the black box onto the front of the car on arkana / clio / austral
   (measured at 1920: the car ended 22 / 20 / 7 px INSIDE the panel).
   Moving those stills left instead was not available: clio's is an exact 1.87
   fit of the 1440x770 frame, so any shift exposes background or crops its tail,
   and arkana's is already at its minimum cover scale with the tail only 47 from
   the left edge. 40 takes the line back to 508 and the panel to 604, which
   clears every car by ~30 and leaves the type the same weight and family.
   Restore 2.2917vw here if the campaign line ever gets shorter. */
.mhero__kicker {
  margin: 0 0 0.4167vw; /* 8 */
  direction: ltr;
  text-align: right;
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 2.0833vw; /* 40 */
  line-height: 1; /* 40 */
  white-space: nowrap;
  color: var(--brand-accent);
}

.mhero__price {
  margin: 0;
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 2.2917vw; /* 44 */
  line-height: 0.9091; /* 40 */
  white-space: nowrap;
}

.mhero__was {
  margin: 0;
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 1.875vw; /* 36 */
  line-height: 1; /* 36 */
  text-decoration: line-through;
  white-space: nowrap;
}

/* Figma "Yellow Accent" 330x4 */
.mhero__rule {
  display: block;
  width: 17.1875vw; /* 330 */
  height: 0.2083vw; /* 4 */
  background: var(--brand-accent);
}

.mhero__lead {
  margin: 0;
  font-family: var(--f-regular);
  font-weight: 400;
  font-size: 1.875vw; /* 36 */
  line-height: 1; /* 36 */
  text-align: right;
}

/* ---------- "הכירו מקרוב" scroll cue — Figma "more", inset 44 ---------- */
.mhero__more {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4167vw; /* 8 */
  padding: 1.6667vw 2.2917vw 1.6667vw 0; /* 32 / 44 */
  color: var(--panel-ink);
  text-decoration: none;
  font-family: var(--f-regular);
  font-size: 1.1458vw; /* 22 */
  line-height: 1.25;
  transition: transform 0.25s ease;
}

.mhero__more-arrow {
  display: block;
  width: 2.5vw; /* 48 */
  height: 2.5vw;
  animation: mhero-cue 1.8s ease-in-out infinite;
}

.mhero__more:hover {
  transform: translateY(0.3vw);
}

@keyframes mhero-cue {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.4vw); }
}

@media (prefers-reduced-motion: reduce) {
  .mhero__more-arrow {
    animation: none;
  }
}

/* ---------- back-to-hub pill — Figma "Button" 1256:1386 ----------
   The desktop frame hangs it over the still at x1143 / y52 of the 1440 column,
   i.e. 41 in from the right edge: 256x64, #f5f4f0 on a 1.5 #1a1a1a outline,
   text 20/26 600 with the 24 home icon to its left. It only ever renders on a
   model page, because that is the only page that includes this component. */
.mhero__back {
  position: absolute;
  top: 2.7083vw; /* 52 */
  right: 2.1354vw; /* 41 */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4167vw; /* 8 */
  width: 13.3333vw; /* 256 */
  height: 3.3333vw; /* 64 */
  border: 0.0781vw solid #1a1a1a; /* 1.5 */
  border-radius: 128px;
  background: #f5f4f0;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--f-semibold);
  font-weight: 600;
  font-size: 1.0417vw; /* 20 */
  line-height: 1.3; /* 26 */
  letter-spacing: 0.026vw; /* 0.5 */
  white-space: nowrap;
  box-sizing: border-box;
  transition: background 0.2s ease;
}

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

.mhero__back:hover {
  background: #ffffff;
}


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

  .mhero,
  .mobile .mhero {
    display: block;
    height: auto;
    padding-inline-end: 0;
  }

  .mhero__media,
  .mobile .mhero__media {
    position: relative;
    inset: auto;
    display: block;
    height: 80vw; /* 300 */
    background: #f5f4f0;
  }

  /* the mobile frames use their own -m.png in a 402x300 slot and crop it
     centred, so the desktop per-model placement must not leak down here */
  .mhero__still,
  .mobile .mhero__still,
  .mhero[data-model] .mhero__still,
  .mobile .mhero[data-model] .mhero__still {
    position: static;
    width: 100%;
    height: 100%;
    left: auto;
    top: auto;
    transform: none;
    object-fit: cover;
  }

  .mhero__panel,
  .mobile .mhero__panel {
    gap: 2.1333vw; /* 8 */
    padding: 8.5333vw 4.2667vw; /* 32 / 16 */
  }

  .mhero__head,
  .mobile .mhero__head {
    gap: 2.1333vw; /* 8 */
  }

  .mhero__logo,
  .mobile .mhero__logo {
    width: 8.1778vw; /* 30.67 */
    height: 10.6667vw; /* 40 */
  }

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

  .mhero__offer,
  .mobile .mhero__offer {
    gap: 0;
  }

  /* Desktop puts this at the title's own 44. Mobile cannot: the panel is the
     full 402 frame, so its inner box is ~352 and "RENAULT NOVEMBER SALE" at
     the mobile title size (32) measures ~436 — it was being cut off at the
     panel edge. 25 is the largest size that still holds the line in one
     piece here (~340 of the 352), which is what the PM asked to protect. */
  .mhero__kicker,
  .mobile .mhero__kicker {
    margin-bottom: 1.0667vw; /* 4 */
    font-size: 6.6667vw; /* 25 */
    line-height: 1.28; /* 32 */
  }

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

  .mhero__was,
  .mobile .mhero__was {
    font-size: 6.4vw; /* 24 */
    line-height: 1.25;
  }

  .mhero__rule,
  .mobile .mhero__rule {
    width: 64.2667vw; /* 241 */
    height: 1.0667vw; /* 4 */
  }

  .mhero__lead,
  .mobile .mhero__lead {
    font-size: 7.4667vw; /* 28 */
    line-height: 1.2857; /* 36 */
  }

  /* The scroll cue is desktop-only. `.only_desktop` keys off the body.mobile
     UA class, so it still shows in a narrow desktop window — hide by viewport
     too, the way the Figma mobile frame has it. */
  .mhero__more,
  .mobile .mhero__more {
    display: none;
  }

  /* Figma "Button" — pinned top-left over the still, hugging its content */
  .mhero__back,
  .mobile .mhero__back {
    position: absolute;
    top: 4.2667vw; /* 16 */
    left: 4.1333vw; /* 15.5 */
    right: auto;
    width: auto;
    height: auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.1333vw; /* 8 */
    padding: 2.1333vw 4.2667vw; /* 8 / 16 */
    border: 0.4vw solid #1a1a1a; /* 1.5 */
    border-radius: 128px;
    background: #f5f4f0;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--f-semibold);
    font-weight: 600;
    font-size: 4.2667vw; /* 16 */
    line-height: 1.5; /* 24 */
    letter-spacing: 0.1333vw; /* 0.5 */
    white-space: nowrap;
  }

  .mhero__back img,
  .mobile .mhero__back img {
    display: block;
    width: 4.2667vw; /* 16 */
    height: 4.2667vw;
  }
}