/* Страница квартиры — по макету «Квартира / Десктоп 1920» (239:232)
   и «Квартира / Телефон 390» (249:255).

   Колонка 1680 внутри кадра 1920 при полях 120 — как в каталоге, поэтому
   предел ставится по кадру, а не по колонке. */

.ft__in {
  max-width: calc(var(--wrap) + var(--side) * 2);
  margin: 0 auto; padding: 16px var(--side) 8px;
}

/* ─── Крошки и заголовок (239:253) ────────────────────────────────────── */

.ft__head .ft__in { display: flex; flex-direction: column; gap: 16px; padding-top: 28px; }
.ft__crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 500; line-height: 17.76px; }
.ft__crumbs a { color: var(--accent-2); text-decoration: none; }
.ft__crumbs a:hover { text-decoration: underline; }
.ft__crumbs span { color: var(--ink-3); }

.ft__h1 { font-size: 40px; font-weight: 800; line-height: 54.64px; letter-spacing: -1.2px; color: var(--ink); }
.ft__sub { font-size: 16px; font-weight: 500; line-height: 21.86px; color: var(--ink-2); }
/* Проданная квартира: страница остаётся, но говорит об этом сразу (§5). */
.ft__gone {
  padding: 12px 16px; border-radius: var(--r-fld); background: var(--accent-bg);
  font-size: 14px; font-weight: 600; line-height: 19.12px; color: var(--accent-2);
}

/* ─── Планировка и цена (240:237) ─────────────────────────────────────── */

.ft__cols { display: grid; grid-template-columns: minmax(0, 1216fr) 440px; gap: 24px; align-items: start; }

/* Карточка планировки 1216×940: поля 24/24/20, зазор 16. */
/* Сетка, а не столбец: на десктопе подсказка стоит рядом с заголовком, а на
   телефоне уходит под чертёж (249:274) — порядок задаётся местом в сетке. */
.ft__plan {
  display: grid; grid-template-columns: auto 1fr; gap: 16px 12px;
  padding: 24px 24px 20px; background: #fff;
  border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line);
}
.ft__planh { grid-column: 1; font-size: 20px; font-weight: 800; line-height: 27.32px; color: var(--ink); }
.ft__planhint { grid-column: 2; align-self: baseline; font-size: 13px; font-weight: 500; line-height: 17.76px; color: var(--ink-3); }
.ft__planimg { grid-column: 1 / -1; }

/* Само изображение 600×760 по центру карточки. */
.ft__planimg { display: flex; align-items: center; justify-content: center; height: 760px; }
/* Чертежи приходят разных пропорций, поэтому картинка вписывается в место
   600×760 из макета, а не задаёт его собой. */
.ft__planimg img { max-width: 600px; max-height: 100%; width: auto; height: auto; border-radius: var(--r-fld); }
.ft__planimg--empty {
  min-height: 300px; border-radius: var(--r-fld); background: var(--bg-soft);
  font-size: 14px; font-weight: 500; color: var(--ink-3);
}

/* Карточка цены 440×532: поля 24, зазор 6. */
.ft__price {
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px; background: #fff;
  border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line);
}
.ft__pricecap { font-size: 13px; font-weight: 500; line-height: 17.76px; color: var(--ink-3); }
.ft__pricebig { font-size: 34px; font-weight: 800; line-height: 46.44px; letter-spacing: -1.02px; color: var(--ink); }
.ft__pricem2 { font-size: 14px; font-weight: 500; line-height: 19.12px; color: var(--ink-2); }

/* Свежесть цены: точка 7 px и строка 12 px (289:1952). */
.ft__fresh { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; line-height: 16.39px; color: var(--ink-3); }
.ft__fresh i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* История цены — раскрывашка под строкой свежести.

   Свёрнута по умолчанию: большинству достаточно знать, что цену проверяли
   сегодня, а разворачивает тот, кто торгуется или следит за домом. */
.ft__hist { font-size: 13px; }
.ft__histsum {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--accent-2);
  padding: 2px 0;
}
.ft__histsum::-webkit-details-marker { display: none; }
/* Стрелка своя: у встроенного треугольника нет ни цвета, ни поворота,
   которыми можно управлять одинаково в разных браузерах. */
