/* Блок «Хиты дня». Живёт в двух местах сразу: на отдельной странице /lenta и на нижнем
   экране главной. Поэтому у него СВОИ имена классов и свой файл.

   Почему не переиспользовали готовые .card: они есть и в app.css, и в seo.css — и означают
   там РАЗНОЕ. На главной это плитка с ценой поверх фотографии, на seo-страницах — карточка
   с подписью снизу. Блок, взявший чужое имя, выглядел бы в одном из двух мест сломанным.
   Подключать seo.css к главной тоже нельзя: он переопределяет палитру целиком.

   Опираемся только на токены, которые есть в обоих файлах: --panel, --line, --ink, --amber,
   --font, --on-accent. Собственных цветов не заводим — иначе блок не переживёт смену темы. */

.lenta-block {
  margin: 0;
}

.lenta-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.lenta-head h2 {
  margin: 0;
  font: 800 20px/1.2 var(--font);
  color: var(--ink);
}

.lenta-note {
  font: 600 12px/1.4 var(--font);
  color: rgba(var(--ink-strong-rgb), 0.62);
}

.lenta-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.lenta-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  transition: border-color .16s, transform .16s;
}

.lenta-card:hover {
  border-color: var(--amber);
  transform: translateY(-2px);
}

.lenta-shot {
  aspect-ratio: 4 / 3;
  background: rgba(var(--ink-strong-rgb), 0.06);
}

.lenta-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lenta-text {
  padding: 9px 10px 11px;
}

