/* ==========================================================================
   Контакты — макет 1:1628 (1920×4602)

   Вертикальный ритм страницы (координаты нод от верха фрейма):
     222  крошки            1:1780
     273  градиентная лента  1:1643  (312 высотой)
     649  офис + запрос КП   1:1646  → 64 от ленты
     1893 карта + «Офис и склад» 1:1719 → 190 от предыдущей
     2717 общий CTA-блок     1:1749  → 190
   Теней в макете нет ни одной — box-shadow здесь быть не должно.
   ========================================================================== */

/* Крошки на 222 при шапке до 190 — отступ 32, как у общего `.page-head`.
   Отступ до ленты (32) даёт `.breadcrumbs` из page-common.css. */
.contacts-top { padding-top: var(--space-32); }

/* --- 1:1643 Content section ------------------------------------------------
   На этой странице заголовок раздела лежит не на белом, а на синей ленте
   `bg_blue_gradient_2`: 1840×312, падинг 64, радиус 32, всё по центру. */

.contacts-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-64);
  border-radius: var(--radius-xl);
  background: var(--grad-blue-band);
  color: var(--color-text-invert);
  text-align: center;
  overflow: hidden;
}

.contacts-hero__title {
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-48);
}

/* Ширина 1012 из макета: именно на ней описание ложится в три строки. */
.contacts-hero__lead {
  max-width: 1012px;
  font-size: var(--fs-24);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-24);
}

/* --- Ритм секций -----------------------------------------------------------
   Между лентой и первой парой карточек 64, дальше шаг 190.
   Нижний отступ последней секции — половина шага: вторую половину
   добавляет `.section` у общего CTA-блока. */

.contacts-section { margin-top: var(--section-gap); }
.contacts-section--first { margin-top: var(--space-64); }
.contacts-section--last { margin-bottom: calc(var(--section-gap) / 2); }

/* Общий CTA-блок (1:1749) на этой странице последний. У `.section` из
   base.css отступ снизу 95 — половина ритма, рассчитанная на соседнюю
   секцию. Перед футером в макете полные 190 (блок 2717…3635, футер 3825),
   поэтому вторую половину добавляем здесь, а не в общем файле. */
.contacts-cta .section { padding-bottom: var(--section-gap); }

/* Две колонки по 910 при контейнере 1840; зазор 20 — как у `.grid-2`.
   Колонки тянутся по высоте: фото в левой карточке добирает остаток. */
.contacts-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

/* Колонки грида по умолчанию не уже своего содержимого — на узком экране
   это единственная причина горизонтальной прокрутки. */
.contacts-cols > * { min-width: 0; }

/* --- 1:1647 Карточка офиса -------------------------------------------------
   Падинг 32, радиус 24, шаг между блоками 48. */

.contacts-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.contacts-card__title {
  font-size: var(--fs-40);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-40);
}

/* 1:1722 — заголовок правой карточки на 48 и синий, а не чёрный. */
.contacts-card__title--accent {
  font-size: var(--fs-48);
  letter-spacing: var(--ls-48);
  color: var(--color-brand);
}

/* Кнопки в карточках макета тянутся на всю ширину (846 при падинге 32). */
.contacts-card .cta-btn { width: 100%; }

/* --- 1:1649 и 1:1720 — фото склада и карта ---------------------------------
   В макете это серые плейсхолдеры с подписями «фото склада» и «карта»;
   заливка #D9D9D9 ближе всего к --color-border (#DADADA). Картинка
   обрезается по кадру, чтобы реальное фото встало без правок вёрстки. */

.contacts-media {
  display: flex;
  margin: 0;
  border-radius: var(--radius-lg);
  background: var(--color-border);
  overflow: hidden;
}

.contacts-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Фото добирает свободную высоту карточки — в макете это 451 при карточке
   1053; фиксировать нельзя, иначе колонки разъедутся. */
.contacts-media--photo {
  flex: 1 1 auto;
  min-height: 240px;
}

.contacts-media--map { min-height: 320px; }

/* Карта на месте плашки 1:1720: та же коробка 910×634, но своя — у неё нет
   фигуры-обёртки, поэтому радиус и высоту задаём прямо здесь. */
.ag-map.contacts-media--map {
  min-height: 634px;
  border-radius: var(--radius-lg);
}

