/* === RESPONSIVE.CSS === */
/* assets/css/responsive.css */
/* НАЗНАЧЕНИЕ: Форма заявки и адаптив под планшет и мобильный */
/* СВЯЗИ: tokens.css, sections.css, main.css, calculator.css */
/* РАЗМЕР: ~380 строк */

/* ==========================================================
   ФОРМА ЗАЯВКИ
   ========================================================== */

.request {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}

.request-head .kicker { display: block; margin-bottom: var(--s4); }
.request-head h2 { margin-bottom: var(--s5); }

.request-list { margin-top: var(--s6); }

.request-list li {
  position: relative;
  padding-left: var(--s6);
  margin-bottom: var(--s3);
  font-size: 15px;
  color: var(--on-dark);
}

.request-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 14px;
  height: 1px;
  background: var(--champagne);
}

.request-form {
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: var(--r-lg);
  background: rgba(246, 246, 244, .05);
  box-shadow: inset 0 0 0 1px var(--rule-dark);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.field { margin-bottom: var(--s4); }

.field > label,
.choices legend {
  display: block;
  margin-bottom: var(--s2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--champagne);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px var(--s4);
  border-radius: var(--r-sm);
  background: rgba(246, 246, 244, .06);
  box-shadow: inset 0 0 0 1px var(--rule-dark);
  color: var(--paper);
  font-size: 15px;
  transition: box-shadow .3s ease, background-color .3s ease;
}

.field textarea { min-height: 88px; resize: vertical; }

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--champagne) 50%),
                    linear-gradient(135deg, var(--champagne) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s8);
}

.field select option { background: var(--graphite); color: var(--paper); }

.field ::placeholder { color: var(--on-dark-soft); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: rgba(246, 246, 244, .09);
  box-shadow: inset 0 0 0 1px var(--champagne);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  box-shadow: inset 0 0 0 1px #C9705E;
}

.field .err {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: #E3948A;
}

.field .err:empty { display: none; }

/* -- Чекбоксы -- */

.choices { border: none; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s2) 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--on-dark);
  cursor: pointer;
}

.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice-box {
  position: relative;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--rule-dark);
  transition: background-color .25s ease, box-shadow .25s ease;
}

.choice-box::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid var(--graphite);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .25s var(--out-quart);
}

.choice input:checked + .choice-box {
  background: var(--champagne);
  box-shadow: inset 0 0 0 1px var(--champagne);
}

.choice input:checked + .choice-box::after { transform: rotate(45deg) scale(1); }

.choice input:focus-visible + .choice-box {
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
}

.field-consent { margin-top: var(--s5); }

/* -- Honeypot: люди не видят, боты заполняют.
      Прячем через clip, а не через сдвиг влево - сдвиг растягивает страницу. -- */

.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -- Кнопка и сообщения -- */

.form-submit { width: 100%; margin-top: var(--s5); }

.form-submit.loading { color: transparent; pointer-events: none; }

.form-submit.loading::after {
  content: '';
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(17, 21, 26, .3);
  border-top-color: var(--graphite);
  border-radius: var(--r-pill);
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.form-msg {
  display: none;
  margin-top: var(--s4);
  padding: var(--s4);
  border-radius: var(--r-sm);
  font-size: 14.5px;
  line-height: 1.5;
}

.form-msg.show { display: block; }

.form-msg.ok {
  background: rgba(194, 168, 120, .14);
  box-shadow: inset 0 0 0 1px rgba(194, 168, 120, .45);
  color: var(--champagne);
}

.form-msg.fail {
  background: rgba(201, 112, 94, .12);
  box-shadow: inset 0 0 0 1px rgba(201, 112, 94, .4);
  color: #E3948A;
}

.form-note {
  margin-top: var(--s4);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--on-dark-soft);
}

/* ==========================================================
   ШИРОКИЕ ЭКРАНЫ
   ========================================================== */

@media (min-width: 1600px) {
  :root { --wrap: 1360px; }
}

/* ==========================================================
   ПЛАНШЕТ ГОРИЗОНТАЛЬНЫЙ
   ========================================================== */

@media (max-width: 1080px) {
  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rung { grid-template-columns: minmax(0, 210px) minmax(40px, 1fr) minmax(0, 110px) minmax(0, 150px); }
}

/* ==========================================================
   ПЛАНШЕТ
   ========================================================== */

