/* SECTION / Hero
   Desktop (Figma 1920 frame, content column 1440 => px / 19.2):
     HeroSection 1440x982 = still 1440x729 + black text band 1440x253.
     Inside the band: "h+p" 778 wide centred (h1 64/48 800, yellow accent
     220x5, p 22/27.5 400) and "more" pinned left (48px arrow + 22px label).
   Mobile (Figma 375 frame => px / 3.75): black emblem strip, the still below
   it, then the black text block (h1 40/48 800 two lines, p 20/28 400). */

.hero {
  background: var(--panel-bg);
  color: var(--panel-ink);
}

.hero__media {
  position: relative;
  display: block;
}

.hero__still {
  display: block;
  width: 100%;
  height: auto;
}

/* The film is 16:9 (1480x832) but the Figma hero box is 1440x729 on desktop and
   402x502 on mobile, so letting it keep its own ratio would retime the whole
   page (+106px at 1920) and break the 48 gradient overlap on mobile. Pin the
   Figma box with aspect-ratio and crop the film into it instead. */
.hero__video {
  aspect-ratio: 1440 / 729;
  height: auto;
  object-fit: cover;
  object-position: center;
  background: var(--panel-bg);
}

/* The Figma's hero fade was baked into the two still EXPORTS, not drawn as a
   layer (HeroImage 1232:10022 holds the bitmap and nothing else) — which is why
   a hard edge appeared the moment the film replaced them. Measured off those
   same exports: desktop is solid black for its last 35px and back to full scene
   by 105; mobile comes out of black over its first 90, half-strength at 36.
   Restored here as an overlay so the film dissolves into the black band exactly
   the way the stills did.

   The first pass drew that as a two-stop ramp, which reaches full black with a
   slope break — and the eye reads a slope break on a dark field as a line. At
   1920 the kink lands across the bright lane marking and shows up as a thin
   strip clipping it; at 1366 the same hero is only 519 tall instead of 729, so
   the artifact is there too but too small to notice. The stops below ride a
   smoothstep instead: alpha leaves 1 and arrives at 0 with no corner at either
   end, so there is nothing left to read as an edge, and the run is longer
   (160 instead of 105) for the same reason.
   Percentages, not vw: the hero column is 75vw, so at every width these are
   the same lengths the vw values resolved to — but tied to the picture itself
   they cannot drift away from it. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--panel-bg) 0,
    var(--panel-bg) 4.8%, /* 35 of 729 — fully black in the still */
    rgba(0, 0, 0, 0.94) 7.5%,
    rgba(0, 0, 0, 0.8) 10.5%,
    rgba(0, 0, 0, 0.58) 13.5%,
    rgba(0, 0, 0, 0.34) 16.5%,
    rgba(0, 0, 0, 0.14) 19.5%,
    rgba(0, 0, 0, 0) 22% /* 160 — scene back to full */
  );
}

/* ---------- black text band ---------- */
.hero__text {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 13.1771vw; /* 253 */
  padding: 1.6667vw 3.3333vw; /* 32 / 64 */
  box-sizing: border-box;
}

.hero__copy {
  width: 40.5208vw; /* 778 */
  max-width: 100%;
  text-align: center;
}

.hero__title {
  font-family: var(--f-extrabold);
  font-weight: 800;
  font-size: 3.3333vw; /* 64 */
  line-height: 0.75; /* 48 */
  margin: 0;
  color: var(--panel-ink);
}

/* NOVEMBER SALE — the campaign headline runs in the yellow accent instead of
   the panel white. Kept as a modifier so putting the Hebrew headline back is
   just dropping the class, with .hero__title itself untouched.

   nowrap: .hero__copy is the Figma's 778-wide text block, sized for the Hebrew
   headline. The campaign line needs ~1000 at 64, so without this it broke
   itself into "RENAULT NOVEMBER" / "SALE". The line is allowed to run wider
   than the copy block instead — text-align:center keeps it centred on the same
   axis, nothing clips it (the band is full-bleed with only 64 of padding), and
   .hero__brk still forces the designed two-line break at mobile, where <br>
   wins over nowrap. */
.hero__title--sale {
  color: var(--brand-accent);
  white-space: nowrap;
}

/* the Figma sets the hero head on one line at 1920 and breaks it at 375 */
.hero__brk {
  display: none;
}

/* Figma "Yellow Accent" 220x5, centred under the head */
.hero__rule {
  display: block;
  width: 11.4583vw; /* 220 */
  height: 0.2604vw; /* 5 */
  margin: 1.25vw auto 0; /* 24 */
  background: var(--brand-accent);
  border-radius: 999px;
}

.hero__lead {
  font-family: var(--f-regular);
  font-weight: 400;
  font-size: 1.1458vw; /* 22 */
  line-height: 1.25; /* 27.5 */
  margin: 1.25vw 0 0; /* accent ends 77, p starts 101 */
  color: var(--panel-ink);
}

