/* Каталог квартир /kvartiry/ — статика из tools/catalog/build_kvartiry.py.
   Токены и базовые компоненты (btn, topbar, wrap) — из main.css.
   Дизайн-система — по docs/Дизайн-ревью 72dom.life-podbor (Gemini): радиусы 20/12/8,
   слоистые тени, текст #1a1a1c, цена = главный акцент карточки, красный только на CTA. */

:root {
  /* radius/shadow/sdan — алиасы на канон main.css (равные, no-op) */
  --kv-radius-l: var(--r-lg);
  --kv-radius-m: var(--r-card);
  --kv-radius-s: var(--r-sm);
  --kv-ink: var(--ink);              /* схлопнут к канону — Волна 2c (тёплый сдвиг) */
  --kv-muted: var(--muted);          /* схлопнут к канону — Волна 2c */
  --kv-shadow: var(--shadow-card);
  --kv-sdan-bg: var(--sdan-bg);
  --kv-sdan-ink: var(--sdan-ink);
}

/* Преленд живёт в узкой колонке (.wrap 660px в main.css) — каталогу нужен широкий
   контейнер (ревью: контент/шапка ≤1200). kvartiry.css грузится после main.css. */
.wrap { max-width: 1200px; }

main { color: var(--kv-ink); }
.kv-breadcrumbs { font-size: .85rem; color: var(--kv-muted); margin: 1rem 0; }
.kv-breadcrumbs a { color: var(--kv-muted); }

h1 { font-size: 1.6rem; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .4rem; }
@media (min-width: 1000px) { h1 { font-size: 2rem; } }
.kv-trust { font-size: .82rem; color: var(--kv-muted); margin: 0 0 .3rem; }
/* trust-числа как сканируемые факты (цифра в ink, лейбл muted) вместо серой стены */
.kv-trust-facts { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; padding: 0; margin: .2rem 0 .6rem; }
.kv-trust-facts li { font-size: .85rem; color: var(--kv-muted); display: flex; align-items: baseline; gap: .3rem; }
.kv-trust-facts b { color: var(--kv-ink); font-weight: 700; font-size: 1.05rem; }
.kv-intro { max-width: 640px; margin-top: 0; }

