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

.au-videos {
  margin-top: var(--au-head-gap); /* сетка y 576 при низе H1 504 */
}

/* сетка 3 колонки по ширине контентного контейнера: 3 × N, gap 24 / 72 (на 1024 — 48) */
.au-videos .au-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: calc(48px + 24px * var(--au-k));
}

/* §137: margin-top 90 → 72 — секция → пагинация, как голова главной. */
.au-page--videos .au-pagination {
  margin-top: var(--au-head-gap);
}

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

/* превью 975:1753 */
.au-video__preview {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 413 / 412;
  border-radius: calc(100px + 60px * var(--au-k));
}

.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: calc(97px + 60px * var(--au-k));
}

/* 975:1755 — Inter Semi Bold 32 / lh 36, левый край 59, перенос по слову.
   Ширина текстового бокса в макете гуляет по инстансам (296 у большинства,
   307 / 317 / 323 там, где дизайнер растягивал вручную). Если мерить в самой
   широкой из них (323), разбивка совпадает с макетом у 10 карточек из 12: по
   высотам нод макет даёт 2 строки пяти карточкам и 3 — семи, а в 323 те же
   2/3 получаются у десяти (замер Inter Semi Bold 32/36, 12 заголовков). Это
   обоснование выбора ширины, а не описание живой страницы: живая колонка на
   1920 — 501 (карточка 560 минус отступ 59), и в ней ни разбивка, ни числа
   строк макета не воспроизводятся — 3 из 12 до волны и 0 из 12 после. Что
   живая колонка держит и что стоит проверять, — «ни одного заголовка на
   четвёртую строку»: в обеих волнах максимум две.

   Волна «более тонкого шрифта»: кегль и интерлиньяж не тронуты (владелец просил
   только тоньше), 600 → Inter Tight 400 — то же отображение, что у заголовков
   секций. Семейство обязательно: на Inter объявлено 400 700 и «легче» там не
   рисуется, подробности — в шапке .au-home-hero__text.
   Правило одно на обе площадки: и секция главной (.au-home-videos), и страница
   «Видео» берут этот класс, переопределений кегля или семейства у них нет.

   Побочный эффект: Inter Tight уже́е на ~11 %, поэтому на странице «Видео» четыре
   карточки из двенадцати схлопываются со второй строки в первую (чтобы держать
   две строки, бокс должен быть не шире 459 при нынешних 501) — «Новые тренды в
   мире пептидов», «Достойные аналоги фирмы Auren», «Как подобрать продукт под
   себя?», «Обзор популярных конкурентов»; ещё у одной («Для чего и зачем нужны
   пептиды Видеогайд») число строк то же, но перелом переезжает на слово раньше.
   Итого состав меняется у 5 из 12, на 390 — у трёх. На главной, в боксе 354,
   числа строк сохраняются у трёх проверенных заголовков из трёх. */
.au-video__title {
  max-width: none;
  margin: calc(16px + 8px * var(--au-k)) 0 0;
  padding-left: calc(24px + 35px * var(--au-k));
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: calc(20px + 12px * var(--au-k));
  font-weight: 400;
  line-height: calc(25px + 11px * var(--au-k));
  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: calc(24px + 35px * var(--au-k));
  font-size: 14px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 17px;
}

/* кнопка 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: var(--au-item-gap); /* §137: было 71 — от низа карточки до верха следующего превью */
    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;
    aspect-ratio: auto;
    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 {
    /* Макетные 75 + 260 = 335 требуют окна не уже 335, а карточка шире окна
       (359 на 320), поэтому предел по контейнеру тут не работает: 100% — это
       те же 359. Держим за окно с запасом 40: на 320 заголовок получает 280,
       чернила заканчиваются на 276 вместо 333.9, где их срезал
       `overflow: hidden` у `MAIN.au-page`.
       Порог подобран так, чтобы 375 и выше остались нетронутыми: 375 − 40 =
       335 — ровно макетная ширина, предел не достигается (замер: 375, 390,
       1024, 1920 — ноль изменений). */
    max-width: min(335px, calc(100vw - 40px));
    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;
  }
}