@media (max-width: 900px) {
  .ag-map.contacts-media--map { min-height: 380px; }
}

/* --- 1:1650 Contact Rows ---------------------------------------------------
   Пять строк с шагом 24; иконка 24 в боксе 32, зазор до текста 12. */

.contacts-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.contacts-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.contacts-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: var(--color-brand);
}

.contacts-row__icon svg { width: 24px; height: 24px; }

.contacts-row__text {
  font-size: var(--fs-24);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-24);
  color: var(--color-text-soft);
}

a.contacts-row__text { transition: color var(--dur-fast) var(--ease-out); }
a.contacts-row__text:hover { color: var(--color-brand); }

/* --- 1:1677 Панель запроса КП ---------------------------------------------
   Градиент bg_blue_gradient, падинг 64, радиус 32, шаг 48. */

.contacts-rfq {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  padding: var(--space-64);
  border-radius: var(--radius-xl);
  background: var(--grad-blue-cta);
  color: var(--color-text-invert);
}

.contacts-rfq__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.contacts-rfq__title {
  font-size: var(--fs-40);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-40);
}

/* Прозрачность 70 % — так описание отделено от заголовка в макете. */
.contacts-rfq__lead {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  opacity: .7;
}

/* --- 1:1681 Форма ----------------------------------------------------------
   Поля белые, радиус 12, высота 76, падинг 24; подпись поля в макете стоит
   внутри прямоугольника, поэтому она здесь placeholder, а не строка сверху. */

.rfq-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.rfq-form__fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rfq-form__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.rfq-form__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.rfq-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  flex: 1 1 0;
  min-width: 0;
}

