/* lots.css — секция актуальных лотов.

   Двенадцатый файл, свой в каждом сайте. Его нет в дизайн-системе site/
   по простой причине: там не было живых данных из фида, и карточки лота
   тоже не было. Классы .lot-* принадлежат только js/lots.js — ни один
   класс дизайн-системы здесь не переопределяется.

   Карточка держит одинаковую высоту у планировки, но не у текста: номера
   отличаются длиной подписи, и растянутый до общей высоты текст оставляет
   в карточке пустоту, которую нечем объяснить. Кнопка при этом всегда внизу —
   ряд кнопок обязан читаться как ряд.

   Планировки из фида — чертежи на белом фоне. Поэтому подложка кадра всегда
   светлая, независимо от регистра секции: тёмная рамка вокруг белого листа
   выглядит как ошибка загрузки. */

/* .section__body — двенадцатиколоночная сетка дизайн-системы, и всё, что
   в неё положено без .col-*, встаёт в одну колонку шириной 1/12. Секция лотов
   занимает всю ширину: она не колонка внутри раскладки, она сама раскладка. */
.lots,
.lots__more,
.lots__empty {
  grid-column: 1 / -1;
}

.lots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--as-col-gap);
}

.lots__empty {
  padding: var(--as-s6) 0;
  color: var(--as-text-on-light-mute);
  font-size: var(--as-fs-lead);
  line-height: var(--as-lh-lead);
}

.on-dark .lots__empty,
.on-dark-alt .lots__empty {
  color: var(--as-text-on-dark-mute);
}

.lots__more {
  margin-top: var(--as-s7);
}

.lot {
  display: flex;
  flex-direction: column;
  gap: var(--as-s2);
  padding: var(--as-s4);
  border: var(--as-hairline) solid var(--as-line-on-light);
  border-radius: var(--as-radius-flat);
  cursor: pointer;
  transition: border-color var(--as-dur-fast) var(--as-ease);
}

.on-dark .lot,
.on-dark-alt .lot {
  border-color: var(--as-line-on-dark);
}

.lot:hover {
  border-color: var(--as-accent-500);
}

.on-dark .lot:hover,
.on-dark-alt .lot:hover {
  border-color: var(--as-accent-400);
}

.lot__plan {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Чертежи из фида — вертикальные: студия узкая и длинная. В широком
     кадре такой лист превращается в полоску посреди белого поля, поэтому
     место планировки квадратное. */
  aspect-ratio: var(--as-ratio-square);
  margin-bottom: var(--as-s3);
  padding: var(--as-s2);
  background: var(--as-cream-50);
  border-radius: var(--as-radius-flat);
  overflow: hidden;
}

.lot__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Планировки не скачалось. Место кадра занимает объяснение, а не крестик:
   человек должен понять, что делать дальше, а не что сломалось. */
.lot__plan-note {
  margin: 0;
  padding: var(--as-s3);
  text-align: center;
  font-size: var(--as-fs-micro);
  letter-spacing: var(--as-tr-micro);
  color: var(--as-text-on-light-mute);
}

.lot__title {
  margin: 0;
  font-family: var(--as-font-display);
  font-size: var(--as-fs-h2);
  font-weight: var(--as-w-semibold);
  line-height: var(--as-lh-head);
  letter-spacing: var(--as-tr-head);
}

.lot__meta {
  margin: 0;
  font-size: var(--as-fs-micro);
  letter-spacing: var(--as-tr-micro);
  color: var(--as-text-on-light-mute);
}

.on-dark .lot__meta,
.on-dark-alt .lot__meta {
  color: var(--as-text-on-dark-mute);
}

.lot__price {
  margin: 0;
  font-size: var(--as-fs-lead);
  font-weight: var(--as-w-medium);
  line-height: var(--as-lh-flat);
}

.lot__unit {
  display: block;
  margin-top: var(--as-s1);
  font-size: var(--as-fs-micro);
  font-weight: var(--as-w-regular);
  letter-spacing: var(--as-tr-micro);
  color: var(--as-text-on-light-mute);
}

.on-dark .lot__unit,
.on-dark-alt .lot__unit {
  color: var(--as-text-on-dark-mute);
}

.lot__toggle {
  align-self: flex-start;
  margin-top: var(--as-s2);
  padding: 0;
  min-height: var(--as-ctrl-h-sm);
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: var(--as-fs-micro);
  letter-spacing: var(--as-tr-micro);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: var(--as-s1);
  cursor: pointer;
}

