/* Страница класса и страница предмета (docs/SEO_HOWTO.md) — h1 + описание
   + фильтры (общие с главной, webapp/_filters.html) + сортировка + сетка
   книг (тоже общая, webapp/_book_grid.html). Файл один на обе страницы —
   разница между ними только в том, что зафиксировано адресом (класс или
   предмет) и что осталось фильтром, вёрстка и стили одинаковые. Свои
   правила здесь — только то, чего нет больше нигде: вступительный абзац
   и переключатель сортировки. */

.page-intro {
  color: var(--muted);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
  max-width: 640px;
}

/* --- Сортировка -----------------------------------------------------------
   Не фильтр (сужает список) и не выпадашка (выбора всего два, сворачивать
   нечего) — своя пара кнопок в ряд. */

.sort-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}
.sort-label {
  color: var(--muted);
  font-size: var(--text-sm);
}
.sort-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-sm);
}
.sort-opt:hover { border-color: var(--accent); color: var(--accent); }
.sort-opt.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

/* Стрелка направления — тот же chevron-right, что и у самих фильтров
   (home.css, .filter-caret), просто своя пара поворотов: вниз — по
   убыванию (самое читаемое/новое сначала, это и есть значение по
   умолчанию), вверх — по возрастанию. */
.sort-arrow {
  display: inline-flex;
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
}
.sort-arrow-asc { transform: rotate(-90deg); }

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