.rfq-input {
  width: 100%;
  height: 76px;
  padding: var(--space-24);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.rfq-input::placeholder { color: var(--color-text-muted); opacity: 1; }
.rfq-input:focus { border-color: var(--color-navy); }

.rfq-input--area {
  height: 120px;
  resize: vertical;
}

/* Подпись под e-mail: 16 без разрядки, прозрачность 60 %.
   В макете у этой строки междустрочный интервал по метрике шрифта — это
   те же 1.2057, что и у --lh-tight. */
.rfq-field__hint {
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  letter-spacing: normal;
  opacity: .6;
}

/* --- 1:1700 Зона загрузки --------------------------------------------------
   Пунктир 2 по белому, высота 120, содержимое по центру, шаг 8.
   Поле file лежит поверх зоны прозрачным: скрытый input нельзя
   сфокусировать, и браузер не покажет подсказку у обязательного поля. */

.rfq-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: 120px;
  padding: var(--space-24);
  border: 2px dashed var(--color-text-invert);
  border-radius: var(--radius-md);
  opacity: .7;
  cursor: pointer;
  text-align: center;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.rfq-upload:hover { opacity: 1; }

.rfq-upload__line {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.rfq-upload__icon { display: flex; flex-shrink: 0; }
.rfq-upload__icon svg { width: 24px; height: 24px; }

.rfq-upload__text {
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
}

/* Подпись 1:1705 — 12 px без разрядки: её блок в макете 264×15,
   а 15 = 12 × 1.2057. На 14 строка вылезала до 311. */
.rfq-upload__note {
  font-size: var(--fs-12);
  line-height: var(--lh-tight);
  letter-spacing: normal;
}

.rfq-upload__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* --- 1:1709 Footer Actions -------------------------------------------------
   Кнопка 467, две линии, «или», две соцсети 56 — всё с шагом 24. */

.rfq-form__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.rfq-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.rfq-form__actions .cta-btn {
  flex: 0 1 467px;
  min-width: 0;
}

/* Пунктир и цвет разделителя — общие, из base.css. Здесь только зазор до
   слова «или»: 24 вместо базовых 12 (линии 1:1712 и 1:1714 по 29,5). */
.rfq-form__actions .or-divider { gap: var(--space-24); }

/* Соцсети в макете 56 с зазором 12; размер даёт общий `.social-icons--56`
   из base.css, здесь остаётся только зазор. */
.rfq-form__actions .social-icons { gap: var(--space-12); }

.rfq-form__note {
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  opacity: .7;
}

/* Строки статуса в макете нет: пока обработчик молчит, она не занимает места. */
.rfq-form .form-status:empty { display: none; }

/* --- 1:1721 Карточка «Офис и склад» ---------------------------------------
   Колонка списков фиксированной ширины 600 внутри карточки 910. */

/* Ширина 600 задана через max-width, а не width: жёсткая ширина попадает
   в min-content колонки грида и растягивает её на узком экране. */
.contacts-facilities {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  width: 100%;
  max-width: 600px;
}

/* Синяя полоса — обводка блока 1:1724 изнутри: по пикселям она занимает
   x=0…3 самого блока, а текст начинается на 24 от его левого края. Значит
   4 рамки + 20 падинга, а не 4 + 24 — иначе текст уезжает на 28. */
.facility {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-left: 20px;
  border-left: 4px solid var(--color-brand);
}

.facility__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
  color: var(--color-navy);
}

.facility__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.facility__list li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

.facility__list li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

/* --- Ниже 1920 px ----------------------------------------------------------
   Макет нарисован только под 1920, дальше решения вёрстки: главное, чтобы
   не появлялся горизонтальный скролл. */

/* Строка действий формы перестаёт помещаться в колонку раньше всего. */
@media (max-width: 1520px) {
  .rfq-form__actions { flex-wrap: wrap; }
  .rfq-form__actions .cta-btn { flex: 1 1 100%; }
}

@media (max-width: 1200px) {
  .contacts-cols { grid-template-columns: 1fr; }
  .contacts-media--photo { min-height: 320px; }
  .contacts-section { margin-top: var(--section-gap-sm); }
  .contacts-rfq { padding: var(--space-32); }
  /* Полные 190 до футера — требование макета 1920. Ниже ритм и так сжат,
     возвращаем базовые 95 от `.section`. */
  .contacts-cta .section { padding-bottom: calc(var(--section-gap) / 2); }
}

@media (max-width: 900px) {
  .contacts-hero { padding: var(--space-32); }
  .contacts-hero__title { font-size: var(--fs-32); letter-spacing: var(--ls-32); }
  .contacts-hero__lead { font-size: var(--fs-20); letter-spacing: var(--ls-20); }
  .contacts-section { margin-top: var(--space-64); }
  .contacts-section:last-of-type { margin-bottom: var(--space-48); }
}

@media (max-width: 700px) {
  .contacts-card { padding: var(--space-24); }
  .contacts-rfq { padding: var(--space-24); }
  .contacts-card__title { font-size: var(--fs-32); letter-spacing: var(--ls-32); }
  .contacts-card__title--accent { font-size: var(--fs-32); letter-spacing: var(--ls-32); }
  .contacts-row__text { font-size: var(--fs-20); letter-spacing: var(--ls-20); }
  .rfq-form__row { flex-direction: column; }
  .rfq-upload { height: auto; }
  .rfq-upload__text { font-size: var(--fs-16); letter-spacing: var(--ls-16); }

  /* Подписи кнопок («Открыть в 2ГИС / Яндекс Картах») длиннее узкого экрана,
     а `.cta-btn__text` в base.css запрещает перенос — на телефоне это даёт
     горизонтальную прокрутку, поэтому здесь перенос разрешаем. */
  .contacts-card .cta-btn,
  .rfq-form__actions .cta-btn {
    gap: var(--space-12);
    padding-left: var(--space-24);
    font-size: var(--fs-18);
    letter-spacing: var(--ls-18);
  }

  .contacts-card .cta-btn__text,
  .rfq-form__actions .cta-btn__text { white-space: normal; }

  .contacts-card .cta-btn__icon,
  .rfq-form__actions .cta-btn__icon { width: 44px; height: 44px; }

  .contacts-card .cta-btn__icon svg,
  .rfq-form__actions .cta-btn__icon svg { width: 24px; height: 24px; }
}

/* --- Телефон: размеры, не попавшие в блоки выше ---------------------------- */
@media (max-width: 700px) {
  .contacts-rfq__title { font-size: var(--fs-28); letter-spacing: var(--ls-28); }
  .facility__title { font-size: var(--fs-24); letter-spacing: var(--ls-24); }

  /* Паддинги панелей ужаты в блоках выше, а зазоры 48 внутри остались. */
  .contacts-rfq,
  .contacts-card,
  .rfq-form { gap: var(--space-24); }
}