/* ============================================================================
   Каталог. Всё общее — шкалы, цвета, кнопки — лежит в base.css.

   Замысел экрана: обложки и есть оформление. Учебники цветные и разные,
   поэтому вокруг них убрано почти всё — рамки карточек, синие заливки,
   лишние отступы. Раньше каждая книга сидела в белой коробке с рамкой, и
   на экране получалась сетка из одинаковых коробок, в которых где-то
   внутри были книги. Теперь на странице только книги.
   ========================================================================== */

/* --- Продолжить чтение ------------------------------------------------------
   Удобство из матрицы ТЗ §5, в бесплатном режиме закрыто.                    */
.hero {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.hero img {
  width: 64px;
  flex: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
}
.hero .label {
  color: var(--muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.hero .title {
  font-weight: 650;
  font-size: var(--text-base);
  line-height: 1.3;
  margin-bottom: var(--space-1);
}
.hero .meta {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}
.hero .go { margin: var(--space-3) 0 0; }

@media (min-width: 700px) {
  .hero { padding: var(--space-5); gap: var(--space-5); }
  .hero img { width: 88px; }
  .hero .title { font-size: var(--text-lg); }
}

/* --- Фильтры ----------------------------------------------------------------
   Три выпадающие кнопки в строку: класс, сабак, тил. Значения каждой лежат
   в плавающей панели под кнопкой.

   Почему панель плавающая, а не раскрывается прямо в строке: развёрнутыми
   это 11 + 31 + 5 кнопок — две трети первого экрана телефона, человек
   открывал каталог и видел одни кнопки, ни одной книги. Панель лежит ПОВЕРХ
   страницы и не сдвигает книги вниз ни на точку; закрыл — и всё осталось
   ровно там же, где было.

   Выбранная кнопка залита чернильным. Это единственное, что обязано
   читаться, не открывая список.                                            */
.filters {
  display: flex;
  gap: var(--space-2);
  /* На телефоне три кнопки занимают строку целиком, и «Баарын тазалоо»
     переходит на вторую. Это лучше, чем ужимать ради неё сами фильтры:
     их подписи начали бы обрезаться многоточием. */
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  /* Точка отсчёта для панелей: на узком экране панель тянется во всю ширину
     этой строки, а не только своей кнопки, — см. .filter-menu. */
  position: relative;
}

/* Кнопки делят строку по содержимому, а не поровну: «Биология» длиннее
   «Тила» втрое, и на равных третях она обрезалась бы многоточием на ровном
   месте. Свободное место всё равно делится между ними, так что строка
   заполнена целиком.

   Нижняя граница — чтобы очень длинное название («Кыргыз тили жана
   адабияты») не сплющило соседей до одной буквы. Три таких минимума с
   промежутками — 245 точек, в самый узкий экран помещаются. */
.filter-drop { flex: 1 1 auto; min-width: 5.5em; }

/* Сама кнопка — это <summary> у <details>. Оформление даём целиком, поэтому
   снимаем браузерный треугольник: и обычным правилом, и вебкитовским, иначе
   на айфоне он останется. */
.filter-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* 44 точки — мишень для пальца целиком, без невидимых подкладок, которыми
     это добиралось раньше: рядов фильтров теперь не три, а один, и высоту
     можно себе позволить честно. */
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.filter-btn::-webkit-details-marker { display: none; }
.filter-btn:hover { border-color: var(--muted); }

/* Выбранный фильтр — сплошная заливка чернильным, а не синим. Синий на
   сайте значит «нажми, и что-то произойдёт»: если им закрашены ещё и
   выбранные фильтры, он перестаёт значить хоть что-нибудь.

   В тёмной теме --ink светлый, а --bg тёмный, поэтому та же пара цветов
   переворачивается сама и отдельного правила не требует. */
.filter-btn.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.filter-btn.on:hover { border-color: var(--ink); }

/* Название предмета бывает в три слова — «Кыргыз тили жана адабияты».
   Без обрезки такая кнопка вырастает на две строки и разносит всю строку. */
.filter-btn-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Уголок: вниз у свёрнутой кнопки, вверх у раскрытой. Отдельного значка для
   этого не заводим — поворачиваем «chevron-right». inline-flex обязателен:
   к строчному элементу transform не применяется вовсе. */
.filter-caret {
  flex: none;
  display: inline-flex;
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform .15s;
}
.filter-btn.on .filter-caret { color: inherit; opacity: .65; }
.filter-drop[open] .filter-caret { transform: rotate(-90deg); }

/* Выход из любого набора фильтров одним нажатием.

   Вид намеренно тише самих фильтров — без рамки и заливки, серыми буквами.
   Это не четвёртая кнопка отбора, а выход из отбора; выглядела бы она так же,
   человек принимал бы её за ещё один фильтр и искал бы внутри список. */
.filter-clear {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.filter-clear:hover { color: var(--ink); }
/* Крестик чуть мельче букв: он метка, а не сама кнопка. */
.filter-clear .icon { width: 1em; height: 1em; }

/* Панель со значениями.

   z-index: 10 — выше сетки книг, но НИЖЕ шапки (у неё 20). Шапка прилипшая:
   с большим числом панель наезжала бы на неё при прокрутке. Без числа
   вообще панель пряталась бы под книги — они идут в разметке позже и
   рисуются поверх.

   Высоту ограничиваем: предметов 31, панель во весь список ушла бы за край
   экрана, и нижние значения стали бы недоступны. */
.filter-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  /* Дочитал список до низа — дальше не начинает ехать страница под ним. */
  overscroll-behavior: contain;
  padding: var(--space-1);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.filter-opt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.3;
}
.filter-opt:hover { background: var(--bg); }

/* Выбранное значение закрашено так же, как кнопка над ним: открыл список —
   сразу видно, на чём стоишь, и не приходится сверять с кнопкой. */
.filter-opt.active { background: var(--ink); color: var(--bg); }
.filter-opt.active:hover { background: var(--ink); }

.filter-opt-label { flex: 1; min-width: 0; }

/* Число книг за значением. Бледное и мелкое: оно подсказка, а не заголовок. */
.filter-opt b {
  flex: none;
  font-weight: 400;
  font-size: var(--text-xs);
  opacity: .5;
}
.filter-opt.active b { opacity: .65; }

@media (min-width: 700px) {
  /* На широком экране кнопки не делят строку, а берут по содержимому, и
     панель встаёт под СВОЕЙ кнопкой, а не во всю ширину ряда. Для этого
     точкой отсчёта становится сама кнопка. */
  .filter-drop { position: relative; flex: 0 0 auto; }
  .filter-btn { min-width: 170px; }
  .filter-menu {
    right: auto;
    min-width: 100%;
    width: max-content;
    /* Длинные названия предметов иначе растянули бы панель на пол-экрана. */
    max-width: 320px;
  }
}

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

/* --- Сетка книг -------------------------------------------------------------
   minmax(150px, 1fr): на телефоне выходит два столбца, на широком экране
   браузер сам добирает столько, сколько влезет.                             */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-5) var(--space-4);
}

.book-card { display: block; }

/* Обложка — единственное, что здесь имеет цвет и тень. Пропорция 3/4
   выбрана по замеру: у 40 обложек медиана ширины к высоте 0.758.
   object-position: top — обрезаем снизу, а не с середины: у части книг
   обложка выше 3/4, и обрезка по центру срезала бы название. */
.book-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--line);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-3);
  transition: transform .15s, box-shadow .15s;
}
.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.book-card:hover .book-cover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 18, 22, .16);
}

