/* Каталог квартир — по макету «Каталог квартир / Десктоп 1920» (257:829)
   и «Каталог квартир / Телефон 390» (258:932).

   Секции устроены одинаково: поля 24/120/10/120 и колонка 1680 внутри. */

/* Колонка каталога шире, чем на главной: в макете это 1680 внутри кадра
   1920 при полях 120. Поэтому предел ставится по кадру, а не по колонке —
   иначе поля вычитались бы дважды и колонка выходила 1440. */
.fl__in {
  max-width: calc(var(--wrap) + var(--side) * 2);
  margin: 0 auto; padding: 24px var(--side) 10px;
}

/* ─── Заголовок страницы (257:855) ────────────────────────────────────── */

.fl__head .fl__in { display: flex; flex-direction: column; gap: 10px; }
.fl__crumbs { display: flex; gap: 8px; font-size: 13px; font-weight: 500; line-height: 17.76px; }
.fl__crumbs a { color: var(--accent-2); text-decoration: none; }
.fl__crumbs a:hover { text-decoration: underline; }
.fl__crumbs span { color: var(--ink-2); }
.fl__crumbs span:first-of-type { color: var(--ink-3); }

.fl__h1 { font-size: 44px; font-weight: 800; line-height: 60.1px; letter-spacing: -1.32px; color: var(--ink); }
.fl__sub { max-width: 900px; font-size: 17px; font-weight: 500; line-height: 23.22px; color: var(--ink-2); }

/* ─── Строка фильтров (257:862) ───────────────────────────────────────── */

.fl__filters .fl__in { display: flex; flex-direction: column; gap: 10px; }

/* Полоса 1680×94: поля 14/16, зазор 12, скругление 20. */
.fl__row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; background: #fff;
  border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line);
}

/* Поле 302×66. Настоящий <select> лежит поверх и прозрачен: так фильтр
   работает без скриптов и остаётся доступным с клавиатуры, а выглядит как
   в макете — с подписью сверху и значением снизу. */
.ff {
  position: relative; flex: 1 1 302px; max-width: 302px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  height: 66px; padding: 12px 16px;
  background: #fff; border-radius: var(--r-fld);
  box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;
}
.ff__label { font-size: 13px; font-weight: 500; line-height: 17.76px; color: var(--ink-3); }
.ff__value { font-size: 16px; font-weight: 600; line-height: 21.86px; color: var(--ink); }
.ff__select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font: inherit;
}
.ff:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }

/* Уголок 10×5 — та же линия 1.6, что в макете. */
.ff__chev {
  position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
  margin-top: -6px; pointer-events: none;
  border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg);
}

.fl__apply {
  height: 47px; padding: 0 18px; border: 0; border-radius: var(--r-fld);
  background: var(--accent); color: #fff; cursor: pointer;
  font-size: 14px; font-weight: 600;
}
.fl__apply:hover { background: var(--accent-2); }
/* Со скриптами кнопка не нужна: список отправляет форму сам. */
.js .fl__apply { display: none; }

.fl__reset {
  padding: 14px 6px; font-size: 14px; font-weight: 500; line-height: 19.12px;
  color: var(--accent-2); text-decoration: none;
}
.fl__reset:hover { text-decoration: underline; }

.fl__terms { font-size: 12px; font-weight: 500; line-height: 16.39px; color: var(--ink-2); }

/* Кнопки «Фильтры» и «Сортировка» — только на телефоне (258:953). */
.fl__tgl, .fl__mob { display: none; }
/* Плашки выбранных условий (258:959). На широком экране значения и так
   видны в полях, поэтому плашки показываем только на телефоне. */
.fl__chips { display: none; gap: 8px; flex-wrap: wrap; }
/* Плашка выбранного ЖК видна всегда: она единственное, что объясняет
   суженную выдачу на широком экране. */
