/* ============================================================
   Brand landing — секции агентских лендингов (Portland, Сиреневый парк).
   Дополнение к landing.css, подключается ТОЛЬКО на страницах, где лендинг
   ведёт агентство и порядок секций задан данными (ключ layout в ZHK_LIST).
   Отдельный файл, чтобы не менять ни байта в вёрстке остальных ЖК.
   Использует токены из landing.css — своих цветов не заводит.
   ============================================================ */

/* ---------- Первый экран ---------- */
/* H1 здесь длиннее, чем «ЖК Dream Riva»: на общих 104px он занимает две строки
   и вместе с подзаголовком, тремя фактами и подписью выдавливает кнопки за
   границу экрана. Умеренный кегль оставляет первый экран целым. */
.hero h1 { font-size: clamp(34px, 5.4vw, 68px); }
.hero__sub {
  max-width: 640px; font-size: clamp(15px, 1.35vw, 18px);
  margin-top: 18px; padding: 12px 16px;
}

/* Строка «кто продаёт» стоит под кнопками: сначала человек читает оффер и
   действие, только потом — кто его выполняет. */
.hero__seller--under { margin-top: 20px; }

/* Дата проверки чисел — один раз под фактами, а не в каждой плашке.
   Своей подложки нет (первый экран и так плотный), читаемость на светлом
   участке фотографии держит тень. */
.hero__note {
  margin-top: 12px; font-size: 13px; line-height: 1.45;
  color: rgba(255, 255, 255, .86); max-width: 46ch;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}

/* ---------- Общее: подпись «откуда цифра» ---------- */
.srcline {
  margin-top: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3);
  max-width: 70ch;
}
.section--dark .srcline { color: rgba(255, 255, 255, .6); }

