/* ===========================================================
   hero.css — HERO (scaled-stage pattern, claude-html §3.8/VV)
   Figma frame 2010:2 = 1920 × 983 (canvas y -61..922)
   stage_y = canvas_y + 61
   =========================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 0;            /* fill exactly 100vh — no extra navy space on short-height screens */
  overflow: hidden;
  background: var(--navy-deep);
  display: flex;
  justify-content: center;     /* center the 1920 frame; navy-deep fills the sides on >1920 */
}

/* ---------- Frame: caps composition at 1920, scales to fit, never upscales ---------- */
.hero__frame {
  position: relative;
  z-index: 5;                  /* content above the full-bleed backgrounds */
  flex: none;
  align-self: flex-start;      /* top-align: nav/badge stay at viewport top */
  width: 1920px;
  height: 983px;
  transform: scale(min(calc(100vw / 1920px), calc(100vh / 983px), 1));
  transform-origin: top center;
}

/* ---------- Full-bleed backgrounds (fill 100% viewport width, any size) ---------- */
.hero__bg-video {                 /* Israeli flag — waving video */
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}
.hero__navy-right {               /* right navy gradient panel — responsive, backs the headline */
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(16,67,124,0) 44%, var(--navy) 74%, var(--navy) 100%);
  z-index: 1;
}
.hero__shade-top {                /* navy fade at very top for badge/buttons readability */
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 257px;
  background: linear-gradient(to bottom, rgba(16,67,124,0.85) 0%, rgba(16,67,124,0) 100%);
  z-index: 1;
}
.hero__shade-bottom {             /* deep-navy fade into next section */
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 210px;
  background: linear-gradient(to bottom, rgba(12,29,55,0) 0%, var(--navy-deep) 100%);
  z-index: 2;
}

/* ---------- Stage (static layer inside the scaled frame) ---------- */
.hero__stage {
  position: absolute;
  top: 0; left: 0;
  width: 1920px;
  height: 983px;
  z-index: 5;
}

