/* Витрина 72dom.life — дизайн-система поверх main.css + podbor.css.
   Направление (04.07, /frontend-design): «тёплая готовая квартира после Севера».
   Токены: бумага/чернила/бренд-красный/тёплый тёмный; дисплей Golos Text;
   сигнатура — карточки ЖК как адресные таблички дома.
   Иерархия радиусов: карточки 12 / кнопки 10 / таблички 4. */

section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--alt { background: #fff; border-block: 1px solid var(--v-line); }

/* ── Акция-стрип ── */
.promo-strip {
  background: var(--v-night);
  color: #efe9e2;
  font-size: .85rem;
  text-align: center;
  padding: .5rem 1rem;
}
.promo-strip a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ── Hero: фото квартиры как тезис ── */
.hero-v {
  position: relative;
  padding-block: 0;
  color: #fff;
  background: var(--v-night);
  overflow: hidden;
}
.hero-v__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 65% 40%;
}
/* фоновое видео поверх постера (постер = LCP + фолбэк) */
.hero-v__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 65% 40%;
}
/* при reduced-motion видео скрываем — показывается постер-img снизу */
@media (prefers-reduced-motion: reduce) {
  .hero-v__video { display: none; }
}
.hero-v::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgb(21 17 15 / 88%) 0%, rgb(21 17 15 / 45%) 45%, rgb(21 17 15 / 20%) 100%);
}
.hero-v .wrap--wide {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(430px, 62vh, 620px);
  padding-block: 2.2rem 1.6rem;
}
.hero-v h1 { max-width: 15ch; margin: 0 0 .6rem; text-wrap: balance; text-shadow: 0 1px 12px rgb(0 0 0 / 25%); }
.hero-v__sub {
  max-width: 44ch;
  margin: 0 0 1.4rem;
  font-size: clamp(.98rem, 2.5vw, 1.1rem);
  color: rgb(255 255 255 / 88%);
}
.hero-v .micro { color: rgb(255 255 255 / 60%); margin-top: .6rem; }

@media (prefers-reduced-motion: no-preference) {
  .hero-v h1, .hero-v__sub, .hero-filter { animation: hero-up .6s ease-out backwards; }
  .hero-v__sub { animation-delay: .08s; }
  .hero-filter { animation-delay: .16s; }
  @keyframes hero-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}

/* фильтр-карточка поверх фото */
.hero-filter {
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: 0 12px 40px rgb(21 17 15 / 35%);
  padding: .9rem;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  color: var(--v-ink);
}
/* чипы фильтра: мультивыбор — состояние читается заливкой, без радио-кружков main.css */
.hero-filter .chip { margin: 0; }
.hero-filter .chip span {
  padding: .42rem 1.05rem;
  min-height: 42px;
  font-size: .95rem;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}
.hero-filter .chip span:hover { border-color: var(--v-muted); }
.hero-filter .chip span::before { display: none; }
.hero-filter .chip input:checked + span {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: #fdf1f3;
  font-weight: 600;
}
/* gap: .btn — inline-flex, пробел-нода между «Смотреть квартиры» и <span data-flats-count>
   схлопывается на границе флекс-элемента → счётчик прилипал («квартиры(429)»). */
.hero-filter .btn { margin-left: auto; font-weight: 600; gap: .35rem; }
@media (max-width: 640px) {
  .hero-filter .btn { width: 100%; margin-left: 0; }
}

/* ── Подборки: лента с фото ── */
.podborki {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
}
@media (min-width: 760px) { .podborki { grid-template-columns: repeat(3, 1fr); } }
.podborka {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 150px;
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--v-night);
  isolation: isolate;
}
@media (min-width: 760px) { .podborka { min-height: 190px; } }
.podborka img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease-out;
}
.podborka::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(21 17 15 / 82%) 0%, rgb(21 17 15 / 15%) 60%);
}
.podborka:hover img { transform: scale(1.04); }
.podborka b { font-size: 1.08rem; font-weight: 700; padding: 0 1rem; }
.podborka .muted { color: rgb(255 255 255 / 82%); font-size: .85rem; padding: .1rem 1rem .9rem; }