.fl__chips--on { display: flex; }
.fl__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--r-pill); background: var(--accent-bg);
  text-decoration: none; font-size: 13px; font-weight: 600; line-height: 17.76px;
  color: var(--accent-2);
}
.fl__chip span { font-size: 12px; font-weight: 500; }
.fl__chip:hover { background: #FFE7DA; }

/* ─── Выдача (257:892) ────────────────────────────────────────────────── */

.fl__res .fl__in { display: flex; flex-direction: column; gap: 14px; }
.fl__resrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fl__found { flex: 1 1 auto; font-size: 22px; font-weight: 800; line-height: 30.05px; letter-spacing: -0.44px; color: var(--ink); }

.fl__sorts { display: flex; gap: 12px; flex-wrap: wrap; }
.fl__sort {
  padding: 10px 16px; border-radius: var(--r-pill);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none;
  font-size: 13px; font-weight: 600; line-height: 17.76px; color: var(--ink-2);
}
.fl__sort:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
/* Выбранная сортировка — подложка #FFF4EE без рамки, как в макете. */
.fl__sort.is-on { background: var(--accent-bg); box-shadow: none; color: var(--accent-2); }

/* Сетка: четыре карточки 408 с зазором 16 (408×4 + 16×3 = 1680). */
.fl__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.fc {
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line); overflow: hidden;
}
.fc:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }

.fc__plan {
  position: relative; display: block; height: 180px; background: var(--bg-soft);
}
.fc__plan img { width: 100%; height: 100%; object-fit: contain; }
/* Счётчик кадров 41×25 в углу планировки. */
.fc__count {
  position: absolute; right: 12px; bottom: 12px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--bg-dark); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 15px;
}

.fc__body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.fc__title { font-size: 16px; font-weight: 600; line-height: 21.86px; color: var(--ink); text-decoration: none; }
.fc__title:hover { color: var(--accent-2); }
.fc__sub { font-size: 12px; font-weight: 500; line-height: 16.39px; color: var(--ink-3); }
/* Отступ 6 перед ценой — из макета (пустой слой 257:909). */
/* Отступ 10 = пустой слой 6 из макета плюс зазор 4, который в макете
   приходится на этот слой (257:909). */
.fc__price { margin-top: 10px; font-size: 20px; font-weight: 800; line-height: 27.32px; letter-spacing: -0.4px; color: var(--ink); }
.fc__pay { font-size: 13px; font-weight: 500; line-height: 17.76px; color: var(--accent-2); }

/* Высота 52 набирается полями 16 сверху и снизу, как в макете, а не
   задаётся числом: со шрифтом другого размера полоса не поедет. */
.fl__more {
  display: flex; align-items: center; justify-content: center;
  padding: 16px 0; border-radius: var(--r-fld);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none;
  font-size: 15px; font-weight: 600; line-height: 20.49px; color: var(--ink);
}
.fl__more:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }

/* ─── Пустая выдача (261:1080) ────────────────────────────────────────── */

