/* =============================================================
   perf-lite.css — оптимизация стоимости отрисовки.

   Подход: НЕ удаляем "матовое стекло" там, где оно видно, а убираем
   его там, где оно ничего не даёт визуально, и снижаем радиус там,
   где эффект должен остаться.

   Почему это работает:
   - backdrop-filter пересчитывается заново каждый кадр, пока под
     элементом что-то движется (скролл). Стоимость ~ площадь в
     физических пикселях, поэтому на ноутбуках с плотным экраном
     (Retina / 2x) она кратно выше.
   - Размытие плоского цвета или гладкого градиента математически
     почти не меняет картинку. Под карточками у нас именно градиент,
     то есть блюр там — оплаченная, но невидимая работа.
   - Реально эффект читается только там, где под стеклом ДЕТАЛИ:
     шапка поверх прокручивающегося текста и картинок.
   ============================================================= */

/* -------------------------------------------------------------
   1. ВСЕ УСТРОЙСТВА — снимаем то, что не видно вообще.
   ------------------------------------------------------------- */

/* Оверлей переходов между страницами: он на весь экран, а размытие
   всего 2px поверх фона с непрозрачностью 72% — глазом не различить.
   При этом каждый переход заставлял браузер размывать весь вьюпорт. */
.page-overlay {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* -------------------------------------------------------------
   2. СРЕДНИЙ ТИР — обычные ноутбуки и ПК.
      Стекло остаётся, но дешевеет.
   ------------------------------------------------------------- */

/* Шапка при скролле — единственное место, где стекло реально читается
   (под ним движется контент). Радиус 19px -> 10px: визуально почти
   то же самое, а ядро размытия примерно вдвое дешевле. */
body.balanced-visual-budget header.is-scrolled {
  -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;
}

/* Крупные поверхности: площадь большая, а деталей под ними нет. */
body.balanced-visual-budget footer,
body.balanced-visual-budget .service-info-section,
body.balanced-visual-budget .service-plans-section,
body.balanced-visual-budget .home-info-section {
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}

/* Карточки и панели лежат на гладком градиенте — размытие градиента
   даёт тот же градиент. Убираем размытие, полупрозрачный фон карточки
   остаётся, вид не меняется. Это снимает десятки отдельных проходов. */
body.balanced-visual-budget .card,
body.balanced-visual-budget .block,
body.balanced-visual-budget .price-card,
body.balanced-visual-budget .how-card,
body.balanced-visual-budget .faq-item,
body.balanced-visual-budget .faq-sticky,
body.balanced-visual-budget .review,
body.balanced-visual-budget .contact-card,
body.balanced-visual-budget .lang-options,
body.balanced-visual-budget .home-service-shortcut,
body.balanced-visual-budget .trust-bar {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Слои композитора держат видеопамять даже без анимации.
   Шапку не трогаем — там will-change нужен для её сдвига при скролле. */
body.balanced-visual-budget *:not(header):not(header *),
body.balanced-visual-budget *:not(header)::before,
body.balanced-visual-budget *:not(header)::after {
  will-change: auto !important;
}

/* -------------------------------------------------------------
   3. СЛАБЫЙ ТИР — телефоны, ПК с 4 ГБ / 4 ядрами, экономия трафика.
      Здесь стекло дороже, чем красивее: снимаем полностью.
   ------------------------------------------------------------- */

body.low-visual-budget *:not(header):not(header *),
body.low-visual-budget *:not(header)::before,
body.low-visual-budget *:not(header)::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.low-visual-budget *:not(header):not(header *),
body.low-visual-budget *:not(header)::before,
body.low-visual-budget *:not(header)::after {
  will-change: auto !important;
}


/* Декоративные бесконечные анимации фона: постоянная перерисовка
   впустую расходует батарею. Контентные анимации не трогаем. */
body.low-visual-budget .home-gradient-bg,
body.low-visual-budget [class*="gradient-bg"],
body.low-visual-budget .service-hero::before,
body.low-visual-budget .service-hero::after,
body.low-visual-budget .hero::before,
body.low-visual-budget .hero::after {
  animation: none !important;
  filter: none !important;
}

/* Тени с большим радиусом тоже растрируются заново — упрощаем. */
body.low-visual-budget .card,
body.low-visual-budget .block,
body.low-visual-budget .price-card,
body.low-visual-budget .how-card,
body.low-visual-budget .faq-item,
body.low-visual-budget .contact-card,
body.low-visual-budget .review {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

/* -------------------------------------------------------------
   4. СИСТЕМНЫЕ НАСТРОЙКИ ПОЛЬЗОВАТЕЛЯ — на всех устройствах.
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Пользователь просил меньше прозрачности (настройка ОС) — уважаем. */
@media (prefers-reduced-transparency: reduce) {
  *:not(header):not(header *),
  *:not(header)::before,
  *:not(header)::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* -------------------------------------------------------------
   5. АДАПТИВ: стрелки промо-слайдера не должны уезжать за экран.

   Стрелки намеренно вынесены за край слайдера на половину своей
   ширины (--promo-arrow-x: -50% / 50%) — на широких мониторах для
   этого есть место. Правило @media (max-width:1180px) задвигало их
   обратно внутрь, но следом идёт
   @media (min-width:761px) .home-opening-frame .home-promo-slider__arrow,
   у которого специфичность выше — и в диапазоне 761...1180px он снова
   выдвигал стрелки наружу. На таком экране слайдер занимает почти всю
   ширину, поэтому стрелки вылезали за вьюпорт и обрезались
   (у body стоит overflow-x: clip, так что вместо прокрутки — обрез).
   ------------------------------------------------------------- */
@media (max-width: 1180px) {
  .home-promo-slider__arrow,
  .home-promo-slider__arrow:first-child,
  .home-promo-slider__arrow:last-child,
  .home-opening-frame .home-promo-slider__arrow,
  .home-opening-frame .home-promo-slider__arrow:first-child,
  .home-opening-frame .home-promo-slider__arrow:last-child {
    --promo-arrow-x: 0 !important;
  }
}

/* -------------------------------------------------------------
   6. АДАПТИВ: текст слайда не заезжает под стрелку.
   Стрелка стоит у края карточки и занимает ~34px, собственный
   отступ слайда 22px. Ниже 760px стрелка крупнее относительно
   карточки, поэтому там отступ больше.
   ------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 900px) {
  html body .home-promo-slide {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  html body .home-promo-slide__content { width: min(58%, 640px); }
}

@media (min-width: 601px) and (max-width: 760px) {
  html body .home-promo-slide {
    padding-left: 66px !important;
    padding-right: 66px !important;
  }
}

/* -------------------------------------------------------------
   7. КОМПАКТНАЯ ШАПКА.

   Две прошлые попытки провалились из-за специфичности: у сайта
   есть html body header.gptishka-canonical-header .logo-img.logo-img
   = (0,3,3) с object-fit: contain !important, а также
   body .lang-current с min-width: 112px !important. При равном
   !important побеждает более специфичный селектор, поэтому
   ниже классы намеренно продублированы — это поднимает вес
   правила, не меняя того, на что оно указывает.

   Галочку выпадающего списка не трогаем: сайт прячет её своим
   глобальным правилом, а флага достаточно как индикатора.

   Логотип обрезаем через object-fit, а не подменяем фоном:
   на картинке висит filter brightness(0) invert(1), который
   перекрашивает тёмный логотип в белый. У фона фильтр не
   сработал бы и знак стал бы невидимым на тёмной шапке.
   ------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1120px) {
  /* Держим один ряд: грид переносит вниз то, что не помещается */
  html body header .nav-shell.nav-shell.nav-shell {
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  /* Логотип: только знак (первые ~290px из 980 при высоте 208) */
  html body header .logo-link .logo-img.logo-img.logo-img.logo-img {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 31px !important;
    object-fit: cover !important;
    object-position: left center !important;
  }

  /* Язык: прячем подпись */
  html body header .lang-switch .lang-current > span:not(.arrow) {
    display: none !important;
  }

  /* и снимаем минимальную ширину, иначе место не освобождается */
  html body header .lang-switch .lang-current.lang-current.lang-current {
    min-width: 0 !important;
    width: auto !important;
    gap: 6px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Главная причина второй строки: правило .nav > nav в @media
     (max-width:1100px) задаёт ссылкам width:100% и order:3 — они
     не «не помещаются», их явно растягивают и переставляют в конец.
     Возвращаем в общий ряд. */
  html body header .nav-shell > nav.header-quick-links {
    /* Ключевое: при max-width:900px сайт ставит grid-column: 1 / -1,
       то есть отдаёт ссылкам всю ширину грида — это и есть вторая
       строка. Возвращаем обычное размещение в колонке. */
    grid-column: auto !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    order: 0 !important;
    grid-row: auto !important;
    justify-self: end !important;
  }
  html body header .lang-switch.lang-switch.lang-switch,
  html body header .header-tools.header-tools.header-tools {
    min-width: 0 !important;
    width: auto !important;
  }
}

/* Ниже 1000px места впритык: ужимаем отступы и кегль ссылок,
   чтобы они помещались рядом с языком, а не переносились. */
@media (min-width: 761px) and (max-width: 1000px) {
  html body header .header-quick-links.header-quick-links {
    gap: 4px !important;
  }

  html body header .header-quick-links .header-quick-link {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 13px !important;
  }
}

/* -------------------------------------------------------------
   8. Возвращаем скрытие шапки при прокрутке (баг был до правок).

   JS исправно вешает на шапку класс header-hidden, и правило
   body header.header-hidden (0,1,2) уводит её вверх через
   translate3d(0,-120%,0). Но выше по каскаду стоит

     @media (min-width: 1181px) {
       html body header.gptishka-canonical-header {
         transform: none !important } }

   со специфичностью (0,1,3) и !important — оно побеждает, и на
   экранах шире 1181px шапка не пряталась никогда. Скорее всего
   два правила писались независимо и столкнулись.

   Ниже селектор (0,2,3): те же три элемента плюс два класса.
   ------------------------------------------------------------- */
@media (min-width: 1181px) {
  html body header.gptishka-canonical-header.header-hidden,
  html body header.gptishka-unified-header.header-hidden,
  html body header.header-hidden.header-hidden {
    transform: translate3d(0, -120%, 0) !important;
  }
}

/* -------------------------------------------------------------
   9. 10. Соцсети в шапке на средних экранах.

   В диапазоне 761–900px в шапке одновременно должны поместиться логотип,
   промо-плашка ChatGPT, пять быстрых ссылок, две иконки соцсетей и
   переключатель языка. Логотип и язык уже ужаты до знака и флага, дальше
   резать нечего — кроме иконок VK и Telegram. Они дублируются в подвале и
   в виджете поддержки, поэтому их скрытие не отнимает у пользователя
   способ связаться. Промо-плашку не трогаем: это основной продающий
   элемент шапки.

   Ниже 761px работает мобильная раскладка шапки — туда не вмешиваемся.
   ------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 900px) {
  html body header .header-quick-link.header-social-link.header-social-link {
    display: none !important;
  }
}