/* Страница «Экспертные видео». Figma: Video/pc 611:5243 (1920×2912), Video/mb 611:5542 (390×5122).
   Секция от шапки (pc 89, mb 82) до «Обратите внимание» (pc 1707, mb 2236) → высота pc 1618, mb 2154.
   Карточка — общий блок css/video-card.css; здесь сетка, заголовок и кнопка.
   Спека — log-figma.md §30–31. */
.videos-page {
  min-height: 1618px;
  padding-bottom: 59px;          /* Figma: 1618 − 1515 − 44 = 59px снизу до «Обратите внимание» */
  /* Блоб выше секции и свисал ниже футера, растягивая документ пустотой */
  overflow: hidden;
}

/* Блоб Ellipse 15 (611:5244): 1880×1472 на (20, 359) → центр (960, 1095) — как на FAQ */
.videos-page__blob {
  left: 50%;
  top: -130px;                   /* (1095 − 89) − 1136 */
  width: 2680px;
  height: 2272px;
  margin-left: -1340px;
}

.videos-page__blob--mb {
  display: none;
}

/* H1 (611:5246): 261/223 228×86, Bold 36, жёсткий перенос после «Экспертные».
   В потоке: 134px от верха секции минус 13.33px крошек = 120.67px зазор */
.videos-page__h1 {
  margin: 120.67px 0 0;
  width: fit-content;
  font-weight: 700;
  font-size: 36px;
  line-height: normal;
  color: var(--black);
  white-space: nowrap;
}

/* Сетка 5×3: круги 204 с шагом 276 по горизонтали (gap 72) и 404 по вертикали
   (карточка 332 + тот же зазор 72). Первый круг на 261/381.
   В потоке: 292 − 134 − 85.33 (H1) = 72.67px зазор */
.videos-page__grid {
  margin-top: 72.67px;
  width: 1308px;
  display: grid;
  grid-template-columns: repeat(5, 204px);
  gap: 72px;
}

/* Кнопка (611:5369): 197×44 на 817/1604, padding 26/10, radius 14,
   заливки в инстансе нет — только текст SemiBold 14 `#305684`.
   В потоке: центрируется margin-inline auto, зазор 83px под сеткой (1604 − 1521) */
.videos-page__more {
  display: flex;
  margin: 83px auto 0;
  width: 197px;
  height: 44px;
  padding: 10px 26px;
  background: none;
}

/* display: flex выше перебивает браузерное [hidden] — без этого правила кнопка
   оставалась на странице после того, как показаны все ролики. */
.videos-page__more[hidden] {
  display: none;
}

@media (max-width: 1199px) {
  .videos-page {
    min-height: 2154px;          /* 2236 − 82 */
    padding-bottom: 37px;        /* Figma mb: 2154 − 2073 − 44 = 37px снизу */
  }

  .videos-page__blob {
    display: none;
  }

  /* Блоб Ellipse 14 (611:5549): 390×5946 на (0, 234) → центр (195, 3207) */
  .videos-page__blob--mb {
    display: block;
    left: 50%;
    top: -248px;                 /* (3207 − 82) − 3373 */
    width: 1190px;
    height: 6746px;
    margin-left: -595px;
  }

  /* H1 (611:5548): 28/157 178×66, Bold 28.
     В потоке: 75px от верха секции минус 14px крошек = 61px зазор; 14px от края контейнера */
  .videos-page__h1 {
    margin: 61px 0 0 14px;
    width: fit-content;
    font-size: 28px;
  }

  /* mb (611:5550): одна колонка по центру — круг 204 на 93 страницы → 79 от контейнера;
     карточки идут потоком с зазором 51 (шаг 383, а после карточки с подписью в две строки — 365).
     В потоке: 177 − 75 − 66 (H1) = 36px зазор; центрирование margin auto (362 − 204)/2 = 79px */
  .videos-page__grid {
    margin: 36px auto 0;
    width: 204px;
    grid-template-columns: 204px;
    gap: 51px;
  }

  /* Сколько карточек видно, решает кнопка «Смотреть ещё»: правило display:none
     здесь перекрывало бы атрибут hidden, который ставит JS. */

  /* Кнопка (611:5572): 97/2155 → по центру контейнера, зазор 50px под карточками (2155 − 2105) */
  .videos-page__more {
    margin: 50px auto 0;
  }
}