.ft__histsum::after {
  content: ""; width: 7px; height: 7px; margin-left: 1px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.ft__hist[open] .ft__histsum::after { transform: rotate(-135deg) translate(-1px, -1px); }
.ft__histsum:hover { color: var(--accent); }

.ft__histlist {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
.ft__histlist li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.ft__histlist li:last-child { border-bottom: 0; }
.ft__histdate { color: var(--ink-3); font-weight: 500; }
.ft__histprice { font-weight: 700; color: var(--ink); }
.ft__histdelta { font-weight: 600; color: var(--ink-3); white-space: nowrap; }
/* Рост цены не красим зелёным: для покупателя это плохая новость, а не
   хорошая. Дорожает — оранжевым, дешевеет — зелёным. */
.ft__histdelta.is-up { color: var(--accent-2); }
.ft__histdelta.is-down { color: var(--green); }
.ft__histnote { margin: 10px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* Платёж на подложке #FFF4EE (240:247). */
.ft__pay {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border-radius: var(--r-fld); background: var(--accent-bg);
}
.ft__payrow { display: flex; align-items: baseline; gap: 8px; }
.ft__payrow b { font-size: 24px; font-weight: 800; line-height: 32.78px; letter-spacing: -0.48px; color: var(--ink); }
.ft__payrow span { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.ft__payterms { font-size: 11px; font-weight: 500; line-height: 15.03px; color: var(--ink-2); }

/* Сравнение с такими же в доме (289:1955). */
.ft__cmp {
  display: flex; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-fld); background: var(--bg-soft);
}
.ft__cmp > div { display: flex; flex-direction: column; gap: 2px; }
.ft__cmp b { font-size: 13px; font-weight: 600; line-height: 17.76px; color: var(--ink); }
.ft__cmp i { font-style: normal; font-size: 12px; font-weight: 500; line-height: 16.39px; color: var(--accent-2); }

.ft__cta, .ft__ask {
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-fld); text-decoration: none;
}
/* Главная кнопка 392×68 — из макета. */
.ft__cta {
  margin-top: 16px; height: 68px; background: var(--accent); color: #fff;
  font-size: 16px; font-weight: 600; line-height: 21.86px;
}
.ft__cta:hover { background: var(--accent-2); }
.ft__ask {
  padding: 16px 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink); font-size: 15px; font-weight: 600; line-height: 20.49px;
}
.ft__ask:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.ft__free { margin-top: 14px; font-size: 12px; font-weight: 500; line-height: 16.39px; color: var(--ink-2); }

/* ─── Характеристики (241:238) ────────────────────────────────────────── */

.ft__specs .ft__in, .ft__zhk .ft__in, .ft__similar .ft__in {
  display: flex; flex-direction: column; gap: 14px;
}
.ft__h2 { font-size: 22px; font-weight: 800; line-height: 30.05px; letter-spacing: -0.44px; color: var(--ink); }

/* Плитки 267×98 по шесть в ряд с зазором 16. */
.ft__tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.ft__tile {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  background: #fff; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line);
}
.ft__tilecap { font-size: 12px; font-weight: 500; line-height: 16.39px; color: var(--ink-3); }
.ft__tileval { font-size: 20px; font-weight: 800; line-height: 27.32px; letter-spacing: -0.4px; color: var(--ink); }
.ft__tilenote { font-style: normal; font-size: 11px; font-weight: 500; line-height: 15.03px; color: var(--ink-3); }
/* Значение, которого застройщик не прислал, гасим цветом: пусть будет видно,
   что это не факт о квартире, а его отсутствие. */
.ft__tile--unknown .ft__tileval { color: var(--ink-3); }

/* ─── Комментарий Дениса про квартиру (по образцу zwh__denis) ─────────── */

.ft__denis .ft__in { padding-top: 0; padding-bottom: 0; }
.dnq {
  display: flex; align-items: center; gap: 24px; padding: 28px 32px;
  border-radius: var(--r-card); background: var(--accent-bg);
}
.dnq__ava { flex: none; width: 96px; height: 96px; border-radius: var(--r-pill); object-fit: cover; }
.dnq__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dnq__role {
  font-size: 12px; font-weight: 700; line-height: 16.39px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--accent-2);
}
.dnq__role i { font-style: normal; }
.dnq__role i::before { content: " · "; }
.dnq__quote { margin: 0; font-size: 18px; font-weight: 600; line-height: 25px; letter-spacing: -0.2px; color: var(--ink); }
.dnq__acts { display: flex; gap: 12px; margin-top: 2px; }
.dnq__btn, .dnq__phone {
  display: inline-flex; align-items: center; padding: 13px 20px;
  border-radius: var(--r-fld); text-decoration: none;
  font-size: 14px; font-weight: 600; line-height: 19.12px;
}
.dnq__btn { background: var(--accent); color: #fff; }
.dnq__btn:hover { background: var(--accent-2); }
.dnq__phone { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

@media (max-width: 760px) {
  .dnq { flex-direction: column; align-items: flex-start; padding: 20px; gap: 14px; }
  .dnq__ava { width: 64px; height: 64px; }
  .dnq__quote { font-size: 16px; line-height: 22px; }
  .dnq__acts { flex-direction: column; width: 100%; }
  .dnq__btn, .dnq__phone { justify-content: center; }
}

/* ─── Карточка ЖК (241:262) ───────────────────────────────────────────── */

.ft__zhkcard {
  display: flex; align-items: center; gap: 24px; padding: 22px 24px;
  background: #fff; border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line);
}
/* Фотография дома. Подложка остаётся видна, когда фотографии нет, — рамка
   держит раскладку и не даёт карточке дёргаться. overflow скругляет саму
   картинку: у <img> свои углы, и без него она вылезала бы за рамку. */
.ft__zhkphoto {
  flex: none; width: 180px; height: 120px; overflow: hidden;
  border-radius: var(--r-fld); background: var(--bg-soft);
}
.ft__zhkphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ft__zhktext { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ft__zhktext b { font-size: 20px; font-weight: 800; line-height: 27.32px; color: var(--ink); }
.ft__zhktext span { font-size: 14px; font-weight: 500; line-height: 19.12px; color: var(--ink-2); }
.ft__zhkbtn {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 22px;
  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);
}
.ft__zhkbtn i { font-style: normal; color: var(--accent-2); }
.ft__zhkbtn:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }

/* ─── Похожие квартиры (243:278) ──────────────────────────────────────── */

.ft__similarsub { margin-top: -10px; font-size: 14px; font-weight: 500; line-height: 19.12px; color: var(--ink-2); }
.ft__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

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

@media (max-width: 1280px) {
  .ft__cols { grid-template-columns: minmax(0, 1fr); }
  .ft__tiles { grid-template-columns: repeat(3, 1fr); }
  .ft__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Телефон 390 (249:255) ───────────────────────────────────────────── */

@media (max-width: 760px) {
  .ft__in { padding: 16px var(--side) 6px; }
  .ft__head .ft__in { gap: 10px; padding-top: 16px; }
  .ft__specs .ft__in, .ft__zhk .ft__in, .ft__similar .ft__in { gap: 10px; }

  .ft__h1 { font-size: 26px; line-height: 35.52px; letter-spacing: -0.78px; }
  .ft__sub { font-size: 14px; line-height: 19.12px; }
  .ft__h2 { font-size: 18px; line-height: 24.59px; letter-spacing: -0.36px; }

  /* Числа мобильного кадра (249:271, 249:276, 250:286). */
  .ft__plan { grid-template-columns: 1fr; padding: 16px 14px 14px; gap: 10px; }
  .ft__planh { font-size: 17px; line-height: 23.22px; }
  .ft__planhint { grid-column: 1; font-size: 12px; line-height: 16.39px; }
  /* Чертёж в мобильном кадре занимает 300×500. */
  .ft__planimg { height: 500px; }
  .ft__planimg img { max-width: 300px; }

  .ft__price { padding: 18px; }
  .ft__pricecap { font-size: 12px; line-height: 16.39px; }
  .ft__pricem2 { font-size: 13px; line-height: 17.76px; }
  .ft__pay { padding: 12px 14px; }
  .ft__payrow b { font-size: 20px; line-height: 27.32px; letter-spacing: -0.4px; }
  .ft__cmp { padding: 12px 14px; }
  /* Отдельных отступов перед кнопками в мобильном кадре нет — только зазор. */
  .ft__cta { margin-top: 0; height: 52px; }
  .ft__free { margin-top: 0; }

  .ft__zhkcard { gap: 10px; padding: 16px; }
  .ft__zhkphoto { height: 120px; }
  .ft__zhktext { gap: 10px; }
  .ft__zhktext b { font-size: 18px; line-height: 24.59px; }
  .ft__zhktext span { font-size: 13px; line-height: 17.76px; }
  .ft__zhkbtn { padding: 15px 0; }
  .ft__pricebig { font-size: 28px; line-height: 38.22px; letter-spacing: -0.84px; }

  .ft__tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ft__tile { padding: 12px 14px; }
  .ft__tileval { font-size: 17px; line-height: 23.22px; }

  /* Карточка ЖК на телефоне складывается в столбец: 180 px фото и текст
     рядом в 350 не помещаются. */
  .ft__zhkcard { flex-direction: column; align-items: stretch; }
  .ft__zhkphoto { width: 100%; }
  .ft__zhkbtn { justify-content: center; }

  .ft__grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ─── Выбор канала связи (96:147) ─────────────────────────────────────────
   Кнопка «Задать вопрос» раскрывает карточку 360×529 с каналами. Работает
   тегом details — без скриптов: страница обязана быть целой и без них
   (§2, инвариант 1). */

.ask { position: relative; }
/* Стрелку-маркер убираем в обоих движках: кнопка должна выглядеть кнопкой. */
.ask > summary { list-style: none; }
.ask > summary::-webkit-details-marker { display: none; }

.ask__btn {
  display: flex; align-items: center; justify-content: center;
  height: 52px; border-radius: var(--r-fld); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15px; font-weight: 600; line-height: 20.49px; color: var(--ink);
}
.ask__btn:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.ask[open] .ask__btn { box-shadow: inset 0 0 0 1px var(--ink-3); }

/* Панель всплывает поверх, а не раздвигает карточку: иначе при раскрытии
   съезжает вниз всё, что под ней, и человек теряет место. Разворачивается
   вниз — вверх она накрывала бы цену и платёж, то есть ровно то, на что
   человек в этот момент смотрит. */
.ask__panel {
  position: absolute; z-index: 30; right: 0; top: calc(100% + 8px);
  width: 360px; max-width: min(360px, calc(100vw - 2 * var(--side)));
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px; border-radius: var(--r-card); background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 32px rgba(18,18,18,.16);
}
.ask__h { margin-bottom: 8px; font-size: 19px; font-weight: 700; line-height: 26px; }

.ask__row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px; margin: 0 -8px; border-radius: var(--r-fld);
  text-decoration: none; color: var(--ink);
}
.ask__row:hover { background: var(--bg-soft); }
.ask__ico {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--bg-soft); display: flex; align-items: center; justify-content: center;
}
.ask__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ask__txt b { font-size: 15px; font-weight: 600; line-height: 20.49px; }
.ask__txt i { font-style: normal; font-size: 12px; font-weight: 500; line-height: 16.39px; color: var(--ink-3); }

.ask__lead {
  margin-top: 8px; padding-top: 16px;
  box-shadow: inset 0 1px 0 var(--line);
  font-size: 13px; font-weight: 600; line-height: 17.76px;
  color: var(--accent-2); text-decoration: none;
}
.ask__lead:hover { text-decoration: underline; }

@media (max-width: 760px) {
  /* На телефоне карточка цены идёт во всю ширину, и панели незачем
     прижиматься к правому краю. */
  .ask__panel { right: auto; left: 0; width: 100%; padding: 18px; }
  .ask__h { font-size: 17px; line-height: 23.22px; }
}