/* Первый экран Пасхи (фрейм макета lXQdX / T0uAmo).

   Высота на десктопе фиксированная, как в макете (760px), содержимое
   разложено абсолютными координатами x/y из макета относительно секции.
   На телефоне у секции своя вертикальная раскладка (как в T0uAmo) - там
   те же блоки идут обычным потоком сверху вниз.

   Пасха - единственный светлый праздник: фон светлый (--bg-soft), подложка
   и пятна - не темнота с сиянием тыквы, а мягкий мятный градиент с двумя
   цветными пятнами (жёлтое "солнце", розовое). В макете нет отдельной
   карточки живого отсчёта - только строка фактов, поэтому её здесь нет
   (в отличие от Хэллоуина).

   Цвета - токены палитры праздника из tokens.css ([data-holiday="easter"]),
   альфа-варианты собраны через color-mix от токена, а не захардкожены
   отдельным цветом. */

.ea-hero {
  position: relative;
  overflow: hidden;
  height: 760px;
}

/* ─── Фон: кадр/видео, мятная подложка, пятна ───────────────── */

.ea-hero__bg {
  position: absolute;
  inset: 0;
}

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

/* Подложка - готовый токен: это ровно линейный градиент макета. */
.ea-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
}

.ea-hero__sun {
  position: absolute;
  left: 880px;
  top: -180px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  /* closest-side обязателен - иначе CSS растянет градиент до дальнего
     угла квадрата, и пятно станет шире и ярче, чем в макете. */
  background: radial-gradient(
    circle closest-side,
    color-mix(in srgb, var(--accent-2) 35%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 0%, transparent) 100%
  );
}

.ea-hero__pink {
  position: absolute;
  left: -140px;
  top: 380px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    color-mix(in srgb, var(--accent-3) 35%, transparent) 0%,
    color-mix(in srgb, var(--accent-3) 0%, transparent) 100%
  );
}

/* ─── Декор: яйцо, кролик, корзинка ─────────────────────────── */

.ea-hero__decor { display: contents; }

.ea-hero__egg {
  position: absolute;
  left: 1000px;
  top: 200px;
  z-index: 1;
  width: 160px;
  height: 160px;
}

.ea-hero__rabbit {
  position: absolute;
  left: 1180px;
  top: 400px;
  z-index: 1;
  width: 160px;
  height: 160px;
}

.ea-hero__basket {
  position: absolute;
  left: 960px;
  top: 470px;
  z-index: 1;
  width: 160px;
  height: 160px;
  opacity: .95;
}

/* ─── Текстовая колонка ──────────────────────────────────────── */

.ea-hero__content {
  position: absolute;
  left: 72px;
  top: 96px;
  z-index: 1;
  width: 740px;
  display: flex;
  flex-direction: column;
}

.ea-hero__h1 {
  margin: 44px 0 0;
  width: 100%;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 62px;
  line-height: 66px;   /* 62 x 1.06 */
  letter-spacing: -2.2px;
  color: var(--text);
}

.ea-hero__lead {
  margin: 26px 0 0;
  max-width: 640px;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 33px;   /* 19 x 1,75 = 33,25, в макете строка целая - 33 */
  color: var(--text-2);
}

.ea-hero__facts {
  margin: 36px 0 0;
  display: flex;
  align-items: center;
}

.ea-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 26px;
}

.ea-hero__fact-v {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  line-height: 27px;   /* 20 x 1.36 */
  letter-spacing: -.4px;
  color: var(--text);
}

.ea-hero__fact-s {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 15px;   /* 12 x 1.21 */
  color: var(--text-3);
}

.ea-hero__sep {
  width: 1px;
  height: 34px;
  background: var(--line-h);
}

.ea-hero__action {
  margin: 36px 0 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.ea-hero__btn {
  display: inline-flex;
  padding: 19px 34px;
  background: var(--magenta);
  color: #FFFFFF;
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;   /* 15 x 1.21 */
  text-decoration: none;
  white-space: nowrap;
}

.ea-hero__btn-note {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 16px;   /* 13 x 1.21 */
  color: var(--text-3);
}

/* ─── Телефон: обычный поток сверху вниз, как в макете T0uAmo ─── */

@media (max-width: 860px) {
  .ea-hero {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 44px 20px;
  }

  .ea-hero__overlay {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-soft) 99%, transparent) 0%,
      color-mix(in srgb, var(--bg-soft) 97%, transparent) 50%,
      color-mix(in srgb, var(--bg-soft) 91%, transparent) 100%
    );
  }

  .ea-hero__sun,
  .ea-hero__pink {
    left: -140px;
    top: -160px;
    width: 560px;
    height: 560px;
  }

  /* Картинки прижаты к левому краю колонки, а не по центру: в макете
     рисунок внутри своего квадрата 160x160 стоит у левого края полосы
     (яйцо 38..123, кролик 22..138, корзинка 19..142 от края колонки),
     и в наших PNG он лежит ровно так же. По центру они уезжали вправо
     на 80 px - это давало 9,3 % расхождения на первом экране телефона. */
  .ea-hero__decor {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    position: relative;
    z-index: 1;
  }

  .ea-hero__egg,
  .ea-hero__rabbit,
  .ea-hero__basket {
    position: static;
  }

  .ea-hero__content {
    position: static;
    width: 100%;
  }

  .ea-hero__h1 {
    margin-top: 4px;
    font-size: 31px;
    line-height: 33px;   /* 31 x 1.08 = 33,48 */
    letter-spacing: -1px;
  }

  .ea-hero__lead {
    margin-top: 4px;
    max-width: 100%;
    font-size: 18px;
    line-height: 32px;   /* 18 x 1,75 = 31,5, в макете строка целая - 32 */
  }

  .ea-hero__facts {
    margin-top: 4px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* 18 x 1.36 = 24,48, но в макете у этой строки фактов целая высота
     25px (как у hw-hero__fact-v в Хэллоуине - тот же узел, тот же кегль):
     25 + 4 + 13 = 42, ровно высота карточки факта. */
  .ea-hero__fact-v { font-size: 18px; line-height: 25px; letter-spacing: -.3px; }
  .ea-hero__fact-s { font-size: 11px; line-height: 13px; }   /* 11 x 1.21 */

  .ea-hero__sep { display: none; }

  .ea-hero__action {
    margin-top: 4px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ea-hero__btn { font-size: 14px; line-height: 17px; }        /* 14 x 1.21 */
  .ea-hero__btn-note { font-size: 12px; line-height: 15px; }   /* 12 x 1.21 */
}