/* Прочитанное — полоской по низу обложки, как у видео. На карточке
   размером с ладонь это единственное место, где отметка видна сразу
   и не отнимает строки у названия. */
.book-cover .read-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(0, 0, 0, .25);
}
.book-cover .read-bar i { display: block; height: 100%; background: var(--ok); }

.book-card .t {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  /* Обрезаем на третьей строке: названия у нас длинные («Кыргызстандын жана
     дүйнөнүн тарыхы, 1-бөлүк (5-класс, 2018, орусча)»), и без обрезки
     карточки в ряду разъезжаются по высоте. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-card .m {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-card .p { font-size: var(--text-xs); color: var(--ok); margin-top: var(--space-1); }

@media (prefers-reduced-motion: reduce) {
  .book-cover { transition: none; }
  .book-card:hover .book-cover { transform: none; }
}

/* Пустой ответ — во всю ширину сетки, а не одной ячейкой в углу. */
.grid .empty { grid-column: 1 / -1; }
.grid .empty a { color: var(--accent); font-weight: 600; }

/* --- Постраничная выдача ---------------------------------------------------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-2);
}
.pager-now { font-size: var(--text-sm); color: var(--muted); }
.wrap > .hint { text-align: center; }

/* --- Подборки ----------------------------------------------------------------
   Ленты книг, которые листаются вбок. Показываются вместо сетки, когда
   фильтры не выбраны.

   Зачем вообще: сетка отвечает на вопрос «покажи всё», а лента — на вопрос
   «что тут есть». Человек, который зашёл без цели, из сетки в 391 книгу
   не выберет ничего, потому что выбирать не из чего: все карточки
   одинаково безымянны. Лента же сама говорит, что предложить.           */
/* Ширина карточки одной величиной: от неё считается и высота обложки
   (пропорция 3/4), и то, на какой высоте встают кнопки прокрутки. Поменять
   размер карточек — поправить одно число, и кнопки останутся на середине
   обложки сами. */
.rail { --rail-card: 130px; margin-bottom: var(--space-6); }

/* Точка отсчёта для кнопок прокрутки. Внутри самой ленты их не разместить:
   она прокручивается, и кнопки уехали бы вместе с книгами. */
.rail-scroll { position: relative; }

.rail-title {
  font-size: var(--text-lg);
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 0 0 var(--space-3);
}
/* Уголок у заголовка ведёт к полному списку и заодно говорит, что за краем
   экрана есть продолжение: заголовок с уголком читается как «список»,
   а без него — как подпись к случайному ряду картинок. */
.rail-title a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.rail-title .icon {
  width: .85em;
  height: .85em;
  color: var(--muted);
  vertical-align: 0;
  transition: transform .12s;
}
.rail-title a:hover .icon { color: var(--accent); transform: translateX(2px); }

/* --- Кнопки прокрутки ленты -------------------------------------------------
   Появляются только там, где есть мышь: их расставляет rails.js, и он же
   проверяет наличие мыши. На телефоне лента листается пальцем.

   Лежат поверх краёв ленты, по центру обложек. Высота считается от ширины
   карточки и её пропорции 3/4 — так кнопка остаётся на середине обложки,
   какого бы размера та ни была. */
.rail-arrow {
  position: absolute;
  /* Середина обложки: высота обложки — это ширина карточки, умноженная
     на 4/3 (пропорция 3/4), а нам нужна её половина. Считаем от обёртки,
     а не от всей ленты: так высота заголовка в расчёт не входит и кнопка
     не съезжает, если заголовок перенесётся на две строки. */
  top: calc(var(--rail-card) * 4 / 3 / 2);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: 2;
  transition: border-color .12s, color .12s;
}
.rail-arrow:hover { border-color: var(--accent); color: var(--accent); }
/* Немного за край страницы: так кнопка стоит НАД обложкой, а не съедает
   место у первой и последней книги. */
.rail-arrow-prev { left: calc(-1 * var(--space-3)); }
.rail-arrow-next { right: calc(-1 * var(--space-3)); }
.rail-arrow .icon { width: 20px; height: 20px; vertical-align: 0; }

/* Лента прокручивается вбок теми же приёмами, что и кнопки фильтров:
   вытянута на боковые поля страницы, чтобы обрез приходился на край
   экрана — так видно, что дальше есть ещё книги. */
.rail-strip {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin: 0 calc(-1 * var(--pad));
  padding: 0 var(--pad) var(--space-2);
  /* Привязка прокрутки сама по себе не знает про поля ленты: она ставит
     начало карточки вровень с краем ленты, а край вытянут за экран. Из-за
     этого лента открывалась прокрученной на 16 точек, и первая обложка
     упиралась в край экрана, пока заголовок стоял с отступом.
     scroll-padding говорит привязке, где на самом деле начало. */
  scroll-padding-left: var(--pad);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.rail-strip::-webkit-scrollbar { display: none; }

.rail-card {
  flex: none;
  width: var(--rail-card);
  scroll-snap-align: start;
}
.rail-card .t {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  /* Две строки, а не три как в сетке: в ленте карточки стоят бок о бок,
     и разная высота подписей рвёт нижний край ленты. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Карточка «Бардык китептер» в конце ленты. Ростом с обложку, чтобы не
   выбиваться из ряда, но пустая и в рамке — сразу видно, что это не книга. */
.rail-all-box {
  aspect-ratio: 3 / 4;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  margin-bottom: var(--space-3);
  transition: border-color .12s, color .12s;
}
.rail-all-box .icon { width: 28px; height: 28px; }
.rail-all:hover .rail-all-box { border-color: var(--accent); color: var(--accent); }
.rail-all .t { color: var(--muted); font-weight: 600; }

@media (min-width: 700px) {
  /* Одно число — и карточки, и кнопки встают по-новому. */
  .rail { --rail-card: 150px; }
  .rail-title { font-size: var(--text-xl); }
}

@media (prefers-reduced-motion: reduce) {
  .rail-all-box,
  .rail-arrow,
  .rail-title .icon { transition: none; }
  .rail-title a:hover .icon { transform: none; }
}