/*
  Лента проектов Главной — каталог обложек.

  Десктоп (≥1000px): 4 колонки. Две крупные обложки занимают 2×2, остальные
  1×1; часть ячеек намеренно пустует — это воздух раскладки. Место каждой
  плитки задаёт project-feed.js (--feed-col / --feed-row).
  Строки одной высоты: вертикальная плитка + место под название, поэтому
  пустая ячейка держит свою высоту, а крупная обложка заканчивается по низу
  второй строки. Пропорции точные: крупная 3:4, обычная 5:6. Высота считается от ширины ленты (cqw), так что
  плитки меняют размер пропорционально на любой ширине.

  700–999px: поток в две колонки, каждая пятая плитка — во всю ширину.
  Телефон (до 700px): одна колонка, проекты друг под другом в порядке ленты.

  Под обложкой только название обычным текстом. У кликабельных проектов в
  правом верхнем углу круглая кнопка со стрелкой, у проектов без страницы
  (soon) — подпись «Скоро появится»; заглушки — пустые плитки без ссылки. Обложки без скруглений и без обводки.
*/
.project-feed {
  --feed-gutter: 32px;
  --feed-gap: 16px;
  --feed-row-gap: 40px;
  --feed-cols: 4;
  /* Пропорции обложек: ширина к высоте. Обе точные на любой ширине окна —
     обложки не обрезаются, только меняют размер. */
  --feed-big-ratio: 3 / 4;
  --feed-tile-ratio: 5 / 6;
  /* Название — обычный текст сайта (он же размер пунктов меню в шапке). */
  --feed-caption-size: var(--font-size-text);
  /* Место под название: отступ и две строки текста. */
  --feed-caption-gap: 12px;
  --feed-caption-h: calc(var(--feed-caption-gap) + 2 * var(--feed-caption-size) * var(--line-height-text));
  container-type: inline-size;
  /* Лента начинается сразу под баннером: сверху тот же отступ, что по бокам. */
  padding: var(--feed-gutter) var(--feed-gutter) 120px;
  scroll-margin-top: calc(var(--header-h, 80px) + 12px);
}
@media (max-width: 999px) {
  .project-feed {
    --feed-gutter: 16px;
    --feed-gap: 10px;
    --feed-row-gap: 28px;
    --feed-cols: 2;
    padding-bottom: calc(var(--footer-h, 64px) + 96px);
  }
}

.project-feed__grid {
  --feed-col-w: calc((100cqw - (var(--feed-cols) - 1) * var(--feed-gap)) / var(--feed-cols));
  --feed-tile-h: calc(var(--feed-col-w) / (var(--feed-tile-ratio)));
  --feed-big-h: calc((2 * var(--feed-col-w) + var(--feed-gap)) / (var(--feed-big-ratio)));
  display: grid;
  grid-template-columns: repeat(var(--feed-cols), minmax(0, 1fr));
  grid-auto-rows: calc(var(--feed-tile-h) + var(--feed-caption-h));
  gap: var(--feed-row-gap) var(--feed-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-feed__item { min-width: 0; }
.project-feed__item--big { grid-column: span 2; grid-row: span 2; }
@media (min-width: 1000px) {
  /* Крупная плитка занимает две строки и отступ между ними. Чтобы и она (3:4),
     и обычные (5:6) сохраняли точные пропорции, подстраивается отступ между
     строками — он растёт вместе с шириной окна. */
  .project-feed__grid { row-gap: calc(var(--feed-big-h) - 2 * var(--feed-tile-h) - var(--feed-caption-h)); }
  .project-feed__item { grid-column: var(--feed-col); grid-row: var(--feed-row); }
  .project-feed__item--big { grid-column: var(--feed-col) / span 2; grid-row: var(--feed-row) / span 2; }
}
@media (max-width: 999px) {
  /* Строки по содержимому: пустых ячеек нет, крупная плитка — отдельной строкой. */
  .project-feed__grid { grid-auto-rows: auto; }
  .project-feed__item--big { grid-row: auto; }
  .project-feed__item:nth-child(5n + 1) { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  /* Одна колонка: крупные (3:4) и обычные (5:6) плитки идут друг под другом. */
  .project-feed { --feed-cols: 1; }
  .project-feed__item,
  .project-feed__item--big { grid-column: 1 / -1; }
}

.feed-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}
.feed-card__media { flex: 1 1 auto; min-height: 0; }
.feed-card__frame {
  position: relative;
  height: 100%;
}
.feed-card__cover {
  display: block;
  overflow: hidden;
  height: 100%;
  border-radius: 0;
  background: var(--skeleton-color);
}
/* Заглушка: плитка той же высоты, что обложка, под ней пустое место названия. */
.feed-card > .feed-card__cover { flex: 1 1 auto; height: auto; }
.feed-card > .feed-card__cover::after { content: none; }
.project-feed__item--stub .feed-card { padding-bottom: var(--feed-caption-h); }

.feed-card__cover img,
.feed-card__cover video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 999px) {
  /* В потоке высоту задаёт сама плитка. */
  .feed-card { height: auto; }
  .feed-card__cover { aspect-ratio: var(--feed-tile-ratio); height: auto; }
  .project-feed__item--big .feed-card__cover { aspect-ratio: var(--feed-big-ratio); }
  .project-feed__item--stub .feed-card { padding-bottom: 0; }
}

.feed-card__action,
.feed-card__badge { position: absolute; top: 16px; right: 16px; }
@media (max-width: 999px) {
  .feed-card__action,
  .feed-card__badge { top: 10px; right: 10px; }
}
/* «Скоро появится» — подпись на обложке проекта без страницы (не кнопка):
   стоит на месте стрелки, из того же матового стекла, но компактнее кнопки —
   размером с тег. */
.feed-card__badge {
  display: flex;
  align-items: center;
  height: 28px;
  max-width: calc(100% - 32px);
  padding-inline: 10px;
  border-radius: 14px;
  background-color: rgb(255 255 255 / .62);
  color: #111111;
  -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.1);
  backdrop-filter: blur(18px) saturate(180%) brightness(1.1);
  font-family: var(--font-family-body);
  font-size: calc(var(--feed-caption-size) * .8);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-text);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 999px) {
  .feed-card__badge { height: 24px; max-width: calc(100% - 20px); padding-inline: 8px; border-radius: 12px; }
}

/* Сама обложка на наведение не реагирует: отзывается только кнопка
   (её ховер из styles/buttons.40ab1699b125.css включается наведением на обложку). */
.feed-card__cover:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }

/* Название — обычный текст сайта, не заголовок; на десктопе не больше двух строк. */
.feed-card__title.text-body {
  flex: 0 0 auto;
  max-width: none;
  margin-top: var(--feed-caption-gap);
  font-size: var(--feed-caption-size);
  font-weight: var(--font-weight-regular);
}
@media (min-width: 1000px) {
  .feed-card__title.text-body {
    height: calc(var(--feed-caption-h) - var(--feed-caption-gap));
    overflow: hidden;
  }
}