/* Экспертные видео на главной. Figma: Screen 4/pc 611:3925 (1920×597, top 3692, фон #F6F6F6),
   Screen 4/mb 611:4564 (390×561, top 4833).
   Сама карточка — общий блок css/video-card.css, здесь только сетка секции и её mb-переопределения. */

.videos {
  /* Фрейм 611:3925 стоит на 3692, а секция «Технология» кончается на 3621 → зазор 71 */
  margin-top: 71px;
  min-height: 597px;
  background: var(--section-grey);
}

.videos__inner {
  position: relative;
  min-height: inherit;
  padding-top: 78px;             /* Figma: заголовок на top 78 */
  padding-bottom: 72px;          /* Figma: 597 − 525 = 72px снизу */
}

.videos__title {
  margin: 0;
  width: fit-content;
  font-weight: 700;
  font-size: 36px;
  line-height: normal;
  color: var(--black);
  white-space: nowrap;
}

/* Ряд кругов: 204×204 с шагом 276 → gap 72. Лента бесконечная: JS переставляет карточки
   по кругу, поэтому она не упирается в конец списка.
   Область обрезки растянута до обоих краёв экрана отрицательными отступами на величину
   отступа сетки: карточка уезжает за край экрана и оттуда же приезжает, а не исчезает
   на границе контента. Стартовое положение задаёт padding-left самой ленты — первый круг
   стоит по сетке под началом заголовка.
   В потоке: зазор 72.33px от низа заголовка (193 − 78 − 42.67) */
.videos__viewport {
  margin-top: 72.33px;
  margin-right: calc(-1 * var(--gutter-pc));
  margin-left: calc(-1 * var(--gutter-pc));
  overflow: hidden;
}

.videos__list {
  display: flex;
  gap: 72px;
  padding-left: var(--gutter-pc);
}

/* Стрелки: стиль в css/arrow.css, здесь только позиции — top 72, зазор между кругами 36 */
.videos__arrow {
  top: 72px;
}

.videos__arrow--prev {
  left: 1160px;                  /* Figma 1421 */
  transform: rotate(180deg);
}

.videos__arrow--next {
  left: 1252px;                  /* Figma 1513 */
}

.videos__slider {
  display: none;
}

@media (max-width: 1199px) {
  /* В mb-макете у секции нет заливки (611:4564) — фон белый, в отличие от pc #F6F6F6;
     Screen 4/mb начинается сразу после контента Screen 3/mb (4833) → зазора нет */
  .videos {
    margin-top: 0;
    min-height: 561px;
    background: none;
  }

  .videos__inner {
    padding-top: 50px;           /* Figma mb: заголовок на top 50 */
    padding-bottom: 50px;        /* Figma mb: 561 − 511 = 50px снизу */
  }

  /* В mb-макете контент отступает от края экрана на 28 (у баннера и преимуществ — 14),
     поэтому внутри контейнера 362px добавляем 14. */
  .videos__title {
    margin: 0 0 0 14px;
    font-size: 28px;
  }

  /* mb: круги top 119, left 28 и 260 → шаг 232, gap 28. Стрелок в mb-макете
     (611:4564) нет, поэтому лента листается пальцем.
     В потоке: 119 − 50 (padding) − 33 (title) = 36px зазор */
  .videos__viewport {
    margin: 36px 0 0 14px;
    width: calc(100% - 14px);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  /* Отступ старта — приём pc-ленты: в mb область не растянута до краёв, а слева
     смещена маргином, поэтому лента начинается с нуля. */
  .videos__list {
    gap: 28px;
    padding-left: 0;
  }

  .videos__viewport::-webkit-scrollbar {
    display: none;
  }

  .videos__list .video-card {
    scroll-snap-align: start;
  }

  /* В mb второй круг без затемнения/блюра — оверлея в 611:4564 нет */
  .video-card__overlay {
    display: none;
  }

  /* mb: play строго по центру круга — 205 − 119 = 86 (в pc 90) */
  .video-card__play {
    top: 86px;
  }

  .videos__arrow {
    display: none;
  }

  /* Слайдер: 74×10 @ left 158, top 501, повёрнут на 180° (611:4572).
     Инстанс переопределяет цвета кита: точки #000 @0.15, активная #305684 → slider-dark.svg */
  .videos__slider {
    display: block;
    position: absolute;
    left: 144px;
    top: 501px;
    width: 74px;
    height: 10px;
    transform: rotate(180deg);
  }
}