.lot__details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--as-s1) var(--as-s3);
  margin: 0;
  font-size: var(--as-fs-micro);
  letter-spacing: var(--as-tr-micro);
}

.lot__details dt {
  color: var(--as-text-on-light-mute);
}

.on-dark .lot__details dt,
.on-dark-alt .lot__details dt {
  color: var(--as-text-on-dark-mute);
}

.lot__details dd {
  margin: 0;
}

/* Кнопка прижата к низу карточки: ряд карточек обязан читаться
   как ряд одинаковых действий, даже если подписи над ними разной длины. */
.lot__pick {
  margin-top: auto;
  padding-top: var(--as-s4);
  align-self: stretch;
  justify-content: center;
}

/* Группа переключателей в форме. Браузерная рамка fieldset рисует вокруг
   группы коробку, которой нет ни у одного другого поля, — и группа начинает
   читаться как отдельный блок, а не как одно поле формы. Подпись группы
   ведёт себя как обычный field__label. */
fieldset.field {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

fieldset.field > legend {
  padding: 0;
}

/* Подпись выбранного номера в форме. Пока номер не выбран — её нет:
   пустая строка над формой читается как недоделка. */
.lead__lot {
  font-size: var(--as-fs-micro);
  letter-spacing: var(--as-tr-micro);
  text-transform: uppercase;
  color: var(--as-accent-400);
}

.on-light .lead__lot {
  color: var(--as-accent-500);
}

@media (max-width: 899px) {
  .lots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--as-col-gap-sm);
  }
}

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

/* ---------- Переключатель формата ----------
   Секция лотов на этой странице центральная: человек пришёл выбирать номер,
   а не читать про него. Переключатель стоит поверх готовой механики lots.js
   (js/lots-format.js) и ничего в ней не переписывает — он только прячет
   карточки чужого формата и заново считает подпись «Показано N из M».

   Кнопки, а не ссылки и не select: это фильтр текущего экрана, у него есть
   состояние «нажато», и aria-pressed говорит это состояние вслух. */
.lots__filter {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--as-s2);
  margin-bottom: var(--as-s5);
}

.lots__chip {
  min-height: var(--as-ctrl-h-sm);
  padding-inline: var(--as-s4);
  background: transparent;
  border: var(--as-hairline) solid var(--as-line-on-light);
  border-radius: var(--as-radius-control);
  color: inherit;
  font: inherit;
  font-size: var(--as-fs-micro);
  letter-spacing: var(--as-tr-micro);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color var(--as-dur-fast) var(--as-ease),
    background-color var(--as-dur-fast) var(--as-ease),
    border-color var(--as-dur-fast) var(--as-ease);
}

.on-dark .lots__chip,
.on-dark-alt .lots__chip {
  border-color: var(--as-line-on-dark);
}

.lots__chip:hover {
  border-color: var(--as-accent-500);
  color: var(--as-accent-500);
}

.on-dark .lots__chip:hover,
.on-dark-alt .lots__chip:hover {
  border-color: var(--as-accent-400);
  color: var(--as-accent-400);
}

/* Выбранный формат залит акцентом, а не подчёркнут цветом текста:
   на светлом регистре разница «акцентный текст / обычный текст» слишком
   мала, чтобы прочитать её боковым зрением на ходу. */
.lots__chip[aria-pressed="true"] {
  background: var(--as-accent-500);
  border-color: var(--as-accent-500);
  color: var(--as-cream-50);
}

.lots__chip[aria-pressed="true"]:hover {
  color: var(--as-cream-50);
}

/* Счётчик стоит в той же строке, что и кнопки: результат фильтра обязан
   быть виден там, где его включили, а не под сеткой карточек. */
.lots__count {
  margin: 0;
  margin-inline-start: auto;
  font-size: var(--as-fs-micro);
  letter-spacing: var(--as-tr-micro);
  color: var(--as-text-on-light-mute);
}

.on-dark .lots__count,
.on-dark-alt .lots__count {
  color: var(--as-text-on-dark-mute);
}

@media (max-width: 599px) {
  /* На узком экране счётчик уезжает на свою строку: прижатый к правому краю
     рядом с тремя кнопками, он оставлял бы им по сорок пикселей. */
  .lots__count {
    margin-inline-start: 0;
    width: 100%;
  }
}