/* Блок «Ведём пациента по всему пути» — мобильная раскладка.

   ☠️ Карточки этапов стояли в пяти колонках жёстко: `repeat(5, 1fr)` без
   единого медиазапроса — ни в запечённой странице, ни в исходном макете.
   На телефоне это около 1400 пикселей ширины, поэтому главная уезжала
   вправо и её можно было утащить за край экрана.

   На узком экране горизонтальная кривая с точками теряет смысл: она
   сплющивается в неразличимую загогулину. Поэтому путь становится
   вертикальным — линия слева, этапы под ней столбиком, как в обычном
   списке шагов. Это и читается лучше, и прокрутку не ломает. */

@media (max-width: 900px) {
  /* Пять колонок → две: на планшете этапы ещё помещаются парами. */
  #services .tbsv-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 640px) {
  /* Горизонтальная кривая на телефоне не нужна — прячем вместе с точками.
     ⚠️ `.tbsv-route` — это САМ <svg> с кривой, а не его обёртка: в обёртке
     лежит ещё и сетка этапов, и скрытие обёртки уносит весь блок целиком. */
  #services svg.tbsv-route { display: none !important; }

  /* Этапы — в один столбец. */
  #services .tbsv-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-top: 4px !important;
    /* место под вертикальную линию слева */
    padding-left: 26px !important;
    position: relative;
  }

  /* Сама линия пути — сплошная полоса вдоль всех этапов. */
  #services .tbsv-grid::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: linear-gradient(180deg,
      var(--coral, #FF5A3C) 0 26px,
      color-mix(in srgb, var(--teal, #13716B) 45%, transparent) 26px 100%);
    border-radius: 2px;
  }

  /* Точка этапа на линии — вместо кружков на кривой. */
  #services .tbsv-grid > * {
    position: relative;
    margin-bottom: 12px;
  }
  #services .tbsv-grid > *::before {
    content: '';
    position: absolute;
    left: -23px;
    top: 22px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--surface, #fff);
    border: 2px solid var(--teal, #13716B);
  }
  /* Первый этап — оранжевый: с него начинается путь пациента. */
  #services .tbsv-grid > *:first-child::before {
    background: var(--coral, #FF5A3C);
    border-color: var(--coral, #FF5A3C);
  }
  #services .tbsv-grid > *:last-child { margin-bottom: 0; }
}