/* podbor.html — дубль VK-преленда: узкая колонка, слайдеры, видео.
   Палитра/кнопки/квиз — из main.css; здесь только специфика страницы.
   Вертикальный ритм: внутри блока медиа/списки отбиваются --gap, заголовок → контент 1rem. */

.preland {
  max-width: 480px;
  padding-block: 1.25rem 2.5rem;
  --gap: 1.25rem;
}
/* стили ниже грузятся только на podbor.html — селекторы без скоупа безопасны */
.preland__title { font-size: clamp(1.45rem, 5.5vw, 1.9rem); }
h1, h2 { text-wrap: balance; line-height: 1.15; letter-spacing: -0.02em; }

/* слоистая тень вместо обводок-шума: разница фонов + «парение» (UX-ревью 02.07) */
:root {
  --shadow-card: 0 24px 48px -12px rgb(26 26 26 / 8%), 0 4px 16px rgb(26 26 26 / 4%);
}

.preland__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: #000;
  margin-block: var(--gap);
}

/* слайдер как в VK: горизонтальная лента со снапом */
.slider {
  display: flex;
  gap: .6rem;
  margin-block: var(--gap, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.slider::-webkit-scrollbar { display: none; }
.slider img {
  width: 76%;
  height: auto; /* перебивает height-атрибут (презентационный хинт), иначе aspect-ratio мёртв */
  flex-shrink: 0;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  scroll-snap-align: center;
  background: var(--c-line);
}

.preland__pins {
  list-style: none;
  padding: 0;
  margin: .5rem 0 var(--gap);
}
.preland__pins li { padding: .2rem 0 .2rem 1.3rem; position: relative; }
.preland__pins li::before {
  content: "";
  position: absolute;
  left: 0; top: .72rem;
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--c-accent);
}

/* компактные 4 шага в преленде: тонкий обводной круг, не залитый (UX-ревью 02.07) */
.steps__list--compact { margin: .5rem 0 var(--gap); }
.steps__list--compact li { padding-block: .35rem; }
.steps__list--compact li::before {
  top: .3rem;
  width: 1.8rem; height: 1.8rem;
  font-size: .85rem;
  background: transparent;
  color: var(--c-accent);
  border: 1.5px solid var(--c-accent);
}
.steps__list--compact b { font-weight: 600; }

.preland__cta { margin-top: calc(var(--gap) * 1.5); }
.preland__cta .micro { margin-top: .5rem; text-align: center; }
.preland__cta--hero { margin-block: 1.25rem 1.75rem; } /* ранний CTA в герое (#5) */

/* Плашка доверия у CTA (#4): 3 пилона — столбик на мобиле → строка на десктопе */
.trust-strip { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .75rem; }
.trust-strip__item { padding-left: .9rem; border-left: 3px solid var(--c-accent); }
.trust-strip__item b { display: block; font-size: 1.02rem; line-height: 1.25; }
.trust-strip__item span { color: var(--c-muted); font-size: .9rem; }
@media (min-width: 720px) {
  .trust-strip { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

.preland__bullets {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  padding: 0;
  margin: .6rem 0 .25rem;
}
.preland__bullets li {
  font-size: .85rem;
  color: var(--c-muted);
}
.preland__bullets li::before { content: "· "; color: var(--c-accent); font-weight: 700; }

/* бейдж без охры: строгая линия бренда, жир только на цифре (UX-ревью 02.07) */
.badge--podbor {
  color: var(--c-ink);
  border-left-color: var(--c-accent);
  font-weight: 400;
  margin-top: .5rem;
}
.badge--podbor b { font-weight: 700; }

/* ── Блоки vsyo-gotovo ниже преленда ── */

/* десктоп: заголовки секций по центру (как на vsyo-gotovo), контент-гриды остаются */
@media (min-width: 720px) {
  main > section h2,
  main > section .muted,
  .arenda > .wrap > p { text-align: center; }
}

/* комплектации: карточки в горизонтальную ленту на мобилке, грид на десктопе */
.kompl__cards {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-top: 1.25rem;
}
.kompl__cards::-webkit-scrollbar { display: none; }
.kompl-card {
  flex: 0 0 76%;
  scroll-snap-align: center;
  background: var(--c-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.kompl-card img { width: 100%; height: 240px; object-fit: cover; display: block; }
.kompl-card h3 { font-size: 1.05rem; margin: .8rem 1rem .3rem; }
.kompl-card p { font-size: .9rem; color: var(--c-muted); margin: 0 1rem .5rem; }
.kompl-card ul { list-style: none; padding: 0 1rem; margin: 0 0 1rem; }
.kompl-card li {
  font-size: .9rem;
  padding: .15rem 0 .15rem 1.1rem;
  position: relative;
}
.kompl-card li::before {
  content: "";
  position: absolute;
  left: 0; top: .62rem;
  width: .35rem; height: .35rem;
  border-radius: 50%;
  background: var(--c-accent);
}
.kompl-card .micro { padding-bottom: .25rem; }
@media (min-width: 720px) {
  .kompl__cards { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}

/* табы «Дизайнерские решения» */
.tabs__nav {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 1.25rem 0;
}
@media (min-width: 720px) { .tabs__nav { justify-content: center; } }
.tabs__nav::-webkit-scrollbar { display: none; }
/* активный таб — тёмная плашка; неактив — просто текст (красная обводка читалась «ошибкой») */
.tabs__nav [role="tab"] {
  flex-shrink: 0;
  min-height: 44px;
  padding: .5rem 1.05rem;
  font-size: .95rem;
  font-weight: 600;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
}
.tabs__nav [aria-selected="true"] {
  background: var(--c-ink);
  color: #fff;
}
.tabs__nav [role="tab"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[data-tab-panel] h3 { font-size: 1.05rem; margin: .9rem 0 .2rem; }
[data-tab-panel] p { color: var(--c-muted); margin: 0 0 .4rem; }
/* десктоп: фото таба гридом, а не вертикальной лентой-гигантом */
@media (min-width: 720px) {
  [data-tab-panel] { max-width: 560px; margin-inline: auto; }
  [data-tab-panel] .slider { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); overflow: visible; }
  [data-tab-panel] .slider img { width: 100%; }
}

/* сравнение «выгода»: обе карточки спокойные, бренд — маркером-полоской,
   а не красной простынёй (UX-ревью 02.07: красная заливка «выжигала» мобилку) */
.benefit__cards { display: grid; gap: .9rem; margin-top: 1.25rem; }
.benefit-card {
  background: var(--c-card);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem 1.75rem;
  box-shadow: var(--shadow-card);
}
.benefit-card h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.benefit-card ul { list-style: none; padding: 0; margin: 0; }
.benefit-card li { padding: .3rem 0 .3rem 1.4rem; position: relative; font-size: .95rem; }
/* однозначная семантика: зелёный ✓ = плюсы, красный ✕ = минусы (замечание 02.07 —
   красная галочка читалась двусмысленно) */
.benefit-card li::before { content: "✕"; position: absolute; left: 0; color: var(--c-err); font-weight: 700; }
.benefit-card--accent { border-top: 3px solid var(--c-accent); }
.benefit-card--accent h3 { color: var(--c-accent-dark); }
.benefit-card--accent li::before { content: "✓"; color: var(--c-ok); }
@media (min-width: 720px) { .benefit__cards { grid-template-columns: 1fr 1fr; } }

/* карточки преимуществ (аренда) */
.icon-cards { display: grid; gap: .9rem; margin-top: 1.25rem; }
.icon-card {
  background: var(--c-card);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-card);
}
.icon-card h3 { font-size: 1rem; margin: 0 0 .35rem; }
.icon-card p { font-size: .9rem; color: var(--c-muted); margin: 0; }
@media (min-width: 720px) { .icon-cards { grid-template-columns: 1fr 1fr; } }

/* мини-каталог: имя ЖК, иерархия цены, кнопки по нижней линии;
   кнопка — вторичное действие (серая), внимание — планировке и цене */
.flat-card__complex { font-size: .85rem; color: var(--c-muted); margin: 0 0 .5rem; }
.catalog .flat-card { display: flex; flex-direction: column; border: 0; box-shadow: var(--shadow-card); }
.catalog .flat-card__body { display: flex; flex-direction: column; flex: 1; }
.catalog .flat-card img { height: 220px; } /* планировка — главный критерий, 170px слепые */
.catalog .flat-card__price { font-size: 1.45rem; margin-bottom: .7rem; }
/* кнопка каталога: брендовая подложка — очевидно кликабельна (серая читалась «мёртвой»),
   но не спорит с ценой, как сплошная тёмная */
.catalog .flat-card .btn--dark {
  margin-top: auto;
  background: #fdeef0;
  color: var(--c-accent-dark);
  border: 1.5px solid rgb(200 16 46 / 25%);
}
.catalog .flat-card .btn--dark:hover { background: var(--c-accent); color: #fff; }
.catalog .flat-card .tag { background: var(--sdan-bg); color: var(--sdan-ink); border-radius: var(--r-plate); }
@media (hover: hover) {
  .catalog .flat-card { transition: translate .3s cubic-bezier(.25, .46, .45, .94), box-shadow .3s; }
  .catalog .flat-card:hover { translate: 0 -4px; }
}
.catalog__cta { margin-top: 1.25rem; max-width: 480px; }

/* видео-отзывы */
.otzyvy__grid { display: grid; gap: .9rem; margin-top: 1.25rem; }
.video-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  cursor: pointer;
  text-align: left;
}
.video-facade img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
/* play — матовое стекло, не красная нашлёпка (UX-ревью 02.07) */
.video-facade__play {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -70%;
  display: grid; place-items: center;
  width: 3.2rem; height: 3.2rem;
  background: rgb(255 255 255 / 22%);
  backdrop-filter: blur(8px);
  border: 1px solid rgb(255 255 255 / 45%);
  color: #fff;
  border-radius: 50%;
  font-size: 1rem;
  padding-left: .2rem; /* оптическая центровка треугольника */
}
.video-facade__title {
  position: absolute;
  inset-inline: 0; bottom: 0;
  padding: 1.4rem .9rem .7rem;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  background: linear-gradient(transparent, rgb(0 0 0 / 75%));
}
@media (min-width: 720px) { .otzyvy__grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Квиз на мобилке: сверху, не bottom-sheet — клавиатура на шаге контактов
   перекрывала половину нижнего попапа (замечание 02.07). Скролл внутри формы. ── */
@media (max-width: 719px) {
  .quiz {
    margin: 0 auto auto;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 100dvh;
  }
}
.quiz__form { overflow-y: auto; }

/* ── Шаг контактов: кнопка сабмита прибита к низу видимой зоны (R-065) ──
   Клавиатура на мобиле перекрывала «Получить подборку» → 17 дошли до контактов, 0 кликов (06.07).
   На мобиле секция-контакты растягивается на всю форму, зона сабмита уходит margin:auto вниз и
   sticky-прибивается над клавиатурой (bottom:--kb из visualViewport; на Android вьюпорт ресайзит
   interactive-widget). На десктопе — обычный поток. */
.quiz__submit { padding-top: .75rem; }
.quiz__submit .btn { width: 100%; }
.quiz__submit .micro { margin: .5rem 0 0; }
@media (max-width: 719px) {
  .quiz__step[data-step="3"]:not([hidden]) { display: flex; flex-direction: column; flex: 1; }
  .quiz__submit {
    margin-top: auto;
    position: sticky;
    bottom: var(--kb, 0px);
    background: #fff;
    box-shadow: 0 -14px 20px -14px rgb(0 0 0 / 25%);
  }
}

/* Селект call_slot (vitrina.css не грузится на podbor) — под стиль text/tel-инпутов */
.field select {
  width: 100%;
  font-size: 1rem;
  padding: .75rem;
  min-height: 48px;
  border: 1px solid #bbb;
  border-radius: 10px;
  background: #fff;
}

/* финальный CTA */
.final { text-align: center; }
.final .btn { display: block; max-width: 480px; margin-inline: auto; }
.final .micro { margin-top: .5rem; }

/* каталог: CTA по центру на десктопе */
@media (min-width: 720px) { .catalog__cta { margin-inline: auto; } }

/* ── Футер: полноценный низ, а не две сирот-строки ── */
.footer--podbor {
  background: var(--c-card);
  padding-block: 2rem 2.5rem;
}
.footer--podbor .footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.footer--podbor .footer__phone {
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 700;
}
.footer--podbor .footer__trust {
  margin: .25rem 0 1rem;
  font-size: .9rem;
  color: var(--c-muted);
}
.footer--podbor .footer__legal {
  list-style: none;
  padding: 1rem 0 0;
  margin: 0;
  border-top: 1px solid var(--c-line);
}
.footer--podbor .footer__legal li {
  font-size: .8rem;
  color: var(--c-muted);
  padding: .2rem 0;
}
.footer--podbor .footer__legal a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .slider { scroll-behavior: auto; }
}