/* Лендинг Envoy v4: первый экран. Компьютер: текст на 6 колонок, справа фото зала 4:5 и телефон, который заходит
   на фото на треть своей ширины; низ телефона по низу фото. Телефон и планшет: только экран гостя по центру. */

.hero { padding-block: calc(var(--head) + 48px) var(--sec-bottom); }
.hero .grid { row-gap: 48px; align-items: center; }
.hero-text { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; container-type: inline-size; }
/* Самая длинная строка h1 («Звук, свет, экраны») около 8,5 em: кегль не больше ширины колонки */
.hero-text .h1 { font-size: min(var(--fs-h1), 11.6cqi); }
.hero-text .lead { margin-top: 32px; }
.hero-text .lead + .lead { margin-top: 12px; }
.hero-acts { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.hero-art { grid-column: 1 / -1; position: relative; display: flex; flex-direction: column; align-items: center; }
.hero-photo { display: none; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--hall); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero .iphone { --w: 280px; }

@media (min-width: 1024px) {
  .hero { min-height: min(100svh, 1000px); display: grid; align-content: center; padding-block: calc(var(--head) + 32px) 32px; }
  .hero-text { grid-column: 1 / 7; }
  .hero-art { grid-column: 7 / 13; display: block; container-type: inline-size; }
  .hero .iphone { --w: max(46.7cqw, 250px); margin-left: 4cqw; }
  .hero-photo { display: block; position: absolute; right: 0; bottom: 0; width: 64.8cqw; aspect-ratio: 4 / 5; }
}

/* Без входной анимации: при загрузке ничего не едет. Фото зала проявляется только после экрана телефона
   (класс .ready ставит landing.js), низ фото выше низа телефона, чтобы край фото не выглядывал из-под корпуса */
.h1 .ln { display: block; }
@media (min-width: 1024px) {
  .hero-photo { bottom: 7cqw; opacity: 0; transition: opacity 360ms var(--ease); }
  .hero-art.ready .hero-photo { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero-photo { transition: none; } }