@import url('05-page-shell.css');

/* Категорийные чипсы и featured/editor's-pick статья убраны (15.07.2026) —
   страница сразу переходит в сетку 4×4 карточек статей, как на Products. */

/* ---------- Сайдбар рубрик (22.07.2026, по прямому запросу) ----------
   Новый, отдельный заход — вертикальная навигация вместо убранных выше
   горизонтальных чипсов. Была сетка из 4 равных колонок карточек; теперь
   3 колонки карточек (.grid-3, общий с Home) + фиксированная по ширине
   колонка сайдбара справа, а не 4-я "1fr"-колонка — список рубрик по тексту
   не нуждается в четверти всей ширины страницы. Разметка в home.php идёт
   карточки → сайдбар (в этом же порядке в DOM), колонки сетки просто
   отражают это же слева направо. */
.articles-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--space-6);
  align-items: start;
}
/* Плавает только баннер, НЕ кнопки рубрик (23.07.2026, уточнение по прямому
   запросу — первая попытка сделала плавающим весь сайдбар целиком, это было
   неверно). Кнопки остаются в обычном статичном потоке и просто прокручиваются
   вместе со страницей как раньше.
   align-self:stretch — растягивает САМ .articles-category-nav (невидимый
   контейнер, у него нет своего фона/рамки, поэтому визуально это не
   заметно) на всю высоту строки грида (переопределяет align-items:start у
   .articles-layout только для этого элемента), иначе — без явной высоты у
   непосредственного родителя — sticky у баннера внутри буквально не имело
   бы места, чтобы "плавать" (упёрлось бы в свой же короткий бокс сразу
   после кнопок). См. .articles-sidebar-banner в 05-page-shell.css — сам
   sticky/top:50px висит уже на баннере, не здесь. */
.articles-category-nav { align-self: stretch; }
.articles-category-nav__title {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
}
.articles-category-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* Тот же язык состояний, что у .sort-select__option (05-page-shell.css) —
   бледно-зелёный hover, зелёный + жирный текст на активном пункте — только
   слева акцентная полоска вместо подсветки всего пункта, т.к. это вертикальный
   список, а не выпадающее меню. */
.articles-category-nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  padding: 8px 10px 8px 11px;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
}
.articles-category-nav button:hover { background: var(--color-tint-green); color: var(--color-primary-active); }
.articles-category-nav button.is-active { border-left-color: var(--color-primary); color: var(--color-primary); font-weight: 700; }
.articles-category-nav__count { font-size: var(--fs-caption); color: var(--color-text-secondary); font-weight: 400; }
.articles-category-nav button.is-active .articles-category-nav__count { color: var(--color-primary); }
.articles-results.is-loading { opacity: .5; pointer-events: none; }