/* ---------- Карточки форматов квартир ---------- */
.offers {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.offer {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 24px 22px; background: var(--surface);
  display: flex; flex-direction: column;
}
.section--soft .offer { background: #fff; border-color: var(--line-2); }
.offer__badge {
  display: inline-flex; align-self: flex-start; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  padding: 6px 13px; border-radius: var(--pill);
}
/* Цена без скидки — перечёркнутой строкой над основной ценой. Так покупатель
   видит и сумму, которую заплатит, и от чего считается скидка, без абзаца
   пояснений: перечёркивание читается быстрее любого текста. */
.offer__price-old {
  display: block; margin-top: 16px;
  font-size: 15px; font-weight: 500; color: var(--ink-3);
  text-decoration: line-through; text-decoration-thickness: 1px;
}
.offer__price {
  margin-top: 16px; font-size: clamp(23px, 2.4vw, 28px); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.1;
}
/* Когда перечёркнутая цена есть — основная идёт сразу под ней. */
.offer__price-old + .offer__price { margin-top: 2px; }
.offer__area { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.offer__rows { margin-top: 18px; border-top: 1px solid var(--line); }
.offer__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 14.5px; line-height: 1.4;
}
.offer__row:last-child { border-bottom: none; padding-bottom: 0; }
.offer__row dt { color: var(--ink-3); flex: none; }
.offer__row dd { text-align: right; font-weight: 600; }
.offer__foot { margin-top: 16px; font-size: 13px; color: var(--ink-3); }

/* ---------- Очереди / корпуса и готовность ---------- */
.phases { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.phase {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 26px 24px; background: var(--surface);
}
.section--soft .phase { background: #fff; }
.phase__status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.phase__status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.phase h3 { margin-top: 12px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.phase p { margin-top: 10px; color: var(--ink-2); font-size: 16px; }
.phase__list { margin-top: 16px; display: grid; gap: 8px; }
.phase__list li {
  display: flex; gap: 10px; font-size: 15px; color: var(--ink-2); line-height: 1.45;
}
.phase__list .icon { width: 17px; height: 17px; color: var(--accent); margin-top: 4px; }

/* ---------- Список фактов внутри блока «жизнь внутри» ---------- */
/* Там, где в блоке несколько чисел (места в паркинге, площади, цены), абзац
   читается как стена. Список даёт глазу зацепиться за каждую цифру. */
.feat__list { margin-top: 16px; display: grid; gap: 9px; max-width: 46ch; }
.feat__list li {
  position: relative; padding-left: 20px;
  font-size: 15.5px; line-height: 1.45; color: var(--ink-2);
}
.feat__list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .55;
}

/* ---------- Сравнение отделки ---------- */
.fin3 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.fin3-card {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); display: flex; flex-direction: column;
}
.fin3-card__media { aspect-ratio: 4 / 3; background: var(--line); }
.fin3-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fin3-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.fin3-card h3 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.fin3-card__count {
  margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--accent);
}
.fin3-card p { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.fin3-card ul { margin-top: 14px; display: grid; gap: 7px; }
.fin3-card li {
  font-size: 14.5px; color: var(--ink-2); line-height: 1.45;
  padding-left: 18px; position: relative;
}
.fin3-card li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--line-2);
}

/* ---------- Условия приобретения ---------- */
.terms { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.term {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 26px; background: var(--surface);
}
.section--soft .term { background: #fff; }
.term h3 {
  font-size: 18px; font-weight: 600; letter-spacing: -.01em;
  display: flex; gap: 10px; align-items: flex-start;
}
.term h3 .icon { width: 19px; height: 19px; color: var(--accent); margin-top: 3px; flex: none; }
.term p { margin-top: 10px; font-size: 15.5px; color: var(--ink-2); }
.terms-legal {
  margin-top: 22px; font-size: 13px; line-height: 1.55; color: var(--ink-3); max-width: 78ch;
}

/* ---------- FAQ ---------- */
.faq { max-width: 900px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: clamp(17px, 1.7vw, 20px); font-weight: 600; letter-spacing: -.01em;
  line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .25s ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.faq__answer { padding: 0 44px 24px 0; font-size: 16.5px; color: var(--ink-2); max-width: 72ch; }
.faq__answer p + p { margin-top: 12px; }

/* ---------- Мобильные правки ---------- */
/* Первый экран на телефоне. Три факта общими карточками вставали в три полных
   строки и вместе с заголовком и подзаголовком выталкивали кнопку за экран —
   а на 375 px кнопка обязана быть видна без прокрутки. Здесь факты сжаты
   в компактные плашки, которые переносятся по строке. */
@media (max-width: 560px) {
  .hero { padding-top: clamp(88px, 22vw, 104px); padding-bottom: 28px; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 38px); }
  .hero__sub { font-size: 14.5px; line-height: 1.38; margin-top: 13px; padding: 10px 13px; }
  .hero__stats { gap: 8px; margin-top: 18px; }
  .hero__stat { padding: 9px 13px; gap: 9px; }
  .hero__stat .icon { width: 18px; height: 18px; }
  .hero__stat small { font-size: 10.5px; }
  .hero__stat b { font-size: 15px; }
  .hero__cta { margin-top: 20px; gap: 10px; }
  .hero__cta .btn { width: 100%; }
  .hero__seller--under { margin-top: 12px; padding: 7px 12px; font-size: 14px; }
  .hero__note { margin-top: 9px; font-size: 12.5px; }
}

/* Карточки квартир на телефоне — горизонтальный слайдер, а не колонка.
   Шесть карточек в столбик добавляли к странице около 3 500 px прокрутки
   на каждую такую секцию, и человек пролистывал их вслепую, чтобы добраться
   до следующего смыслового блока. Слайдер оставляет секции высоту одной
   карточки, а сравнение лотов между собой становится движением большого
   пальца, а не долгой вертикальной прокруткой.

   Карточка занимает 84 % ширины: край следующей всегда виден и служит
   единственной нужной подсказкой, что блок листается. Отрицательные поля
   выводят ленту под края экрана — за overflow страницы это не выходит,
   у body стоит overflow-x: clip. */
@media (max-width: 720px) {
  .offers {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    scroll-padding-inline: var(--pad);
    padding-bottom: 6px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .offers::-webkit-scrollbar { display: none; }
  .offers .offer {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }

  .offer { padding: 20px 20px 18px; }
  .phase { padding: 22px 20px; }
  .term { padding: 20px; }
  .fin3-card__body { padding: 18px 20px 20px; }
  .faq__item summary { padding: 18px 38px 18px 0; }
  .faq__answer { padding-right: 0; }
  .hero__note { font-size: 12.5px; }
}