@media (max-width: 980px) {
  .band-head { grid-template-columns: 1fr; gap: var(--s5); align-items: start; }

  .hero-lead   { grid-template-columns: 1fr; align-items: start; }
  .project     { grid-template-columns: 1fr; }
  .place       { grid-template-columns: 1fr; }
  .about-grid  { grid-template-columns: 1fr; }
  .request     { grid-template-columns: 1fr; }

  .place-shot { position: static; }
  .place-shot img { aspect-ratio: 16 / 10; }

  .calc-controls { grid-template-columns: 1fr; }
  .calc-results  { grid-template-columns: 1fr; }
  .calc-cta      { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot:first-child { grid-column: span 2; grid-row: auto; }
  .shot:first-child img { aspect-ratio: 16 / 9; }
}

/* ==========================================================
   МОБИЛЬНАЯ НАВИГАЦИЯ
   ========================================================== */

@media (max-width: 900px) {
  .nav      { display: none; }
  .head-cta { display: none; }
  .burger   { display: flex; }
  .sticky-cta { display: block; }

  .site-head .wrap { height: 68px; }
  .page { padding-top: 68px; }
  html { scroll-padding-top: 78px; }
}

/* ==========================================================
   МОБИЛЬНЫЙ
   ========================================================== */

@media (max-width: 720px) {
  :root { --band: clamp(56px, 12vw, 72px); }

  .hero { padding-top: 108px; }

  .hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .metric,
  .metric + .metric {
    padding: var(--s5) var(--s4) var(--s5) 0;
    border-left: none;
  }

  .metric:nth-child(n + 3) { border-top: 1px solid var(--rule); }

  .rung {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s2) var(--s4);
    align-items: baseline;
  }

  .rung-rule { display: none; }
  .rung-when { grid-column: 1; font-size: 12.5px; }
  .rung-mark { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  .phases        { grid-template-columns: 1fr; }
  .calc-invest   { grid-template-columns: 1fr; }
  .form-row      { grid-template-columns: 1fr; gap: 0; }
  .foot-top      { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .docs-cta { flex-direction: column; align-items: flex-start; }
  .docs-cta .btn { width: 100%; }

  .doc { grid-template-columns: 22px minmax(0, 1fr); gap: var(--s4); }
  .doc-state { grid-column: 2; justify-self: start; }

  .hero-cta .btn { width: 100%; }

  .unit-facts { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; }
  .shot:first-child { grid-column: span 1; }
  .shot:first-child img { aspect-ratio: 4 / 3; }

  .foot-top { grid-template-columns: 1fr; gap: var(--s6); }
  .place-facts { grid-template-columns: 1fr; gap: var(--s4); }
  .times { grid-template-columns: 1fr; }
  .entry-card { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .amenities, .flow { grid-template-columns: 1fr; }

  /* Длинные значения в две строки читаются хуже, чем метка над значением */
  .spec-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .spec-row dd { text-align: left; }
}

/* ==========================================================
   ТАП-ЗОНЫ НА СЕНСОРНЫХ ЭКРАНАХ
   Ориентир - 44px. Меньше палец не попадает стабильно.
   ========================================================== */

@media (max-width: 900px) {
  .brand {
    min-height: 44px;
    align-items: center;
  }

  .link {
    min-height: 44px;
    padding-block: 11px 8px;
  }

  .choice {
    min-height: 44px;
    align-items: center;
    padding-block: var(--s2);
  }

  .foot-col a,
  .foot-legal a,
  .post-more,
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .foot-col li + li { margin-top: 0; }

  /* Видимая дорожка остается тонкой, а нажимается вся высота */
  .calc-range {
    height: 44px;
    padding-block: 21px;
    background-clip: content-box;
  }

  .calc-cta .btn,
  .docs-cta .btn,
  .more-toggle { width: 100%; justify-content: center; }
}

/* ==========================================================
   ЧИТАЕМОСТЬ ТЕКСТА НА ТЕЛЕФОНЕ
   Нижний предел: 14px для содержательного текста,
   12.5px для служебных подписей капсом. Ниже не опускаемся.
   ========================================================== */

@media (max-width: 720px) {
  /* -- Подписи капсом -- */
  .kicker,
  .metric dt,
  .unit-facts dt,
  .place-facts dt,
  .calc-label,
  .ci-item span,
  .field > label,
  .choices legend,
  .foot-col h4,
  .shield-note h4,
  .phase-when {
    font-size: 12.5px;
    letter-spacing: .12em;
  }

  .tag,
  .doc-state,
  .cc-badge { font-size: 12.5px; }

  /* -- Содержательный мелкий текст -- */
  .note,
  .trust-body p,
  .driver p,
  .exit-item p,
  .flow-step p,
  .unit-note,
  .entry-card p,
  .shield-item p,
  .phase p,
  .docs-cta p { font-size: 15px; }

  .rung-when,
  .amenity-note,
  .doc-body i,
  .cc-note { font-size: 14px; }

  .metric .figure i,
  .rung-price i,
  .shot-tag,
  .calc-disclaimer,
  .form-note,
  .foot-disclaimer,
  .foot-bottom,
  .wide-shot figcaption,
  .crumbs,
  .article-meta,
  .calc-ticks,
  .cc-final,
  .field .err,
  .voice figcaption i { font-size: 13.5px; }

  .post-meta { font-size: 13px; }
}