/* Первый экран Валентина (фрейм макета zGzHO / RLQMo).

   Высота на десктопе 842px - на 82px больше фрейма макета (760px).
   Причина та же, что у Хэллоуина: в макете кнопка вылезает за низ
   фрейма (здесь на 19px) и срезается его краем. Решение заказчика
   15.10.2026 - нарастить экран до зазора 63px под кнопкой, внутренние
   координаты макета не трогать. Сверка первого экрана теперь даёт
   "размеры не совпадают", см. tools/qa/валентин.sh.
   Содержимое
   разложено абсолютными координатами x/y из макета относительно секции.
   На телефоне - обычный поток сверху вниз (как в RLQMo): пометка про
   видео → текст → розовое пятно (поверх) → конверт, поэтому разметка в
   tpl уже в телефонном порядке, а десктопу позиции назначает этот файл.

   Конверт справа - не картинка, а вёрстка (клапан, марка, штемпель,
   адрес): в дампе макета это отдельные векторные слои и текст, а не один
   растровый экспорт. Марка внутри - готовый png decor (vl-heart.png из
   экспорта ДЕКОР_Валентин), а не значок из общего спрайта icons.tpl -
   его трогать нельзя (общий файл, параллельно правят другие праздники). */

.vl-hero {
  position: relative;
  overflow: hidden;
  height: 842px;
}

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

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

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

.vl-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay);
}

.vl-hero__spot {
  position: absolute;
  left: -180px;
  top: -260px;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  /* closest-side обязателен - иначе CSS тянет градиент до дальнего угла
     квадрата, а в макете он кончается ровно на краю фигуры (см.
     docs/prazdniki.md, причина 4). */
  background: radial-gradient(
    circle closest-side,
    color-mix(in srgb, var(--accent) 20%, transparent) 0%,
    color-mix(in srgb, var(--accent) 0%, transparent) 100%
  );
}

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

.vl-hero__content {
  position: absolute;
  left: 72px;
  top: 104px;
  z-index: 1;
  width: 720px;
  display: flex;
  flex-direction: column;
}

.vl-hero__h1 {
  margin: 44px 0 0;
  width: 100%;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 68px;
  line-height: 71px;   /* 68 x 1.05 = 71.4, в макете строка целая - 71 */
  letter-spacing: -2.4px;
  color: var(--text);
}

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

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

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

.vl-hero__fact:first-child { padding-left: 0; }

.vl-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);
}

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

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

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

.vl-hero__btn {
  display: inline-flex;
  padding: 19px 34px;
  background: var(--accent);
  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;
}

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

/* ─── Конверт ────────────────────────────────────────────────── */

.vl-hero__envelope {
  position: absolute;
  left: 880px;
  top: 170px;
  z-index: 1;
  width: 460px;
  height: 320px;
  box-sizing: border-box;
  background: var(--paper-h);
  border-radius: var(--r-card);
  /* Обводка внутренняя - обычный border сдвинул бы детей на 1px. В дампе
     (utzHl/g1MQQt) strokeWidth:2, не 1 - в этом была часть расхождения
     по пикселям у конверта. */
  box-shadow: inset 0 0 0 2px var(--line-h);
}

.vl-hero__env-flap {
  position: absolute;
  left: 0;
  top: 150px;
  width: 100%;
  height: 2px;
  background: var(--line-h);
}

.vl-hero__env-stamp {
  position: absolute;
  left: 346px;
  top: 24px;
  width: 86px;
  height: 100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  background: var(--bg-soft);
  border-radius: var(--r-field);
  /* В дампе (lm000/j3KfG5) strokeWidth:2. */
  box-shadow: inset 0 0 0 2px var(--accent);
}

.vl-hero__env-stamp-icon { display: block; }

.vl-hero__env-stamp-v {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
  line-height: 18px;   /* метрика Manrope x1.36: 13 x 1.36 = 17.68 */
  color: var(--accent-2);
}

.vl-hero__env-to {
  position: absolute;
  left: 40px;
  top: 186px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;   /* 12 x 1.21 */
  letter-spacing: 2px;
  color: var(--text-3);
}

.vl-hero__env-name {
  position: absolute;
  left: 40px;
  top: 206px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 30px;
  line-height: 41px;   /* метрика Manrope x1.36: 30 x 1.36 = 40.8 */
  letter-spacing: -.8px;
  color: var(--text);
}

