/* Правки шаблона INFLATE под Air Friday. Подключается последним: после стилей шаблона и preflight. */

/* --- первый экран: кнопка заказа рядом с «Смотреть» (в шаблоне на телефоне кнопки заказа на первом экране нет) */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}
.hero-order {
  display: none;
  min-height: 44px;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  border-radius: var(--radius-campaign);
  background: var(--cta-bg);
  color: var(--cta-ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.055em;
  white-space: nowrap;
}
@media (max-width: 960px) {
  /* в шапке на этой ширине остаётся только «Меню»: кнопка заказа встаёт на место «Смотреть»
     (её дублирует стрелка «Листайте» справа). Две кнопки сразу поднимали абзац на шары */
  .hero-order {
    display: inline-flex;
  }
  .hero-actions .enter {
    display: none;
  }
  .hero-introduction {
    width: min(330px, 100% - 56px);
  }
}

/* запасной заголовок (виден, только если WebGL не запустился и постер не загрузился) */
.hero-title .gap {
  width: 0.2em;
}

/* --- финал: телефон. На десктопе шар сцены останавливается сразу под ссылкой Telegram, поэтому номер стоит
   в абзаце над кнопкой; на телефоне шар висит над заголовком, и номер идёт строкой рядом с Telegram
   (третья строка абзаца там поднимала заголовок на подсказку у шара) */
.final-call {
  display: block;
}
.final-call a {
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.final-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 34px;
}
.final-tel {
  display: none;
}
@media (max-width: 760px) {
  .final-call {
    display: none;
  }
  .final-tel {
    display: inline-flex;
  }
}

/* --- «Внимание к деталям»: вторая строка длиннее, чем «touch.» шаблона, и на телефоне уходила за край */
@media (max-width: 760px) {
  .finishing-heading h2 {
    font-size: clamp(52px, 13.2vw, 96px);
  }
  .finishing-heading h2 span:last-child {
    margin-left: 6%;
  }
}

/* --- без скриптов: заставка не закрывает первый экран, вместо сцены — постер */
.no-js .loading,
.no-js #scene,
.no-js .hero-title {
  display: none;
}
.no-js .architecture {
  background-image: url(../img/arrival-poster.webp);
}
@media (max-width: 760px) {
  .no-js .architecture {
    background-image: url(../img/arrival-poster-mobile.webp);
  }
}

/* --- подвал */
.footer-brand address {
  margin-top: 18px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.78;
}

/* --- шаблон: у справочного окна нет полей — preflight (dialog{padding:0}) идёт после стилей шаблона
   и снимает общие 36px; у меню и окна направления поля заданы классом и уцелели */
.information-dialog {
  padding: 28px 36px 36px;
}
@media (max-width: 760px) {
  .information-dialog {
    padding: 20px 24px 28px;
  }
}

/* --- «направления.» длиннее, чем «installations.» шаблона: с нижним порогом кегля 68px слово шире экрана
   на телефонах до 414px — страница прокручивалась вбок */
@media (max-width: 760px) {
  .collections-section .occasions-intro h2 {
    font-size: min(112px, 16vw);
  }
}

/* --- финал на десктопе и планшете: абзац стал на строку длиннее (телефон), поля абзаца ужаты на ту же
   высоту — иначе ссылка Telegram опускается под шар сцены */
@media (min-width: 761px) {
  .final-content p {
    margin: 18px 0;
  }
  /* шаблон: шар финала висит на 26–38 % высоты окна, а блок прижат к подвалу, который заезжает на сцену
     на свои 485px. В окне выше 770px ссылка Telegram в конце страницы вставала прямо на шар (1440×900),
     ещё выше — на подсказку под ним. Нижнее поле растёт с высотой окна: низ ссылки остаётся над шаром */
  .final-section {
    padding-bottom: max(96px, calc(74.3svh - 478px));
  }
}

/* --- шаблон: кнопка-подсказка у шара финала (z-index 2) лежит поверх блока. Там, где шар оказывался под
   ссылкой или кнопкой, нажатие уходило шару, а подсказка печаталась поверх надписи кнопки */
.final-actions a {
  position: relative;
  z-index: 3;
}

/* --- шаблон: мелкие подписи. «Листайте» — 10px (на телефоне 9px), направления внизу первого экрана
   на телефоне — 10px (до 360px — 9px), номер над названием карточки — 10px. Подняты до 11px;
   на экране уже 340px три направления в 11px в строку не входят — там остаётся 10px */
.scroll-cue {
  font-size: 11px;
}
@media (max-width: 760px) {
  .category-nav a,
  .collection-caption .editorial-label {
    font-size: 11px;
  }
}
@media (max-width: 340px) {
  .category-nav a {
    font-size: 10px;
  }
}

/* --- карточка «Фотозоны и арки» на телефоне: кадр обрезается с боков до 1.15, и надпись на панно
   («… 1 годик!») срезалась левым краем — кадр сдвинут влево */
@media (max-width: 760px) {
  .collection-dinner img {
    object-position: 20% center;
  }
}

/* --- абзац первого экрана: на планшете, телефоне и в невысоком окне он ложится на нижние шары —
   добавлен светлый ореол */
.supporting-copy {
  text-shadow:
    0 0 3px #efe6d6,
    0 0 12px #efe6d6,
    0 0 22px #efe6d6;
}

/* --- подвал: «AIR FRIDAY» длиннее «INFLATE» и на планшете переносилось по слову; телефон не рвём */
.footer-brand .wordmark,
.site-footer a[href^="tel"] {
  white-space: nowrap;
}
@media (min-width: 761px) and (max-width: 1100px) {
  .footer-brand .wordmark {
    font-size: clamp(24px, 3.4vw, 36px);
  }
}