/* Hero — Figma 3016:7573, y 0–1224.
   Верх: фото 1440×624 с play-кнопкой. Низ (полоса 624–1224): фото со сдвигом влево
   на 197px + белый градиент справа налево, поверх — заголовочный блок (Group 78). */

.hero {
  position: relative;
  height: calc(1224 * var(--u));
}

/* ---------- Верхнее фото + play ---------- */
.hero__top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(624 * var(--u));
  overflow: hidden;
}

.hero__top img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play: круг navy 225×225 на (608,217), белый треугольник 129×129 по центру */
.hero__play {
  position: absolute;
  left: calc(608 * var(--u));
  top: calc(217 * var(--u));
  width: calc(225 * var(--u));
  height: calc(225 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* В Figma заливки круга и треугольника — с opacity 0.7 */
  background: rgba(13, 44, 72, 0.7);
  transition: transform var(--transition-base), filter var(--transition-base);
}

.hero__play svg {
  opacity: 0.7;
}

.hero__play:hover {
  transform: scale(1.05);
  filter: brightness(1.15);
}

.hero__play svg {
  width: calc(129 * var(--u));
  height: calc(129 * var(--u));
}

/* ---------- Нижняя полоса с заголовком ---------- */
.hero__band {
  position: absolute;
  top: calc(624 * var(--u));
  left: 0;
  width: 100%;
  height: calc(600 * var(--u));
  overflow: hidden;
}

/* Фото сдвинуто влево на 197px (Figma 3016:7574). Physical left + ltr —
   чтобы RTL-контекст не зеркалил декоративную раскладку. */
.hero__band-photo {
  position: absolute;
  left: calc(-197 * var(--u));
  top: 0;
  width: calc(1440 * var(--u));
  height: calc(600 * var(--u));
  object-fit: cover;
  direction: ltr;
}

/* Белая вуаль: white 100% на 21.2% → прозрачно к левому краю (Figma 3016:7575) */
.hero__band-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, #fff 21.2%, rgba(255, 255, 255, 0) 100%);
}

/* Заголовок «הלב שלך התעורר?» — Noto 200/128, box 946×148 на (247,117) */
.hero__title {
  position: absolute;
  left: calc(247 * var(--u));
  top: calc(117 * var(--u));
  width: calc(946 * var(--u));
  font-size: calc(128 * var(--u));
  font-weight: var(--fw-xlight);
  line-height: calc(148 * var(--u));
  text-align: center;
  white-space: nowrap;
  color: var(--color-ink);
}

/* Navy-плашка 683×70 на (494,262) */
.hero__plate {
  position: absolute;
  left: calc(494 * var(--u));
  top: calc(262 * var(--u));
  width: calc(683 * var(--u));
  height: calc(70 * var(--u));
  background: var(--color-navy);
}

/* «תקשיב לו ובוא אלינו!» — 900/69, белый, поверх плашки (box 685×98 на (481,245)) */
.hero__shout {
  position: absolute;
  left: calc(481 * var(--u));
  top: calc(245 * var(--u));
  width: calc(685 * var(--u));
  font-size: calc(69 * var(--u));
  font-weight: var(--fw-black);
  line-height: calc(94 * var(--u));
  text-align: right;
  color: var(--color-white);
}

/* «בית מדרש לבעלי תשובה ביבנה» — 400/53 (box 699×69 на (475,338)) */
.hero__sub {
  position: absolute;
  left: calc(475 * var(--u));
  top: calc(338 * var(--u));
  width: calc(699 * var(--u));
  font-size: calc(53 * var(--u));
  font-weight: var(--fw-regular);
  line-height: calc(72 * var(--u));
  text-align: right;
  color: var(--color-ink);
}

/* Золотая линия 683×7 r8 на (494,393) */
.hero__bar {
  position: absolute;
  left: calc(494 * var(--u));
  top: calc(393 * var(--u));
  width: calc(683 * var(--u));
  height: calc(7 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--color-gold);
}

/* CTA на (990,427) */
.hero__btn {
  position: absolute;
  left: calc(990 * var(--u));
  top: calc(427 * var(--u));
}

/* ---------- Mobile (база 414, макет спроектирован) ---------- */
@media (max-width: 767px) {
  .hero {
    height: auto;
  }

  .hero__top {
    position: relative;
    height: calc(300 * var(--u));
  }

  .hero__play {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(96 * var(--u));
    height: calc(96 * var(--u));
  }

  .hero__play:hover {
    transform: translate(-50%, -50%) scale(1.05);
  }

  .hero__play svg {
    width: calc(52 * var(--u));
    height: calc(52 * var(--u));
  }

  .hero__band {
    position: relative;
    top: auto;
    height: auto;
    padding: calc(44 * var(--u)) calc(24 * var(--u)) calc(52 * var(--u));
  }

  .hero__band-photo {
    left: 0;
    width: 100%;
    height: 100%;
  }

  .hero__band-veil {
    background: rgba(255, 255, 255, 0.88);
  }

  .hero__title,
  .hero__plate,
  .hero__shout,
  .hero__sub,
  .hero__bar,
  .hero__btn {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
  }

  .hero__title {
    font-size: calc(44 * var(--u));
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }

  /* Плашка на мобиле — вокруг текста, а не отдельный прямоугольник */
  .hero__plate {
    display: none;
  }

  .hero__shout {
    margin-top: calc(14 * var(--u));
    text-align: center;
    font-size: calc(31 * var(--u));
    line-height: 1.35;
  }

  .hero__shout-inner {
    display: inline-block;
    background: var(--color-navy);
    padding: calc(2 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u));
  }

  .hero__sub {
    margin-top: calc(10 * var(--u));
    text-align: center;
    font-size: calc(24 * var(--u));
    line-height: 1.4;
    color: var(--color-ink);
  }

  .hero__bar {
    margin: calc(10 * var(--u)) auto 0;
    width: calc(320 * var(--u));
    height: calc(5 * var(--u));
  }

  .hero__btn {
    display: flex;
    /* width возвращаем после группового сброса width: auto выше */
    width: calc(200 * var(--u));
    margin: calc(26 * var(--u)) auto 0;
  }
}