/* ==========================================================================
   Карусель видеоотзывов (assets/js/reviews.js). Только токены из tokens.css.
   На телефоне ширину карточки задаёт общее правило лент в main.css.
   ========================================================================== */

:root { --rev-card-min: 220px; }

.carousel { position: relative; }

.carousel__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.carousel__btn {
  display: grid;
  place-items: center;
  width: var(--btn-height);
  height: var(--btn-height);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-page);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.carousel__btn:hover { border-color: var(--border-accent); background: var(--ink-700); }
.carousel__btn:active { background: var(--ink-950); }
.carousel__btn:disabled {
  border-color: transparent;
  background: var(--state-disabled-bg);
  color: var(--state-disabled-fg);
  cursor: default;
}

/* Лента: карточки в ряд, листается пальцем, колесом и стрелками. */
@media (min-width: 721px) {
  .revs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * var(--space-5)) / 4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
  }
  .revs::-webkit-scrollbar { display: none; }
  .revs > * { scroll-snap-align: start; min-width: var(--rev-card-min); }
}
/* Лента короче четырёх карточек — растягиваем их на всю ширину,
   иначе справа остаётся пустая колонка. */
@media (min-width: 721px) {
  .carousel[data-cards="3"] .revs { grid-auto-columns: calc((100% - 2 * var(--space-5)) / 3); }
  .carousel[data-cards="2"] .revs { grid-auto-columns: calc((100% - var(--space-5)) / 2); }
}

@media (min-width: 721px) and (max-width: 1080px) {
  .revs { grid-auto-columns: calc((100% - 2 * var(--space-5)) / 3); }
}
@media (prefers-reduced-motion: reduce) {
  .revs { scroll-behavior: auto; }
}

/* Горизонтальные ролики не обрезаются, а вписываются в карточку. */
.rev__video { object-fit: contain; background: var(--ink-950); }

.rev__cap { display: flex; flex-direction: column; gap: var(--space-1); }
.rev__cap b { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.rev__cap span { font-size: var(--text-2xs); color: var(--text-secondary); }

/* На телефоне лента выходит за поля контейнера (main.css): привязку карточек
   считаем от внутреннего отступа, иначе лента стартует со сдвигом. */
@media (max-width: 720px) {
  .revs { scroll-padding-inline: var(--container-pad); }
}