/* feed — страница ленты.

   Большой карточки-окна под лентой нет: страница собрана сразу
   из карточек постов. Место для них задано виртуально — это та же
   площадь, на которой стоит окно профиля: высота экрана и поля
   страницы сверху и снизу. Рамку и заливку окна каждая карточка
   несёт на себе сама (см. postcard).

   Единица мозаики — та же ячейка, что у сетки профиля (--post-size
   из main.css), поэтому карточки на обеих страницах одного калибра.
   Карточки бывают крупнее ячейки: широкая лежит на две колонки,
   высокая — на два ряда, крупная — на обе стороны сразу; участки
   называет модуль postcard, а ведёт их CSS самого модуля.

   Внутри мозаики ливитирует строка поиска (modules/searchbar): она
   живёт в самой прокрутке и прилипает к её верхнему краю, а при
   прокрутке вниз улетает за край — полётом ведёт сам модуль. */

.feed {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: var(--page-gap) 0;
}

/* Мозаика занимает отведённое место целиком и листается внутри него:
   страница стоит на месте, как в профиле. Прокрутке здесь не нужно
   скругления — рамки окна больше нет, а у самих карточек скругление
   своё. Внутри — строка поиска и сетка карточек. */
.feed__mosaic {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Строка поиска прилипает к верхнему краю прокрутки: место у неё
   есть в самом потоке, поэтому вверху карточки стоят под ней на том
   же зазоре, что и друг от друга. Дальше контент уходит под строку,
   а прячет и возвращает её сам модуль по аргументу scroller.

   z-index держит строку поверх карточек: у карточек свои слои с
   z-index: 1 (снимок, счётчик сета — см. postcard.css), и без
   собственного слоя строка при прокрутке уходила бы под фото —
   при равном слое выигрывает тот, кто дальше по документу. */
.feed__mosaic > .searchbar {
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: 8px;
}

/* Сетка карточек — мозайка: пока скрипта нет, серверная раскладка
   держится колонками (пять на широком экране, три на среднем, одна
   на телефоне). Как только mosaic.js измерил ширину сетки, карточки
   перекладываются рядами во всю ширину (ряды — .mosaic__row в
   main.css): карточка несёт свою высоту (aspect-ratio по --ratio
   из postcard.css), и фото лежит целиком, без обрезки. */