.vl-hero__env-addr {
  position: absolute;
  left: 40px;
  top: 248px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 18px;   /* 15 x 1.21 */
  color: var(--text-2);
}

.vl-hero__env-postmark {
  position: absolute;
  left: 212px;
  top: 34px;
  width: 118px;
  height: 118px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 999px;
  /* box-sizing:border-box уже держит обводку внутри 118x118 - здесь
     достаточно поправить саму ширину: в дампе (liyC5/xSHPE) strokeWidth:2. */
  border: 2px solid var(--accent);
  opacity: .75;
}

.vl-hero__env-postmark-d {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 17px;
  line-height: 23px;   /* метрика Manrope x1.36: 17 x 1.36 = 23.12 */
  letter-spacing: .5px;
  color: var(--accent-text);
}

.vl-hero__env-postmark-y {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  line-height: 12px;   /* 10 x 1.21 */
  letter-spacing: 1.5px;
  color: var(--accent-text);
}

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

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

  .vl-hero__overlay {
    /* Цвет и альфа - 1 в 1 из макета (узел XmEM1, фрейм RLQMo): градиент
       строится из #FFE7F1 (--bg-soft), а не из --bg (#FFF7FA) - подмена
       токена давала более бледную плашку и расходилась с макетом по
       каждому символу текста поверх неё (мягкий градиент, не сплошной
       цвет - сглаживание букв чувствительно к фону). Тот же приём, что
       в --overlay для десктопа: буквальный hex+альфа, не color-mix. */
    background: linear-gradient(
      180deg,
      #FFE7F1FC 0%,
      #FFE7F1F7 50%,
      #FFE7F1E8 100%
    );
  }

  .vl-hero__content {
    /* position:static убирал элемент из списка позиционированных слоёв, и
       фон (.vl-hero__bg, position:absolute, первый в DOM) рисовался поверх
       неё целиком - на телефоне заголовок, лид и факты были не видны.
       position:relative возвращает колонку в тот же слой, но без явного
       сброса left/top у неё "оживают" десктопные left:72px/top:104px - их
       тоже нужно занулить, иначе relative сдвигает блок на эти же 72/104px. */
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .vl-hero__h1 {
    margin-top: 4px;
    font-size: 31px;
    line-height: 33px;   /* 31 x 1.08 = 33.48, в макете строка целая - 33 */
    letter-spacing: -1px;
  }

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

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

  .vl-hero__fact { padding: 0; }

  .vl-hero__fact-v { font-size: 18px; line-height: 25px; letter-spacing: -.3px; }
  .vl-hero__fact-s { font-size: 11px; line-height: 13px; }

  .vl-hero__sep { display: none; }

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

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

  .vl-hero__spot {
    left: -140px;
    top: -160px;
    width: 560px;
    height: 560px;
  }

  .vl-hero__envelope {
    /* z-index не сбрасываем - без него конверт возвращался в тот же
       слой, что фон и пятно (оба z-index:auto), и порядок между ними
       решал порядок в DOM, а не желаемое "конверт поверх фона". С
       z-index:1 с десктопа конверт остаётся над фоном и пятном. */
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 230px;
  }

  .vl-hero__env-flap { top: 110px; }

  .vl-hero__env-stamp { left: 250px; top: 16px; width: 70px; height: 84px; }
  .vl-hero__env-stamp-v { font-size: 12px; line-height: 16px; }   /* 12 x 1.36 = 16.32 */

  .vl-hero__env-to { left: 40px; top: 140px; }

  .vl-hero__env-name { left: 40px; top: 158px; font-size: 24px; line-height: 33px; }   /* 24 x 1.36 = 32.64 */

  .vl-hero__env-addr { left: 40px; top: 192px; font-size: 13px; line-height: 16px; }   /* 13 x 1.21 = 15.73 */

  .vl-hero__env-postmark { left: 140px; top: 20px; width: 92px; height: 92px; }

  .vl-hero__env-postmark-d { font-size: 15px; line-height: 20px; }   /* 15 x 1.36 = 20.4 */
  .vl-hero__env-postmark-y { font-size: 10px; line-height: 12px; }
}