/* ── ЖК: адресные таблички ── */
.zhk-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 640px) { .zhk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .zhk-grid { grid-template-columns: repeat(3, 1fr); } }
.zhk-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem;
  min-height: 230px;
  background: var(--v-night);
  color: #f2ece5;
  border-radius: var(--r-plate);
  border-top: 3px solid var(--c-accent);
  padding: 1.15rem 1.2rem 1.05rem;
  text-decoration: none;
  box-shadow: 0 2px 10px rgb(21 17 15 / 18%);
  transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.zhk-card__photo {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease-out;
}
.zhk-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(21 17 15 / 90%) 0%, rgb(21 17 15 / 55%) 45%, rgb(21 17 15 / 22%) 100%);
}
.zhk-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgb(21 17 15 / 28%); }
.zhk-card:hover .zhk-card__photo { transform: scale(1.04); }
.zhk-card .tag {
  align-self: flex-start;
  background: var(--c-accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: .18rem .5rem;
}
.zhk-card .tag--muted { background: rgb(255 255 255 / 14%); color: #d8d0c7; }
.zhk-card__name { font-weight: 700; font-size: 1.22rem; letter-spacing: -0.01em; margin-top: .15rem; }
.zhk-card__facts { color: #b7ada2; font-size: .88rem; font-variant-numeric: tabular-nums; }
.zhk-card__more { color: #fff; font-size: .88rem; font-weight: 500; margin-top: .5rem; opacity: .85; }
.zhk-card:hover .zhk-card__more { opacity: 1; color: #ffb3bf; }

/* ── Карточки-факты (страница /bonus) ── */
.standard-cards { display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 640px) { .standard-cards { grid-template-columns: repeat(2, 1fr); } }
/* 6 карточек-фактов /bonus: repeat(3) = ровные 2×3 (было repeat(4) → ряд 4+2 с дырой) */
@media (min-width: 960px) { .standard-cards { grid-template-columns: repeat(3, 1fr); } }
.standard-card {
  background: #fff;
  border: 1px solid var(--v-line);
  border-radius: var(--r-card);
  padding: 1.15rem;
}
.standard-card h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.standard-card p { margin: 0; font-size: .9rem; color: var(--v-muted); }

/* ── Паспорт стандарта ── */
.spec { max-width: 860px; }
.spec-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .15rem 2rem;
  padding-block: 1rem;
  border-top: 1px solid var(--v-line);
}
@media (min-width: 700px) { .spec-row { grid-template-columns: 220px 1fr; } }
.spec-row:last-child { border-bottom: 1px solid var(--v-line); }
.spec-row b { font-weight: 700; font-size: 1.02rem; }
.spec-row p { margin: 0; color: var(--v-muted); font-size: .95rem; max-width: 58ch; }

/* ── Тёмная секция бонуса ── */
.bonus-band {
  background: var(--v-night);
  color: #f2ece5;
  border: 0;
}
.bonus-band .wrap--wide {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 3rem;
}
.bonus-band h2 { color: #fff; margin: 0; max-width: 21ch; }
.bonus-band h2 .accent { color: #ff8fa0; }
.bonus-band p { color: #c9bfb4; max-width: 46ch; margin: .4rem 0 0; }
.bonus-band .btn { flex-shrink: 0; }
.bonus-band .micro { flex-basis: 100%; color: #93897e; margin: 0; }

/* ── Шаги покупки (реальная последовательность — номера уместны) ── */
.steps-v { counter-reset: step; display: grid; gap: 0; }
@media (min-width: 720px) { .steps-v { grid-template-columns: repeat(4, 1fr); gap: 0 1.75rem; } }
.step-v { position: relative; padding: 1.1rem 0 1.1rem 3.1rem; }
@media (min-width: 720px) {
  .step-v { padding: 1.4rem 0 0; border-top: 2px solid var(--v-line); }
  .step-v:first-child { border-top-color: var(--c-accent); }
}
.step-v::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  color: var(--c-accent);
  font-weight: 700;
  font-size: 1rem;
}
@media (min-width: 720px) {
  .step-v::before { position: static; margin-bottom: .6rem; }
}
.step-v b { display: block; font-size: 1.05rem; margin-bottom: .15rem; }
.step-v .muted { font-size: .9rem; color: var(--v-muted); }

/* ── Квиз: селект call_slot ── */
.field select {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid var(--v-line);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: var(--v-ink);
}

/* ── Футер-карта ── */
.footer--podbor { border-top: 1px solid var(--v-line); }
.footer-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding-block: .75rem 1.25rem; }
@media (min-width: 720px) { .footer-map { grid-template-columns: repeat(4, 1fr); } }
.footer-map h4 {
  margin: 0 0 .5rem;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--v-muted);
}
.footer-map ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; }
.footer-map a { color: inherit; text-decoration: none; }
.footer-map a:hover { color: var(--c-accent); }

/* ── Крошки, контакты ── */
.crumbs { font-size: .84rem; color: var(--v-muted); padding-block: 1.1rem 0; }
.crumbs a { color: inherit; }
.contact-card {
  background: #fff;
  border: 1px solid var(--v-line);
  border-radius: var(--r-card);
  padding: 1.4rem;
  display: grid; gap: .45rem;
  max-width: 480px;
}
.contact-card .phone-big {
  font-size: 1.65rem; font-weight: 800;
  color: var(--v-ink); text-decoration: none;
  font-variant-numeric: tabular-nums;
}

/* ── Комплектации: ровный грид (перебиваем карусель podbor.css) ── */
.kompl .kompl__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  overflow: visible;          /* убираем горизонтальный скролл-снап */
  scroll-snap-type: none;
  align-items: stretch;
}
@media (min-width: 720px) {
  .kompl .kompl__cards { grid-template-columns: repeat(3, 1fr); }
}
.kompl .kompl-card {
  flex: initial;              /* сбрасываем flex:0 0 76% карусели */
  display: flex;
  flex-direction: column;
  border: 1px solid var(--v-line);
  box-shadow: none;
}
.kompl .kompl-card img { height: 220px; }
.kompl .kompl-card > *:last-child { margin-bottom: 0; }
/* CTA карточки: на всю ширину карточки (единообразно с сеткой .wrap--wide) */
.kompl .kompl-card .btn--kompl {
  margin: auto 1rem 1.1rem;   /* прижать к низу, поля как у контента карточки */
  align-self: stretch;         /* тянем на всю ширину карточки, а не по контенту */
  width: auto;
  padding: .6rem 1.3rem;
  font-size: .95rem;
  border-radius: var(--r-btn);
  white-space: nowrap;
}

/* ── Финальный CTA: в ритме страницы, не сирота ── */
.final {
  text-align: center;
  background: #fff;
  border-top: 1px solid var(--v-line);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.final h2 { margin-inline: auto; }
.final .btn--big { width: auto; min-width: min(340px, 100%); padding-inline: 3rem; }

/* заголовки секций витрины — влево (перебиваем центрирование podbor.css);
   финальный CTA остаётся центрованным */
@media (min-width: 720px) {
  main > section h2,
  main > section .muted { text-align: left; }
  .final h2, .final .micro { text-align: center; }
}
.bonus-band .btn { width: auto; padding-inline: 2.2rem; }

/* фокус-видимость на интерактиве витрины */
.podborka:focus-visible, .zhk-card:focus-visible, .site-nav a:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* Премиум-тизер апарт-отеля «Дом Форм» → /apart-form (золотой акцент = «другой класс») */
.apart-teaser { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.apart-teaser__inner {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.apart-teaser__media {
  position: relative; display: block; border-radius: var(--r-card); overflow: hidden;
  aspect-ratio: 16 / 9; background: #14161a;
}
.apart-teaser__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.apart-teaser__media:hover img { transform: scale(1.04); }
.apart-teaser__badge {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(20, 22, 26, .82); color: #d9b676; backdrop-filter: blur(3px);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: var(--r-plate);
}
.apart-teaser__eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: .74rem;
  font-weight: 700; color: #b0894f; margin: 0 0 .6rem;
}
.apart-teaser__text h2 { margin: 0 0 .7rem; }
.apart-teaser__text .btn { margin-top: 1.3rem; }
@media (prefers-reduced-motion: reduce) { .apart-teaser__media img { transition: none; } }
@media (max-width: 720px) {
  .apart-teaser__inner { grid-template-columns: 1fr; }
}

/* ── Hero сервисных страниц: асимметричный сплит (текст слева + фото/рендер справа) ── */
.page-hero { padding-block: clamp(1.2rem, 3vw, 2.2rem) clamp(2rem, 5vw, 3.4rem); }
.page-hero__inner { display: grid; gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
@media (min-width: 860px) { .page-hero__inner { grid-template-columns: 1fr 1.05fr; } }
.page-hero__text .crumbs { padding-top: 0; }
.page-hero__lead { max-width: 54ch; font-size: 1.05rem; color: var(--v-ink); margin: .2rem 0 1.2rem; }
.page-hero__cta { width: auto; align-self: flex-start; padding-inline: 2.6rem; }
/* единая форма 16:9 на всех страницах — рендеры/кадры разной пропорции кропятся ровно */
.page-hero__media img {
  width: 100%; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
@media (max-width: 640px) { .page-hero__cta { width: 100%; } }