/* ---------- Portrait (video placeholder) ---------- */
.hero__portrait {
  position: absolute;
  left: 498px; top: 183px;
  width: 394px; height: 701px;
  border-radius: var(--r-img);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.hero__portrait img,
.hero__portrait-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Round play button — centered inside .hero__portrait (394×701). Glass look. */
.hero__mute {
  position: absolute;
  left: 140px; top: 294px;          /* (394-114)/2 , (701-114)/2 → centered on the portrait */
  width: 114px; height: 114px;
  z-index: 7;
  border: 1px solid #F0C723; border-radius: 50%;
  background: transparent;
  -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity .5s ease, transform .12s ease, box-shadow .15s ease;
}
.hero__mute:hover  { box-shadow: 0 0 0 5px rgba(240,199,35,.25), 0 6px 22px rgba(0,0,0,.35); }
.hero__mute:active { transform: scale(.94); }
.hero__mute-icon { width: 44px; height: 55px; margin-left: 6px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
/* visible while paused (poster showing); fades out while the video plays */
.hero__mute:not(.is-paused) { opacity: 0; pointer-events: none; }

/* ---------- Headline ---------- */
/* full-stage decorative text layer — must NOT intercept clicks on the buttons beneath it */
.hero__headline { position: absolute; top: 0; left: 0; width: 1920px; height: 983px; z-index: 6; pointer-events: none; }
.hero__line {
  position: absolute;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  color: var(--white);
  font-size: 124px;
  line-height: 136px;
  text-align: right;
  white-space: nowrap;
}
.hero__line--1 {                                 /* שי קלך — lime highlight (like the goal pill) */
  left: auto; right: 381px; top: 212.83px; width: auto;
  background: var(--lime); color: var(--navy);
  padding: 0 18px;
}
.hero__line--2 { left: 1099.85px; top: 331.83px; width: 564px; } /* מחזירים את הכוח */
.hero__line--3 { left: 1490px; top: 453px;   width: 168px; }     /* לעם */

.hero__avatar {
  position: absolute;
  left: 1560.15px; top: 229.27px;
  width: 99.85px; height: 99.85px;
  border-radius: 50%;
  z-index: 7;
}
.hero__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.hero__likud-word {                /* Figma 2239:9617 — Likud wordmark as image, aligned to "לעם" */
  position: absolute;
  left: 1159px; top: 430px;
  width: 415px;
  z-index: 6;
}
.hero__likud-word img { width: 100%; height: auto; display: block; }

/* ---------- Goal banner ---------- */
.hero__goal {
  position: absolute;
  left: 1067px; top: 595px;
  width: 591px; height: 50px;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 12px;
  z-index: 6;
}
.hero__goal-line {                /* white "הקול שלכם בפריימריז קובע" */
  color: var(--white);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 28px;
  line-height: 47.204px;
  letter-spacing: 1.4px;
  white-space: nowrap;
  order: 2;                       /* left side */
}
.hero__goal-pill {                /* lime chip "המטרה: לחזק את הליכוד" (2026 redesign) */
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lime);
  color: var(--navy);
  border-radius: var(--r-sm);
  height: 50px; padding: 0 18px;
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: 36px;
  line-height: 47.204px;
  letter-spacing: 1.4px;
  white-space: nowrap;
  order: 1;                       /* right side */
}
.hero__goal-pill strong { font-weight: var(--w-bold); }

/* ---------- Tagline ---------- */
.hero__tagline {
  position: absolute;
  left: 975px; top: 672px;
  width: 682px;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 27px;
  line-height: 36px;   /* normalized 24→27 to match about__bio body size (2026-07-02) */
  text-align: right;
  z-index: 6;
}
.hero__tagline strong { font-weight: var(--w-bold); }

/* ---------- Bottom CTAs ---------- */
.hero__cta-row { position: absolute; z-index: 6; }
.hero__cta {
  position: absolute;
  height: 59px;
  padding: 0 28px;
  font-size: 38px;
  line-height: 23.851px;
  letter-spacing: 1.14px;
}
.hero__cta--know {                /* רוצה להכיר את שי — filled, with « */
  left: 1380px; top: 779px; width: 278px;   /* raised 30px (was 809) */
  flex-direction: row-reverse;
}
.hero__cta--know .btn__icon { width: 35px; height: 35px; }
.hero__cta--update2 {             /* קבל עדכון — outlined */
  left: 1029px; top: 779px; width: 337px;   /* raised 30px (was 809) */
}
/* Figma comment hovers: know→white, update2→#C0E4F5 + #10437C text */
.hero__cta--know:hover    { background: var(--white); color: var(--navy); }
.hero__cta--update2:hover { background: #c0e4f5; border-color: #c0e4f5; color: #10437c; }

/* ---------- BIG DEAL stats strip (2026 redesign) — Figma 2143:6802 ---------- */
.hero__bigdeal {            /* Figma 2143:6802 — 38px, right edge at x1660, sized to content */
  position: absolute;
  right: 260px; left: auto; top: 888px;
  width: max-content; max-width: 1760px; height: 66px;
  display: flex; align-items: stretch;
  border-radius: 12px; overflow: hidden;
  background: rgba(255,250,250,0.30);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font-display);
  z-index: 7;                /* above the petek */
}
.hero__bigdeal-label {
  flex: 0 0 auto;
  background: var(--lime); color: #0d2749;
  font-weight: var(--w-bold);
  display: flex; align-items: center; padding: 0 22px;
  font-size: 38px; line-height: 1; white-space: nowrap; letter-spacing: .4px;
}
.hero__bigdeal-stat {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  color: #10437c; font-weight: var(--w-regular);
  font-size: 38px; line-height: 1; white-space: nowrap; padding: 0 22px;
}
.hero__bigdeal-stat strong { font-weight: var(--w-bold); }
.hero__bigdeal-stat b { font-weight: var(--w-bold); }
.hero__bigdeal-sep { flex: 0 0 1px; align-self: stretch; background: rgb(16 67 124); margin: 0; }

/* ---- ticker (repeater; scrolls sideways when > 3 items — like netsach-israel.org) ---- */
.hero__bigdeal-scroll { display: flex; align-items: center; overflow: hidden; min-width: 0; background: #fff; }
.hero__bigdeal-track  { display: flex; align-items: stretch; width: max-content; }
/* non-scroll: hug content, drop the trailing separator */
.hero__bigdeal:not(.hero__bigdeal--scroll) .hero__bigdeal-track > .hero__bigdeal-sep:last-child { display: none; }
/* scroll: fixed width, animate the track (2× content for a seamless loop) */
.hero__bigdeal--scroll { width: min(1126px, 82vw); }
.hero__bigdeal--scroll .hero__bigdeal-scroll { flex: 1 1 auto; direction: ltr; }
.hero__bigdeal--scroll .hero__bigdeal-track { animation: hero-bigdeal-ticker 30s linear infinite; }
.hero__bigdeal--scroll .hero__bigdeal-scroll:hover .hero__bigdeal-track { animation-play-state: paused; }
@keyframes hero-bigdeal-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Petek (single Figma image) ----------
   Anchored to the hero BOTTOM-left (out of the scaled frame), responsive:
   stays pinned at the bottom of the hero at every screen size, capped at design size. */
.hero__petek {
  position: absolute;
  left: 1.2vw; bottom: 0;
  width: min(32.5vw, 624px);
  z-index: 6;
  pointer-events: none;        /* decorative — never block clicks */
}
.hero__petek img { width: 100%; height: auto; display: block; }