/* ---------- "לכל הפרטים" scroll cue — Figma "more" 173x148 at the left ---------- */
.hero__more {
  position: absolute;
  left: 3.3333vw; /* 64 */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4167vw; /* 8 */
  color: var(--panel-ink);
  text-decoration: none;
  font-family: var(--f-regular);
  font-size: 1.1458vw; /* 22 */
  line-height: 1.2727; /* 28 */
  transition: transform 0.25s ease;
}

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

.hero__more:hover {
  transform: translateY(calc(-50% + 0.3vw));
}

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

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


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

  /* black strip carrying the emblem; the still overlaps it by 48 in the Figma,
     so the strip only needs to show its top 56px */
  /* z-index: the Figma fades the picture in OVER the emblem, not under it — the
     logo reads whole against the black and the film dissolves in behind it. The
     fade is painted by .hero__media::after, which is a later child and would
     otherwise cut the emblem in half, so the strip is lifted above it. */
  .hero__strip,
  .mobile .hero__strip {
    display: block;
    height: 14.9333vw; /* 56 visible */
    background: var(--panel-bg);
    position: relative;
    z-index: 1;
  }

  /* the strip art is 104 tall but only its top 56 sit above the film — the last
     48 hang over it, which is exactly the Figma overlap (Section Video starts at
     y=56). So it is taken out of flow and pinned to the top of the 56 box; the
     box keeps the height, the art keeps its 402:104 and spills down over the
     film, carrying its own black-to-transparent fade with it. */
  .hero__emblem,
  .mobile .hero__emblem {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
  }

  /* The film has the regulatory bar — the same "רמת אבזור בטיחותי / דרגות זיהום
     אוויר" strip model-legal draws — BURNED INTO the picture across its bottom
     37 of 832 rows (measured: the cut is at row 795). On desktop the 16:9 film
     has to lose height to reach the 1440x729 box and the bar falls outside the
     crop; on mobile the portrait box crops width only, so the full film height
     shows and the bar lands on the page.
     Fix without re-encoding: grow the element by exactly the bar's share
     (502 x 832/795 = 525.36, i.e. 23.36 of overscan), pin the film to the top,
     and let .hero__media clip the band off. The visible box stays 402x502, so
     the 48 overlap with .hero__text and the strip above are untouched.
     The negative margin is a percentage on purpose: margins resolve against the
     container's WIDTH, which is the same width the aspect-ratio is driven from,
     so the two stay locked together on any phone — a vw value would drift by
     the scrollbar. */
  .hero__media,
  .mobile .hero__media {
    overflow: hidden;
  }

  .hero__video,
  .mobile .hero__video {
    aspect-ratio: 402 / 525.36;
    object-position: center top;
    margin-bottom: -5.8119%; /* 23.36 / 402 */
  }

  /* Mobile fades the other way: the still came OUT of the emblem strip's black
     over its first 90px. The strip is 56 tall and is a sibling inside the same
     box, so the overlay starts below it and covers the film only. The BOTTOM
     fade on mobile is already drawn by .hero__text, which is pulled 48 up over
     the film with its own transparent-to-black gradient — so this edge stays
     clean here instead of being painted twice. */
  .hero__media::after,
  .mobile .hero__media::after {
    top: 14.9333vw; /* 56 — below the emblem strip */
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0,
      rgba(0, 0, 0, 0.5) 9.6vw, /* 36 — measured half-strength point */
      rgba(0, 0, 0, 0) 24vw /* 90 */
    );
  }

  /* Figma mobile "Section — Hero" (node 901:10317) does not butt against the
     still — it is pulled 48 up over it and painted with a transparent-to-black
     gradient, so the photo dissolves into the black band instead of ending on a
     hard horizontal edge. The Figma stop is 15.225% of the 340-tall block = 52,
     written here as a fixed length instead: a percentage would drift down the
     moment the lead paragraph wraps to an extra line on a narrower phone, and
     the fade has to finish just past the 48 overlap, not wherever the text
     happens to end. position/z-index keep it over the image it overlaps. */
  .hero__text,
  .mobile .hero__text {
    display: block;
    min-height: 0;
    position: relative;
    z-index: 1;
    margin-top: -12.8vw; /* 48 — the Figma overlap */
    padding: 12.8vw var(--gutter) 10.6667vw; /* 48 / 16 / 40 */
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0,
      var(--panel-bg) 13.8667vw /* 52 */
    );
    text-align: center;
  }

  .hero__copy,
  .mobile .hero__copy {
    width: 100%;
  }

  .hero__title,
  .mobile .hero__title {
    font-size: 10.6667vw; /* 40 */
    line-height: 1.2; /* 48 */
  }

  .hero__brk,
  .mobile .hero__brk {
    display: block;
  }

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

  .hero__lead,
  .mobile .hero__lead {
    font-size: 5.3333vw; /* 20 */
    line-height: 1.4; /* 28 */
    margin-top: 4.2667vw; /* 16 */
  }
}