.lenta-price {
  font: 800 15px/1.2 var(--font);
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.lenta-name {
  margin-top: 3px;
  font: 700 12px/1.3 var(--font);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lenta-meta {
  margin-top: 2px;
  font: 500 11px/1.35 var(--font);
  color: rgba(var(--ink-strong-rgb), 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Отклонение цены от рынка рядом с ценой — как в карточках витрины. Цвета взяты оттуда
   же: зелёный «дешевле», красный «дороже», жёлтый «около рынка». Здесь они заведены
   токенами, потому что палитра витрины на страницу раздела не подключается, а хардкод
   цвета не пережил бы смену темы. Светлые значения — те же чернильные, что на витрине:
   яркий салатовый читаем на графите и слепнет на бумаге. */
:root { --lenta-cheap: #39ed02; --lenta-dear: #f70202; --lenta-fair: #fcdb05; }
:root[data-theme="light"] { --lenta-cheap: #157f2a; --lenta-dear: #c11414; --lenta-fair: #7d6200; }
.lenta-dev {
  display: inline-block;
  margin-left: 7px;
  font: 800 13px/1 var(--font);
  vertical-align: baseline;
  font-variant-numeric: tabular-nums lining-nums;
}
.lenta-dev--cheap { color: var(--lenta-cheap); }
.lenta-dev--dear { color: var(--lenta-dear); }
.lenta-dev--fair { color: var(--lenta-fair); }

.lenta-empty {
  margin: 0;
  font: 500 14px/1.5 var(--font);
  color: rgba(var(--ink-strong-rgb), 0.7);
}

@media (max-width: 1100px) {
  .lenta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .lenta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .lenta-head h2 { font-size: 17px; }
}

/* Список разборов. Стоит ПОД хитами: кнопка на главной обещает хиты, и если статьи
   оттеснят их вниз, кнопка начнёт врать. */
.lenta-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.lenta-post {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 16px 17px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  background: var(--panel);
  text-decoration: none;
  transition: border-color .16s, transform .16s;
}
.lenta-post:hover { border-color: var(--amber); transform: translateY(-2px); }

.lenta-post-date {
  font: 700 10.5px/1 var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(var(--ink-strong-rgb), .55);
}
.lenta-post-title { font: 800 15px/1.3 var(--font); color: var(--ink); }
.lenta-post-dek { font: 500 12.5px/1.45 var(--font); color: rgba(var(--ink-strong-rgb), .68); }

/* Рост и падение — семантические цвета, отдельные от янтаря: янтарь тут значит «сколько»,
   а не «хорошо». Заводим их токенами и подбираем отдельно под каждую тему: один и тот же
   зелёный, читаемый на графите, на светлой бумаге бледнеет до нечитаемого. */
:root { --wk-up: #56C07C; --wk-down: #F0776A; }
:root[data-theme="light"] { --wk-up: #1E7A45; --wk-down: #C0392B; }

/* Топ недели. Две колонки: пришло и ушло. Ставится под хитами дня — кнопка на главной
   обещает хиты, и оттеснять их вниз нельзя. */
.wk-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 34px);
}
.wk-col-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(var(--amber-rgb), .5);
  font: 800 17px/1.3 var(--font);
  color: var(--ink);
}
.wk-col-note {
  font: 500 14px/1.3 var(--font);
  color: rgba(var(--ink-strong-rgb), .5);
  text-transform: lowercase;
}
.wk-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 82px 112px 106px;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(var(--ink-strong-rgb), .08);
  font-variant-numeric: tabular-nums lining-nums;
}
.wk-rank { font: 800 14px/1.4 var(--font); color: var(--amber); }
/* Шапка столбцов. Живёт ВНЕ ящика с прокруткой, чтобы не уезжать вместе со строками,
   и потому доводится вправо на ширину полосы плюс отступ строк — иначе подписи
   не встали бы над своими числами. */
.wk-head {
  padding: 2px 28px 7px 0;
  border-bottom: 0;
}
/* Ширина колонки количества задана ПОДПИСЬЮ, а не числом: «2 420» занимает 47 пикселей,
   а «КОЛИЧЕСТВО» в разрядку — 79, замерено в браузере. Ужимать было нечем: слово выбрано
   владельцем, а вылезая из своей ячейки, оно наезжало на соседнюю. */
.wk-head span {
  font: 700 10px/1.3 var(--font);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(var(--ink-strong-rgb), .42);
}
/* Название в две строки: сверху марка и модель, снизу поколение и годы.
   Одной строкой оно не жило — «Daewoo Nexia 1 поколение N150 рестайлинг (2008–2016)»
   занимает 476 пикселей при колонке в 267, и обрезка съедала как раз марку с моделью,
   то есть единственное, ради чего в этот список смотрят. */
.wk-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wk-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
/* Смена места за неделю — как в чартах. Не сжимается и не обрезается: это два-три
   символа, и потерять их из-за длинного названия было бы обидно. */
.wk-move { flex: none; font: 800 14px/1 var(--font); font-style: normal; }
.wk-name b, .wk-name i {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-name b { font: 700 16px/1.3 var(--font); color: var(--ink); }
.wk-name .wk-line b { min-width: 0; }
.wk-name i {
  font: 500 12.5px/1.35 var(--font);
  font-style: normal;
  color: rgba(var(--ink-strong-rgb), .5);
}
.wk-count { font: 800 16px/1.35 var(--font); color: var(--amber); text-align: right; }
.wk-price { font: 500 15px/1.35 var(--font);
  color: rgba(var(--ink-strong-rgb), .62); text-align: right;
  /* Иначе на узкой колонке «4 700 000 ₸» роняет знак тенге на вторую строку. */
  white-space: nowrap; }
.wk-growth { font: 600 14px/1.35 var(--font); text-align: right; }
.wk-up { color: var(--wk-up); }
.wk-down { color: var(--wk-down); }
.wk-flat, .wk-new { color: rgba(var(--ink-strong-rgb), .45); }

/* Десять строк на виду, тридцать под рукой. Ящик с прокруткой, а не длинный список:
   нижний экран должен помещаться целиком, иначе человек проматывает мимо всего блока
   и не понимает, куда попал. Полоса — та же, что в фильтрах поиска. */
.wk-rows {
  max-height: 520px;
  /* scroll, а не auto: место под полосу занято всегда, и колонка не дёргается по ширине
     в тот момент, когда полоса появляется. */
  overflow-y: scroll;
  overflow-x: hidden;
  /* Отступ от последней колонки до полосы. Цифры прироста упирались в неё вплотную. */
  padding-right: 18px;
}
/* Полоса видна ВСЕГДА, а не только пока крутишь.
   Грабли: Chrome отключает эти правила целиком, если у элемента задан scrollbar-width
   или scrollbar-color, и рисует вместо них исчезающую системную полосу. Поэтому
   стандартных свойств здесь нет ни одного — иначе всё, что ниже, не применится. */
.wk-rows::-webkit-scrollbar { width: 10px; }
.wk-rows::-webkit-scrollbar-track {
  background: rgba(var(--ink-strong-rgb), .08);
  border-radius: 8px;
}
.wk-rows::-webkit-scrollbar-thumb {
  background: rgba(var(--amber-rgb), .55);
  border-radius: 8px;
}
.wk-rows::-webkit-scrollbar-thumb:hover { background: rgba(var(--amber-rgb), .85); }

/* Подложка под топом недели. На нижнем экране блок лежит прямо на фотографии склада,
   и мелкая вторая строка на светлых её местах пропадала. Цвет берём у фона темы,
   поэтому в тёмной подложка тёмная, в светлой — светлая. */
.lenta-block[data-panel="weekly"] {
  background: rgba(var(--bg-rgb), .92);
  border-radius: 14px;
  padding: 18px clamp(14px, 1.6vw, 22px) 20px;
}

@media (max-width: 860px) {
  .wk-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* Телефон: измерено на 390 пикселях. В один ряд четыре колонки не живут — названию
     оставалось 119 пикселей, и список читался как «Toyota Ca…», «Volkswa…», то есть
     терял ровно то, ради чего в него смотрят. Ужимание шрифтов и промежутков дало
     всего два десятка пикселей: мало.

     Поэтому цена уходит ПОД количество, вторым этажом. Ничего не теряем, а имя
     получает вдвое больше места — и справа выходит такая же пара строк, как слева:
     сверху главное число, снизу пояснение помельче. */
  .wk-row {
    grid-template-columns: 20px minmax(0, 1fr) 86px;
    grid-template-rows: auto auto;
    gap: 0 8px;
  }
  .wk-rank { grid-area: 1 / 1 / 3 / 2; }
  .wk-name { grid-area: 1 / 2 / 3 / 3; }
  .wk-count { grid-area: 1 / 3 / 2 / 4; }
  .wk-price { grid-area: 2 / 3 / 3 / 4; font-size: 13px; }
  .wk-rows { padding-right: 10px; }
  /* Над двухэтажной парой одна подпись: «СР. ЦЕНА» накрыть второй этаж нечем. */
  .wk-head {
    grid-template-columns: 20px minmax(0, 1fr) 86px;
    padding-right: 20px;
  }
  .wk-head .wk-rank, .wk-head .wk-name, .wk-head .wk-count { grid-area: auto; }
  .wk-head .wk-price { display: none; }
  .wk-head span { font-size: 8.5px; letter-spacing: 0; }
  .wk-name b { font-size: 15px; }
  .wk-count { font-size: 15px; }
  /* Прирост уходит: пятая колонка в 360 пикселей не помещается, а обрезанное число
     хуже отсутствующего. */
  .wk-growth { display: none; }
}

/* Вкладки нижнего экрана. Блоки переключаются, а не идут стопкой: экран должен помещаться
   целиком, иначе человек, пришедший за топом недели, сначала проматывает мимо хитов
   и не понимает, куда попал. */
.deck-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.deck-tab {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: rgba(var(--ink-strong-rgb), .66);
  font: 700 12.5px/1 var(--font);
  cursor: pointer;
  transition: color .16s, border-color .16s, background .16s;
}
.deck-tab:hover { color: var(--ink); border-color: var(--amber); }
.deck-tab.is-active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--on-accent);
}

.wrap--week { max-width: 1240px; }

/* Выбор недели. Ссылками, а не выпадающим списком: на каждую неделю можно сослаться,
   и робот доберётся до всех страниц сам, без единого клика. */
.wk-weeks {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.wk-week {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: rgba(var(--ink-strong-rgb), .7);
  font: 700 13px/1 var(--font);
  text-decoration: none;
  font-variant-numeric: tabular-nums lining-nums;
  transition: color .16s, border-color .16s;
}
.wk-week:hover { color: var(--ink); border-color: var(--amber); }
.wk-week.is-active { border-color: var(--amber); color: var(--amber); }

/* Список остальных недель. Раскрывается тегом <details>, а не скриптом: отдельная
   страница недели скриптов не грузит вовсе, а открываться выпадашка обязана и там. */
/* Признак ожидания на время подмены: неделя приезжает с сервера, и без него нажатие
   выглядит как «ничего не произошло». */
.lenta-block.is-busy { opacity: .55; transition: opacity .12s; }
.wk-more { position: relative; }
.wk-more-btn {
  display: inline-flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.wk-more-btn::-webkit-details-marker { display: none; }
.wk-more[open] .wk-more-btn { border-color: var(--amber); color: var(--amber); }
.wk-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 170px;
  max-height: 330px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(var(--shadow-rgb), .55);
}
/* Стандартных scrollbar-* здесь тоже нет: Chrome от них отключает правила ниже целиком
   и рисует исчезающую системную полосу. */
.wk-menu::-webkit-scrollbar { width: 10px; }
.wk-menu::-webkit-scrollbar-track { background: transparent; }
.wk-menu::-webkit-scrollbar-thumb {
  background: rgba(var(--amber-rgb), .55);
  border-radius: 8px;
}
.wk-menu::-webkit-scrollbar-thumb:hover { background: rgba(var(--amber-rgb), .85); }
.wk-menu-item {
  display: block;
  padding: 8px 11px;
  border-radius: 7px;
  color: rgba(var(--ink-strong-rgb), .78);
  font: 600 13px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.wk-menu-item:hover { background: rgba(var(--amber-rgb), .12); color: var(--ink); }
.wk-menu-item.is-active { background: var(--amber); color: var(--on-accent); }