/* ------------------------------------------------------------------
   Подменю услуг (Tilda T1281) на узких экранах — лента со свайпом.
   Добавлено 13.08.2026 вместо родного мобильного режима Tilda,
   в котором вкладки схлопывались в нечитаемый блок.

   Ревизия 2: крупнее шрифт, меньше разрядка, выше строка,
   разделители между вкладками, явное активное состояние.

   Десктоп (>960px) не затронут ни одним правилом.
   Откат: удалить <link> на этот файл со страниц разделов.
------------------------------------------------------------------ */

@media screen and (max-width: 960px) {

  /* 1. Родной мобильный режим (нативный select) — выключить */
  .t1281__wrapper_mobile,
  .t1281__col_mobile-flex .t1281__separator_mobile {
    display: none !important;
  }

  /* 2. Список вкладок — одной строкой с прокруткой */
  .t1281__wrapper {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start !important;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    width: auto !important;
    min-width: 100%;
  }

  .t1281__slider {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: none;      /* свайп плавный, без залипания */
    cursor: default;
  }
  .t1281__slider::-webkit-scrollbar { display: none; }

  /* 3. Вкладка по ширине текста, без переносов */
  .t1281__item,
  .t1281__tab {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    scroll-snap-align: none;
    position: relative;
  }

  /* 4. Разделитель между вкладками — чтобы читались как отдельные пункты */
  .t1281__item + .t1281__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: currentColor;
    opacity: .18;
  }

  /* 5. Строка выше, отступы крупнее — палец не промахивается */
  .t1281__title,
  .t1281__title-style1 {
    padding-left: 18px !important;
    padding-right: 18px !important;
    min-height: 54px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  /* 6. Главное: крупнее и без разрядки.
        Было 11px + .06em — при капсе это и делало текст нечитаемым. */
  .t1281__title-text {
    white-space: nowrap;
    font-size: 13px !important;
    line-height: 1.25 !important;
    letter-spacing: .015em !important;
    font-weight: 500 !important;
    opacity: .62;                /* неактивные приглушены */
    -webkit-transition: opacity .18s ease, font-weight .18s ease;
            transition: opacity .18s ease, font-weight .18s ease;
  }

  /* 7. Активная вкладка — контраст вместо декора */
  .t1281__tab_active .t1281__title-text,
  .t1281__tab-style1_active .t1281__title-text {
    opacity: 1;
    font-weight: 700 !important;
  }

  .t1281__tab_active::after,
  .t1281__tab-style1_active::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 0 !important;
    top: auto !important;
    height: 2px !important;
    width: auto !important;
    background: currentColor !important;
    opacity: 1 !important;
  }

  /* 8. Градиент справа — подсказка, что лента продолжается */
  .t1281__col.t1281__fade_right {
    -webkit-mask: linear-gradient(90deg, #fff calc(100% - 26px), transparent 100%);
            mask: linear-gradient(90deg, #fff calc(100% - 26px), transparent 100%);
  }

  /* 9. Иконка-рука «листай» — Tilda её прячет, вернуть */
  .t1281__scroll-icon-container {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }

  /* 10. Боковые отступы блока */
  .t1281.t1281__padding {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Очень узкие экраны — чуть плотнее, но не мельче 12px */
@media screen and (max-width: 380px) {
  .t1281__title,
  .t1281__title-style1 {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .t1281__title-text { font-size: 12px !important; }
}