/* =====================================================================
   Секция отзывов: два виджета мессенджеров рядом
   ─────────────────────────────────────────────────────────────────────
   Десктоп — две колонки. Мобильные — карусель со свайпом на
   CSS scroll-snap: жест листания работает нативно, JS нужен только
   для точек-индикаторов.
   ===================================================================== */

/* ---------- пропорции секции под три блока ---------- */

.reviews-left {
  width: calc(45% - 20px);
}

.reviews-right {
  width: calc(55% - 20px);
}

/* ---------- контейнер виджетов ---------- */

.reviews-msgs {
  position: relative;
}

.reviews-msgs__track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.reviews-msgs__item {
  min-width: 0;
}

/* Пока канал MAX не подтверждён, Telegram сохраняет прежнюю ширину. */
.reviews-msgs__item:only-child {
  grid-column: 1 / -1;
}

/* Точки нужны только в режиме карусели. */
.reviews-msgs__dots {
  display: none;
}

/* =====================================================================
   Адаптив
   ===================================================================== */

/* Планшеты: секция всё ещё в две колонки, но виджетам тесно —
   отдаём им всю ширину под блоком отзывов. */
@media screen and (max-width: 1200px) {
  .reviews-left {
    width: calc(40% - 20px);
  }

  .reviews-right {
    width: calc(60% - 20px);
  }

  .reviews-msgs__track {
    gap: 15px;
  }
}

@media screen and (max-width: 960px) {
  .reviews-left {
    width: calc(100% - 20px);
  }

  .reviews-right {
    width: calc(100% - 20px);
  }
}

/* ---------- карусель ---------- */

@media screen and (max-width: 767px) {
  .reviews-msgs__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    /* Прячем полосу прокрутки: за навигацию отвечают точки. */
    scrollbar-width: none;
    padding-bottom: 4px;
    margin: 0 -15px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .reviews-msgs__track::-webkit-scrollbar {
    display: none;
  }

  .reviews-msgs__item {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }

  .reviews-msgs__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
  }

  .reviews-msgs__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(31, 45, 58, 0.22);
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .reviews-msgs__dot.is-active {
    width: 22px;
    border-radius: 4px;
    background: var(--te-orange, #f7893f);
  }

}

/* На узких экранах лента виджета не должна занимать пол-страницы. */
@media screen and (max-width: 767px) {
  .te-tg {
    --te-tg-height: 52vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-msgs__track {
    scroll-behavior: auto;
  }

  .reviews-msgs__dot {
    transition: none;
  }
}