/* ================================================
   custom.css — c-c.by
   Оптимизация скорости загрузки (мобильная версия)
   ================================================ */


/* ------------------------------------------------
   1. ШРИФТЫ — предотвращаем блокировку рендеринга
   font-display:swap показывает текст сразу системным
   шрифтом, пока Roboto не загрузится
   ------------------------------------------------ */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Roboto Medium'), local('Roboto-Medium');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Roboto Bold'), local('Roboto-Bold');
}


/* ------------------------------------------------
   2. HERO-БЛОК — убираем параллакс на мобильном
   background-attachment:fixed — главный тормоз
   на мобильных устройствах (пересчёт при каждом
   пикселе прокрутки)
   ------------------------------------------------ */

@media (max-width: 767px) {

  .t-cover__carrier {
    background-attachment: scroll !important;
    will-change: auto !important;
  }

  /* Уменьшаем высоту hero — полный экран не нужен на телефоне */
  #rec1715268631 .t-cover,
  #rec1715268631 .t-cover__carrier,
  #rec1715268631 .t-cover__filter,
  #rec1715268631 .t-cover__wrapper {
    height: 70vh !important;
    min-height: 380px !important;
  }

  /* Подгоняем позицию фото под мобильный экран */
  #rec1715268631 .t-cover__carrier {
    background-position: center top !important;
    background-size: cover !important;
  }
}


/* ------------------------------------------------
   3. АНИМАЦИИ — отключаем на мобильном
   Анимации появления вызывают Layout Shift и
   увеличивают TBT (Total Blocking Time)
   ------------------------------------------------ */

@media (max-width: 767px) {

  .t-animate,
  [data-animate-style],
  [data-animate-once],
  .t-animate__wrapper {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    will-change: auto !important;
  }

  .t-animate_started,
  .t-animate_not-started {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ------------------------------------------------
   4. ПРОИЗВОДИТЕЛЬНОСТЬ РЕНДЕРИНГА
   contain:layout style — браузер изолирует блоки
   и не пересчитывает весь DOM при изменении одного
   ------------------------------------------------ */

.t-rec {
  contain: layout style;
}


/* ------------------------------------------------
   5. ИЗОБРАЖЕНИЯ — оптимизация вне экрана
   content-visibility:auto — браузер не рендерит
   блоки, которые не видны на экране
   ------------------------------------------------ */

@media (max-width: 767px) {

  img[data-original],
  .t-img {
    content-visibility: auto;
    contain-intrinsic-size: 0 300px;
  }

  /* Hero-картинку рендерим сразу — это LCP элемент */
  #rec1715268631 .t-cover__carrier {
    content-visibility: visible !important;
  }
}


/* ------------------------------------------------
   6. КНОПКИ — убираем задержку касания на iOS/Android
   touch-action:manipulation убирает искусственную
   задержку 300мс при нажатии на кнопки
   ------------------------------------------------ */

.t-btn,
.t-btnflex,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}


/* ------------------------------------------------
   7. МОБИЛЬНОЕ МЕНЮ — аппаратное ускорение
   ------------------------------------------------ */

@media (max-width: 980px) {

  .tmenu-mobile {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}


/* ------------------------------------------------
   8. ФОРМЫ — предотвращаем zoom на iOS
   iOS автоматически зумирует страницу если
   font-size у input меньше 16px
   ------------------------------------------------ */

@media (max-width: 767px) {

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* ------------------------------------------------
   9. МОБИЛЬНАЯ ТИПОГРАФИКА
   Уменьшаем размеры текста — меньше расчётов layout
   ------------------------------------------------ */

@media (max-width: 767px) {

  /* Заголовок hero */
  #rec1715268631 .t181__title {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }

  /* Подзаголовок hero */
  #rec1715268631 .t181__descr {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* Уменьшаем большие отступы */
  .t-rec_pt_150 { padding-top: 60px !important; }
  .t-rec_pb_150 { padding-bottom: 60px !important; }
  .t-rec_pt_90  { padding-top: 45px !important; }
  .t-rec_pb_90  { padding-bottom: 45px !important; }
}