.fl__empty {
  max-width: 860px; padding: 40px 40px 36px;
  display: flex; flex-direction: column; gap: 14px;
  background: #fff; border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.fl__emptyh { font-size: 26px; font-weight: 800; line-height: 35.52px; letter-spacing: -0.52px; color: var(--ink); }
.fl__emptyp { font-size: 15px; font-weight: 500; line-height: 20.49px; color: var(--ink-2); }
.fl__hints { display: flex; gap: 12px; flex-wrap: wrap; }
.fl__hint {
  padding: 11px 18px; border-radius: var(--r-pill); background: var(--accent-bg);
  text-decoration: none; font-size: 13px; font-weight: 600; line-height: 17.76px;
  color: var(--accent-2);
}
.fl__hint:hover { background: #FFE7DA; }
.fl__ask {
  align-self: flex-start; display: flex; align-items: center;
  padding: 16px 28px; border-radius: var(--r-fld); background: var(--accent);
  text-decoration: none; font-size: 15px; font-weight: 600; line-height: 20.49px; color: #fff;
}
.fl__ask:hover { background: var(--accent-2); }

/* ─── Готовые подборки (257:970) ──────────────────────────────────────── */

.fl__coll .fl__in { display: flex; flex-direction: column; gap: 14px; }
.fl__collh { font-size: 26px; font-weight: 800; line-height: 35.52px; letter-spacing: -0.52px; color: var(--ink); }
.fl__collp { font-size: 14px; font-weight: 500; line-height: 19.12px; color: var(--ink-2); }
.fl__colls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.flc {
  display: flex; flex-direction: column; gap: 3px; padding: 16px 18px;
  background: #fff; border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--line); text-decoration: none;
}
.flc:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.flc b { font-size: 17px; font-weight: 600; line-height: 23.22px; color: var(--accent-2); }
.flc i { font-style: normal; font-size: 13px; font-weight: 500; line-height: 17.76px; color: var(--ink-2); }

/* ─── Планшет ─────────────────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .fl__grid, .fl__colls { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .fl__grid, .fl__colls { grid-template-columns: repeat(2, 1fr); }
  .fl__h1 { font-size: 34px; line-height: 1.15; letter-spacing: -1px; }
}

/* ─── Телефон 390 (258:932) ───────────────────────────────────────────── */

@media (max-width: 760px) {
  /* Поля секций 16/20/6/20 — из мобильного кадра. */
  .fl__in { padding: 16px var(--side) 6px; }
  .fl__head .fl__in, .fl__filters .fl__in { gap: 8px; }
  .fl__res .fl__in, .fl__coll .fl__in { gap: 10px; }

  .fl__crumbs { font-size: 12px; line-height: 16.39px; }
  .fl__crumbs a, .fl__crumbs span { color: var(--accent-2); }
  .fl__h1 { font-size: 26px; line-height: 35.52px; letter-spacing: -0.78px; }
  .fl__sub { font-size: 14px; line-height: 19.12px; }

  /* Две кнопки по 170×50 с зазором 10. */
  .fl__mob { display: flex; gap: 10px; }
  .fl__mobbtn {
    /* Высота 50 набирается полями 15, как в макете. */
    flex: 1 1 0; padding: 15px 0; display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-fld); background: #fff;
    box-shadow: inset 0 0 0 1px var(--line); text-decoration: none;
    font-size: 15px; font-weight: 600; line-height: 20.49px; color: var(--ink);
  }
  .fl__mobbtn i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--accent-2); }

  /* Поля открываются флажком. Без скриптов это единственный способ спрятать
     их и вернуть по нажатию. */

  /* 🔴 align-items: stretch здесь обязателен.

     На десктопе строка фильтров выравнивает поля по центру — по вертикали,
     как и задумано в полосе. Здесь та же строка разворачивается в столбец,
     и то же правило начинает центровать поля ПО ШИРИНЕ: каждое сжимается до
     своей надписи. Панель выглядела лесенкой из пилюль разной длины, а
     ползунки — короткими обрезками посередине.

     На странице ЖК тот же столбец фильтров сделан правильно (zhk.css,
     .zfl__row) — здесь просто забыли. */
  .fl__row {
    display: none; flex-direction: column; align-items: stretch;
    padding: 12px; gap: 8px;
  }
  .fl__tgl:checked ~ .fl__row { display: flex; }
  .fl__row .ff { flex: none; max-width: none; }

  /* Черта слева отделяет ползунок от соседнего поля в горизонтальной полосе.
     В столбце соседей по бокам нет, и она читается как случайный штрих у
     края. Боковые поля там же: они прижимали дорожку к середине. */
  .fl__row .rng { border-left: 0; padding-left: 0; padding-right: 0; }

  /* Растянувшись на всю ширину, «Сбросить» прижалась бы к левому краю: до
     этого её держал по центру тот же align-items. Надпись ставим по центру
     сами — заодно нажимать в неё пальцем проще, полоса теперь во всю ширину.
     Кнопке «Показать» этого не нужно: содержимое кнопки браузер центрует
     сам. */
  .fl__row .fl__reset { text-align: center; }

  .fl__chips { display: flex; }
  .fl__terms { font-size: 11px; line-height: 15.03px; }

  .fl__found { font-size: 18px; line-height: 24.59px; letter-spacing: -0.36px; }
  /* Кнопки сортировки на телефоне занимают строку целиком. */
  .fl__sorts { width: 100%; }
  .fl__sort { flex: 1 1 auto; text-align: center; }

  /* Сетка по две карточки 170×230: планировка 130, тело 100. */
  .fl__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fc__plan { height: 130px; }
  .fc__body { gap: 3px; padding: 12px 14px 14px; }
  .fc__title { font-size: 14px; line-height: 19.12px; }
  .fc__sub { font-size: 11px; line-height: 15.03px; }
  /* На телефоне отдельного отступа перед ценой в макете нет — только зазор. */
  .fc__price { margin-top: 0; font-size: 16px; line-height: 21.86px; }
  .fc__pay { font-size: 12px; line-height: 16.39px; }

  .fl__collh { font-size: 18px; line-height: 24.59px; letter-spacing: -0.36px; }
  .fl__colls { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .flc { padding: 13px 14px; gap: 3px; }
  .flc b { font-size: 15px; line-height: 20.49px; }
  .flc i { font-size: 12px; line-height: 16.39px; }

  .fl__empty { padding: 24px 20px; }
  .fl__emptyh { font-size: 22px; line-height: 1.25; }
}