/* ============================================================
   ГБС — «Лента» (главная). Требует tokens.css + base.css.
   Здесь только то, чего нет в base.css: каркас страницы, рейл
   фильтров и липкие строки. Кадр, панель выбора, меню, списки
   значений и лайтбокс переехали в общий слой (base.css,
   lightbox.css) — тот же лист теперь рисует страница альбома.

   Хардкод цвета и `transition: all` запрещены (CLAUDE.md §2, §8).
   ============================================================ */

/* ---------- Каркас ---------- */

.feed {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--s5);
  width: 100%;
  max-width: var(--w-app);
  margin: 0 auto;
  padding: 0 var(--s5) var(--s8);
}

.feed-main { min-width: 0; }

/* Кадр в листе ровно того размера, под который построен /micro (176 квадрат):
   при 180 из base.css плитка выходила 201 px и миниатюру приходилось растягивать.
   Заодно на экран влезает семь кадров в ряд вместо шести. */
.feed-main .sheet-grid { grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); }
@media (max-width: 600px) {
  .feed-main .sheet-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Рейл ---------- */

.feed-rail {
  position: sticky;
  top: 56px;
  align-self: start;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 56px);
  min-height: 0;
}

.rail-in {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s5) var(--s3) var(--s4) 0;
}

.rail-foot {
  flex: none;
  padding: var(--s3) var(--s3) var(--s4) 0;
  border-top: 1px solid var(--rule);
  background: var(--ground);
}
/* Тихая кнопка и выключенной остаётся тихой: заливка --raised из base.css
   рисовала бы в углу рейла серый прямоугольник ни о чём. */
.rail-foot .btn:disabled { background: transparent; }

/* Случайный кадр: вокруг фотографии не бывает карточки. */
.rnd { margin-bottom: var(--s5); }
.rnd-frame { width: 100%; }
.rnd-skeleton { width: 100%; height: 100%; }

.rnd-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s2);
}
.rnd-title { font-size: var(--t-meta); color: var(--text-2); }
.rnd-row .btn { margin-left: auto; }
.rnd .meta-row { margin-top: 2px; }

/* ---------- Секция фильтра ---------- */

.rail-sections { border-top: 1px solid var(--rule); }

.fsec { border-bottom: 1px solid var(--rule); }

.fsec-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) 0;
  border: 0;
  background: transparent;
  color: var(--text-1);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.fsec-head:hover { color: var(--text-1); }

.fsec-title { flex: 1 1 auto; }

/* Счётчик активных значений — появляется, только когда фильтр применён. */
.fsec-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-round);
  background: var(--raised);
  color: var(--text-1);
  font-size: var(--t-micro);
  font-weight: 500;
}

.fsec-chev {
  flex: none;
  color: var(--text-3);
  transition: transform var(--fast) var(--ease);
}
.fsec-head[aria-expanded="true"] .fsec-chev { transform: rotate(90deg); }

.fsec-body {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: 0 0 var(--s4);
}
.fsec-body[hidden] { display: none; }

/* Список значений (.opt-list / .opt) и .chip-row живут в base.css. */

.date-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.date-pair .label { margin-bottom: 2px; }

.fsec-note { font-size: var(--t-meta); color: var(--text-3); }

/* ---------- Липкая строка листа ---------- */

.feed-bar {
  position: sticky;
  top: 56px;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 56px;
  background: var(--ground);
}
.feed-bar::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--rule);
}

.feed-total { font-size: var(--t-body); color: var(--text-2); }
.feed-total-skeleton { display: inline-block; width: 104px; height: 15px; vertical-align: -2px; }

.feed-sort {
  width: auto;
  height: 32px;
  padding: 0 var(--s2);
  font-size: var(--t-meta);
}

.rail-open { display: none; }

/* Заголовок группы: липнет под строкой листа, а не под шапкой. */
.feed-main .group-head { top: 112px; }
.feed-main .group-head h2 { font-size: var(--t-h3); }

.feed-sentinel { height: 1px; }
.feed-end { padding: var(--s6) 0; text-align: center; font-size: var(--t-meta); }

/* ---------- Брейкпоинты ---------- */

@media (max-width: 1280px) {
  .feed { grid-template-columns: 260px minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .feed { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 var(--s4) var(--s8); }

  /* Рейл становится выдвижным ящиком. Начинается под шапкой — как ящик
     навигации в layout: шапка остаётся доступной, пока фильтры открыты. */
  .feed-rail {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    z-index: var(--z-drawer);
    width: min(320px, 88vw);
    height: auto;
    max-height: none;
    padding: 0 var(--s4);
    background: var(--surface);
    border-right: 1px solid var(--rule);
    transform: translateX(-100%);
    transition: transform var(--base) var(--ease);
  }
  .feed-rail.is-open { transform: none; }
  .rail-in { padding-top: var(--s4); }
  .rail-foot { background: var(--surface); padding-right: 0; }

  .rail-scrim {
    position: fixed;
    inset: 56px 0 0 0;
    z-index: calc(var(--z-drawer) - 1);
    background: var(--scrim);
  }
  .rail-scrim[hidden] { display: none; }

  .rail-open { display: inline-flex; }
}

@media (max-width: 768px) {
  .feed-bar { gap: var(--s2); }
  .feed-total { display: none; }

  /* На телефоне рейл — это ящик фильтров, и открывают его ради фильтров.
     Случайный кадр занимал в нём первый экран, отодвигая «Когда» и «Кто»
     за сгиб (решение владельца 2026-09-13). Запрос за кадром тогда и
     не уходит — см. initRandom в feed.js. */
  .rnd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .feed-rail { transition: none; }
}