.tag--sdan { background: var(--kv-sdan-bg); color: var(--kv-sdan-ink); border-radius: 4px; }
.tag--bron { background: #fff3e0; color: #b26a00; border-radius: 4px; }

/* ── тулбар: фильтры / счётчик / сортировка ─────────────────────────────── */
.kv-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 .5rem; }
.kv-found { margin: 0; font-weight: 600; }
.kv-sort { margin-left: auto; font-size: .85rem; color: var(--kv-muted); display: flex; align-items: center; gap: .4rem; }
.kv-sort select { padding: .45rem .6rem; border: 1px solid var(--c-line); border-radius: var(--kv-radius-s); background: #fff; font-size: .85rem; color: var(--kv-ink); }
.kv-toolbar__filters { position: relative; }
.kv-badge { position: absolute; top: -6px; right: -6px; background: var(--c-accent); color: #fff; border-radius: 999px; font-size: .7rem; min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 4px; }

.kv-active-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; }
.kv-active-chips:empty { margin: 0; }
.kv-chip { display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 1px solid var(--c-line); border-radius: 999px; padding: .25rem .7rem; font-size: .8rem; cursor: pointer; }
.kv-chip:hover { border-color: var(--kv-ink); }
.kv-chip b { font-weight: 400; color: var(--kv-muted); }

/* ── раскладка: сайдбар + выдача ────────────────────────────────────────── */
.kv-catalog { display: block; }
@media (min-width: 1000px) {
  .kv-catalog { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: start; }
}

/* Панель фильтров: <dialog>. На мобилке — модальная шторка через showModal(),
   на десктопе UA-правило dialog:not([open]){display:none} переопределяем — статичный сайдбар. */
.kv-filters { border: 0; padding: 0; background: transparent; max-width: none; }
@media (min-width: 1000px) {
  .kv-filters:not([open]) { display: block; }
  /* margin:0 обязателен: UA-стиль dialog { margin:auto } центрирует панель
     по вертикали грид-области (десятки тысяч px) — панель улетает за экран */
  /* max-height+overflow обязательны: панель выше вьюпорта иначе не проскроллить —
     нижние фасеты (Площадь, Готовность) недостижимы, пока не доскроллены все карточки */
  .kv-filters { position: sticky; inset: auto; top: 1rem; width: auto; margin: 0; max-height: calc(100dvh - 2rem); overflow-y: auto; }
  .kv-filters form { background: #fff; border-radius: var(--kv-radius-m); box-shadow: var(--kv-shadow); padding: 1.1rem 1.1rem 1.25rem; }
  .kv-filters__apply { display: none; } /* десктоп — live-обновление, кнопка не нужна */
  .kv-toolbar__filters { display: none; }
}
@media (max-width: 999px) {
  /* тулбар липнет сверху: доступ к фильтрам/сортировке не уезжает на 447 карточках */
  .kv-toolbar { position: sticky; top: 0; z-index: 20; background: var(--c-bg, #f7f3ee); margin: 1rem -1rem .5rem; padding: .6rem 1rem; box-shadow: 0 10px 14px -14px rgb(26 26 26 / 30%); }
  .kv-filters[open] { position: fixed; inset: 0; width: 100%; height: 100dvh; max-height: none; margin: 0; z-index: 50; background: var(--c-bg, #f7f3ee); overflow: hidden; display: flex; }
  .kv-filters[open] form { display: flex; flex-direction: column; width: 100%; height: 100%; overflow-y: auto; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); box-sizing: border-box; }
  .kv-filters__apply { position: sticky; bottom: 0; margin-top: auto; box-shadow: 0 -8px 24px rgb(26 26 26 / 8%); }
}
.kv-filters::backdrop { background: rgb(26 26 26 / 45%); }

.kv-filters__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.kv-filters__reset { background: none; border: 0; color: var(--kv-muted); font-size: .8rem; cursor: pointer; text-decoration: underline; padding: 0; }
.kv-facet { border: 0; padding: .75rem 0; margin: 0; border-bottom: 1px solid var(--c-line); }
.kv-facet:last-of-type { border-bottom: 0; }
.kv-facet legend { font-weight: 600; font-size: .9rem; padding: 0 0 .4rem; }
.kv-facet__opt { display: flex; align-items: center; gap: .5rem; padding: .28rem 0; font-size: .9rem; cursor: pointer; }
.kv-facet__opt em { font-style: normal; color: var(--kv-muted); font-size: .8rem; margin-left: auto; }
.kv-facet__opt input { accent-color: var(--c-accent); width: 16px; height: 16px; }
.kv-range { display: flex; gap: .5rem; }
.kv-range input { width: 100%; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--c-line); border-radius: var(--kv-radius-s); font-size: .9rem; box-sizing: border-box; }

/* ── сетка карточек ─────────────────────────────────────────────────────── */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .75rem; }
@media (min-width: 700px) { .kv-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } }
.kv-card-link { text-decoration: none; color: inherit; display: block; }
.kv-grid .flat-card { display: flex; flex-direction: column; height: 100%; border: 0; border-radius: var(--kv-radius-m); background: #fff; box-shadow: 0 4px 16px rgb(26 26 26 / 4%); overflow: hidden; }
.kv-grid .flat-card img { width: 100%; height: 150px; object-fit: contain; background: #fff; padding: .5rem; box-sizing: border-box; }
.kv-grid .flat-card__body { padding: .35rem .9rem .9rem; display: flex; flex-direction: column; flex: 1; }
.flat-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .3rem; }
.kv-grid .flat-card__complex { font-size: .75rem; color: var(--kv-muted); }
.kv-grid .flat-card__title { margin: 0 0 .15rem; font-size: .9rem; color: var(--kv-muted); }
/* цена — главный акцент карточки (ревью, пункт Г) */
.kv-grid .flat-card__price { margin: auto 0 0; font-size: 1.25rem; font-weight: 700; color: var(--kv-ink); }
@media (hover: hover) {
  .kv-grid .flat-card { transition: transform .3s cubic-bezier(.25, .46, .45, .94), box-shadow .3s cubic-bezier(.25, .46, .45, .94); }
  .kv-card-link:hover .flat-card { transform: translateY(-4px); box-shadow: var(--kv-shadow); }
}
.kv-empty { color: var(--kv-muted); padding: 2rem 0; }

/* верхний hero-рендер ЖК (landing/media/zhk/<slug>/<slug>-hero.webp) — под H1, форма 16:9 */
.kv-hero { margin: 1rem 0 1.25rem; }
.kv-hero img {
  width: 100%; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--kv-radius-l);
  box-shadow: var(--kv-shadow);
}

/* ── карточка лота ──────────────────────────────────────────────────────── */
.kv-head h1 { margin-bottom: .35rem; }
.kv-head .tag { margin-right: .4rem; }
.kv-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 1.25rem 0 2rem; }
@media (min-width: 800px) {
  .kv-layout { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .kv-side { position: sticky; top: 1rem; }
}
.kv-gallery { display: grid; gap: .6rem; }
.kv-gallery__main a { position: relative; display: block; }
.kv-gallery__main img { width: 100%; max-height: 420px; object-fit: contain; background: #fff; border-radius: var(--kv-radius-l); padding: .75rem; box-sizing: border-box; box-shadow: 0 4px 16px rgb(26 26 26 / 4%); }
.kv-zoom-hint { position: absolute; right: .75rem; bottom: .75rem; background: rgb(255 255 255 / 75%); backdrop-filter: blur(4px); border-radius: 999px; width: 36px; height: 36px; display: grid; place-items: center; font-size: 1rem; }
.kv-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.kv-gallery__thumbs img { width: 100%; height: 90px; object-fit: cover; border-radius: var(--kv-radius-s); background: #fff; }
.kv-media { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 1rem; }

/* фото объекта из медиабанка застройщика (landing/media/zhk/<slug>/) */
.kv-photos { margin-top: 1.25rem; }
.kv-photos h2 { font-size: 1.15rem; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .2rem; }
.kv-photos .muted { color: var(--kv-muted); font-size: .85rem; margin: 0 0 .75rem; }
.kv-photos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.kv-photos__grid a:first-child { grid-column: 1 / -1; }
.kv-photos__grid img { width: 100%; height: 110px; object-fit: cover; border-radius: var(--kv-radius-s); display: block; }
.kv-photos__grid a:first-child img { height: 260px; border-radius: var(--kv-radius-m); }

/* видео ЖК (landing/media/zhk/<slug>/) */
.kv-video { margin-top: 1.5rem; }
.kv-video h2 { font-size: 1.15rem; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .2rem; }
.kv-video .muted { color: var(--kv-muted); font-size: .85rem; margin: 0 0 .75rem; }
.kv-video__player { width: 100%; height: auto; max-width: 900px; aspect-ratio: 1280 / 682; background: #000; border-radius: var(--kv-radius-m); display: block; }

.kv-price { font-size: 1.9rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.kv-price__old { font-size: 1rem; font-weight: 400; color: var(--kv-muted); text-decoration: line-through; margin-left: .5rem; }
.kv-price-note { font-size: .8rem; color: var(--kv-muted); margin: .25rem 0 1rem; }
.kv-params { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: .95rem; }
.kv-params td { padding: .45rem 0; border-bottom: 1px solid var(--c-line); }
.kv-params td:first-child { color: var(--kv-muted); padding-right: 1rem; white-space: nowrap; }
.kv-stock { font-size: .85rem; color: var(--kv-sdan-ink); background: var(--kv-sdan-bg); border-radius: var(--kv-radius-s); padding: .5rem .75rem; }

.kv-form { background: #fff; border-radius: var(--kv-radius-m); box-shadow: var(--kv-shadow); padding: 1.4rem 1.25rem 1.5rem; margin-top: 1rem; }
.kv-form h2 { margin: 0 0 .3rem; font-size: 1.1rem; line-height: 1.15; letter-spacing: -.02em; }
.kv-form .muted { color: var(--kv-muted); font-size: .88rem; line-height: 1.45; }
.kv-form .field { margin: .6rem 0; }
.kv-form input[type="text"], .kv-form input[type="tel"] { width: 100%; padding: .7rem .8rem; border: 1px solid var(--c-line); border-radius: var(--kv-radius-s); font-size: 1rem; box-sizing: border-box; }
.kv-form input:user-invalid { border-color: var(--c-err, #d93025); }
.kv-form input:user-valid { border-color: var(--c-ok, #188038); }
.kv-form .agree { font-size: .78rem; color: var(--kv-muted); display: flex; gap: .5rem; align-items: flex-start; margin: .6rem 0; }
.kv-form .ok-msg { color: var(--c-ok, #188038); font-weight: 600; }
.kv-form .error-msg { color: var(--c-err, #d93025); font-size: .85rem; }

/* ── лайтбокс планировки ────────────────────────────────────────────────── */
.kv-lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 92dvh; }
.kv-lightbox::backdrop { background: rgb(26 26 26 / 70%); }
.kv-lightbox img { max-width: 96vw; max-height: 88dvh; display: block; background: #fff; border-radius: var(--kv-radius-m); padding: 1rem; box-sizing: border-box; }
.kv-lightbox iframe { width: min(1100px, 94vw); aspect-ratio: 16 / 9; max-height: 85dvh; display: block; border: 0; border-radius: var(--kv-radius-m); background: #000; }
.kv-lightbox__close { position: absolute; top: .4rem; right: .4rem; background: rgb(255 255 255 / 85%); border: 0; border-radius: 999px; width: 36px; height: 36px; font-size: 1rem; cursor: pointer; }
.kv-lightbox__nav { position: fixed; top: 50%; transform: translateY(-50%); background: rgb(255 255 255 / 85%); border: 0; border-radius: 999px; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 1; }
.kv-lightbox__nav--prev { left: max(.5rem, env(safe-area-inset-left)); }
.kv-lightbox__nav--next { right: max(.5rem, env(safe-area-inset-right)); }
.kv-lightbox__count { position: fixed; bottom: max(.75rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: rgb(26 26 26 / 65%); color: #fff; font-size: .8rem; border-radius: 999px; padding: .25rem .75rem; }

/* ── страницы ЖК ────────────────────────────────────────────────────────── */
.kv-zhk-links { font-size: .85rem; color: var(--kv-muted); margin: .25rem 0 0; }
.kv-zhk-stats { font-size: .95rem; margin: .75rem 0 0; }
.kv-facts { margin-top: 1.5rem; }
.kv-facts h2 { font-size: 1.15rem; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .4rem; }
.kv-facts ul { margin: 0; padding-left: 1.2rem; }
.kv-facts li { margin: .25rem 0; }
.kv-zhk-flats { margin-top: 1.75rem; }
.kv-zhk-flats h2 { font-size: 1.25rem; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .75rem; }
.kv-zhk-flats > p { margin-top: 1rem; }
.kv-zhk-form { max-width: 480px; margin: 1.5rem 0 0; }

/* ── футер ──────────────────────────────────────────────────────────────── */
.kv-footer { border-top: 1px solid var(--c-line); margin-top: 2.5rem; padding: 1.25rem 0 2rem; font-size: .78rem; color: var(--kv-muted); }
.kv-footer li { margin: .3rem 0; }

/* SEO-пакет 04.07: футер-нав (быстрые ссылки Яндекса) + блок «Похожие квартиры» */
.kv-footer__nav { margin: 0 0 .9rem; }
.kv-footer__nav a { color: var(--kv-muted); }
.kv-related { margin-top: 2rem; }
.kv-related h2 { margin-bottom: 1rem; }

/* Батч В: «О квартире и доме» + карта расположения */
.kv-about { margin-top: 2rem; max-width: 720px; }
.kv-about p { line-height: 1.55; }

/* Параметры ЖК (спека) */
.kv-spec { margin-top: 2rem; }
.kv-spec h2 { font-size: 1.15rem; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .2rem; }
.kv-spec .muted { color: var(--kv-muted); font-size: .85rem; margin: 0 0 .9rem; }
.kv-spec__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 2.4rem; margin: 0; max-width: 900px; }
.kv-spec__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.kv-spec__row dt { color: var(--muted); flex: 0 0 auto; }
.kv-spec__row dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); }
.kv-map { margin-top: 2rem; }
.kv-map iframe { width: 100%; height: 320px; border: 0; border-radius: var(--kv-radius-m); display: block; }

/* AEO-FAQ (единый канон, R-119): ответы всегда видимы (НЕ аккордеон),
   но карточная кожа = .faq details лендов (main.css) — один визуальный род */
.kv-faq { margin-top: 2rem; max-width: 760px; }
.kv-faq__item { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .6rem; }
.kv-faq__item h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.kv-faq__item p { margin: 0; line-height: 1.55; }

/* Чипы-пресеты площади */
.kv-sq-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.kv-chip { padding: .32rem .65rem; border: 1px solid var(--c-line); border-radius: 999px; background: #fff; font-size: .85rem; cursor: pointer; }
.kv-chip.is-active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* ── reduced-motion (дом-закон §2: обязателен для каждой анимации) ──
   В kvartiry.css его не было (в apart/podbor/vitrina/main есть) — единственная анимация
   каталога, hover-lift карточек, гасилась без guard. Скоуп только .kv- → общие страницы
   (витрина/подбор) не затрагиваются. Применяется ко всем 447 лотам и 7 ЖК. */
@media (prefers-reduced-motion: reduce) {
  .kv-grid .flat-card { transition: none; }
  .kv-card-link:hover .flat-card { transform: none; }
}

/* R-133: computed-блок «Цифры по этой квартире» + шкала цены */
.kv-numbers { margin-top: 2rem; max-width: 720px; }
.kv-numbers ul { margin: 0; padding-left: 1.15rem; }
.kv-numbers li { line-height: 1.55; margin: .25rem 0; }
.kv-scale { max-width: 460px; margin-top: 1rem; }
.kv-scale__bar { position: relative; height: 6px; border-radius: 999px; background: var(--c-line); }
.kv-scale__dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: var(--c-accent); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.kv-scale__lbl { display: flex; justify-content: space-between; font-size: .8rem; color: var(--kv-muted); margin-top: .35rem; }

/* R-133: «Эта планировка на других этажах» */
.kv-plan-floors { margin-top: 2rem; max-width: 720px; }
.kv-plan-floors table { width: 100%; border-collapse: collapse; }
.kv-plan-floors td { padding: .45rem 0; border-bottom: 1px solid var(--c-line); }
.kv-plan-floors__cur td { background: var(--kv-sdan-bg); padding-left: .5rem; border-radius: 4px; }

/* R-133: бейдж динамики цены */
.kv-price-badge { display: inline-block; font-size: .85rem; border-radius: 4px; padding: .3rem .55rem; margin: .1rem 0 .4rem; }
.kv-price-badge--down { background: var(--kv-sdan-bg); color: var(--kv-sdan-ink); }
.kv-price-badge--up { background: #fff3e0; color: #b26a00; }

/* якорная форма: скролл со sticky-CTA не должен прятать заголовок формы под липкую шапку
   (~102px мобайл / ~108px десктоп) — отступ с запасом */
#kv-lead { scroll-margin-top: 7.5rem; }

/* стикер бонус-программы на карточках планировки/лота (пунктир = купонная семантика) */
.kv-bonus-sticker { display: inline-block; background: var(--amber-bg); color: var(--amber-ink); border: 1px dashed var(--amber-line); border-radius: 4px; padding: .45rem .7rem; margin: .2rem 0 .6rem; font-size: .85rem; font-weight: 600; text-decoration: none; transition: border-color .15s ease; }
.kv-bonus-sticker:hover { border-color: var(--amber-ink); }
.kv-bonus-sticker__arr { font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .kv-bonus-sticker { transition: none; } }