/* Видео. Figma: Video/pc 975:1741, Video/mb 975:1795.
   Значения — из .design/spec/video.md. */

.au-videos {
  margin-top: 72px; /* сетка y 576 при низе H1 504 */
}

/* сетка 4 × 3: карточки 413, gap 24 / 72.
   4 × 413 + 3 × 24 = 1724 из 1728 — остаток уходит вправо, правое поле макета 100.
   Ниже 1920 макета нет: колонок столько, сколько влезает по 413, иначе четвёртая
   уходит под обрез (.au-page скрывает переполнение, и карточка просто исчезает). */
.au-videos .au-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 413px);
  justify-content: start;
  column-gap: 24px;
  row-gap: 72px;
}

/* на этой странице пагинация в 90 от сетки, а не в 96 как на остальных */
.au-page--videos .au-pagination {
  margin-top: 90px;
}

/* карточка 975:1774: 591 — не жёсткая высота, а минимальная. При макетных
   двух-трёх строках заголовка метка стоит на одной высоте, но pagetitle из
   MODX произвольной длины: на четвёртой строке фиксированный бокс дал бы
   налезание заголовка на метку, а теперь карточка растёт. */
.au-video {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 591px;
  color: var(--au-black);
}

/* превью 975:1753 */
.au-video__preview {
  position: relative;
  display: block;
  width: 413px;
  height: 412px;
  border-radius: 160px;
}

.au-video__poster {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* 975:1754 — центр по X сдвинут на +1.5 от центра превью.
   Приглушение до #B1B1B1 макета фильтром поверх белого глифа: один ассет
   на оба состояния вместо второго серого SVG. 0.694 = 177/255. */
.au-video__play {
  position: absolute;
  left: calc(50% + 1.5px);
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  filter: brightness(0.694);
  transition: filter 0.2s;
}

.au-video:hover .au-video__play,
.au-video:focus-visible .au-video__play {
  filter: none;
}

/* состояния Hover 975:1374 и Click 975:1380 — слой 0.35 поверх постера;
   :focus-visible идёт парой: с клавиатуры карточка иначе не отзывается */
.au-video:hover .au-video__preview::after,
.au-video:active .au-video__preview::after,
.au-video:focus-visible .au-video__preview::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.35);
}

/* состояние New 975:1364 — обводка 3px внутрь по контуру превью.
   Градиент вертикальный, стопы сняты пиксельно с экспорта 975:1760
   (codegen отдаёт только первый стоп #1d42fd). */
.au-video__preview--new {
  padding: 3px;
  background: linear-gradient(
    180deg,
    #1f42fb 0%,
    #5a43f2 11.7%,
    #9644e8 23.3%,
    #c167c3 36.7%,
    #cfaf86 50%,
    #d3ee58 63.3%,
    #99f48f 76.7%,
    #68f9bf 88.3%,
    #38feec 100%
  );
}

.au-video__preview--new .au-video__poster {
  border-radius: 157px; /* 160 − 3 */
}

/* 975:1755 — Inter Semi Bold 32 / lh 36, левый край 59, перенос по слову.
   Ширина текстового бокса в макете гуляет по инстансам (296 у большинства,
   307 / 317 / 323 там, где дизайнер растягивал вручную): берём самую широкую 323,
   тогда ни один заголовок не уходит на четвёртую строку и не налезает на метку,
   а разбивка на строки совпадает с макетом у 10 карточек из 12. */
.au-video__title {
  max-width: 382px; /* 59 + 323 */
  margin: 24px 0 0;
  padding-left: 59px;
  font-size: 32px;
  font-weight: 600;
  line-height: 36px;
  word-break: break-word;
}

/* 975:1764 — Inter Medium 14, в макете набрано «Новое видео» с uppercase.
   В потоке, а не absolute top 568: с margin-top: auto метка прижата к низу
   карточки и на длинном заголовке уезжает вниз вместе с ним.
   568 − 17 строка − 24 отступ = низ метки на 585 при карточке 591. */
.au-video__label {
  margin: auto 0 6px;
  padding-left: 59px;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  text-transform: uppercase;
}

/* кнопка 975:1802 — только на mb, на pc вместо неё пагинация */
.au-videos__more {
  display: none;
}

/* ─── MB: 390px ─────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .au-videos .au-container {
    grid-template-columns: 1fr;
    row-gap: 71px; /* от низа видимого содержимого карточки до верха следующего превью */
    padding: 0; /* карточки полноширинные: 32 и 75 ниже отсчитываются от края страницы, а не от гаттера 26 */
  }

  .au-video {
    min-height: 0;
    height: auto; /* высота по содержимому: ритм считается от последней строки */
  }

  /* превью I975:1804;975:1388 — 327 × 302 в x 32 (справа 31), radius 120 */
  .au-video__preview {
    width: 327px;
    height: 302px;
    margin-left: 32px;
    border-radius: 120px;
  }

  .au-video__preview--new .au-video__poster {
    border-radius: 117px;
  }

  /* I975:1804;975:1390 — Inter Semi Bold 26 / lh 31.5, левый край 75, ширина 260 */
  .au-video__title {
    max-width: 335px;
    padding-left: 75px;
    font-size: 26px;
    line-height: 31.5px;
  }

  /* I975:1806;975:1391 — метка идёт в потоке, 54 под заголовком.
     padding от pc-правила снимаем: на mb отступ слева задан margin 75 */
  .au-video__label {
    margin: 54px 0 0 75px;
    padding-left: 0;
  }

  /* 975:1802 — «Показать еще видео» 216 × 69: padding 16.5 против 16 у обычной кнопки */
  .au-videos__more {
    display: flex;
    width: 216px; /* Figma 216: аванс текста в браузере на 3px короче, разница уходит в padding */
    margin: 71px auto 0;
    padding-block: 16.5px;
  }

  /* на mb вместо пагинации кнопка догрузки: она лежит в том же блоке, потому что
     ведёт на ту же следующую страницу — гасим пилюли и стрелку, а не весь блок */
  .au-page--videos .au-pagination {
    display: block;
    margin-top: 0;
  }

  .au-page--videos .au-pager--limit,
  .au-page--videos .au-pager--pages .au-pager__arrow,
  .au-page--videos .au-pager--pages .au-pager__counter {
    display: none;
  }

  .au-page--videos .au-pager--pages {
    width: auto;
    padding: 0;
    background: none;
  }
}