/*
  Карточка реквизитов + карта (159:5449). Наезжает на нижний край фона
  героя через отрицательный margin-top — тот же приём, что у
  process-steps/product-steps (см. project/frontend/MEMORY.md → «Заметки»).
  Базовая глубина захода из Figma — 244px (719 высота фона героя - 475 top
  карточек), по просьбе пользователя блок опущен на 50px ниже (-244+50 =
  -194px) — карточки теперь начинаются на 525px, а не на 475px.

  Высота карточек (554px в Figma) нигде не хардкодится — это естественная
  высота содержимого .contact-card при паддингах/гэпах ниже; .map-card
  подстраивается под неё через align-items:stretch (по умолчанию у flex).

  Первые 194px фона — прозрачные (не сплошная заливка), тот же приём, что
  у process-steps.css/product-steps.css: иначе более поздний по DOM
  .contacts-info рисуется поверх .contacts-hero__media::after и полностью
  перекрывает его градиент-фейд фото с первого же пикселя захода. Число
  всегда должно совпадать по модулю с margin-top — это глубина реального
  захода на герой, не фиксированная константа из Figma.
*/
.contacts-info {
  position: relative;
  margin-top: -194px;
  padding: 0 var(--page-gutter) 75px;
  background: linear-gradient(to bottom, transparent 194px, var(--color-solutions-bg) 194px);
}

.contacts-info__row {
  display: flex;
  gap: 30px;
  max-width: var(--content-width);
  margin: 0 auto;
}

.contact-card,
.map-card {
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius-trust-bar);
  background: var(--color-step-card-bg);
  box-shadow: var(--shadow-step-card);
}

.contact-card {
  padding: 40px;
}

.contact-card__pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.contact-card__pill {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 20px 22px;
  border-radius: 20px;
  background: var(--color-contact-pill-bg);
}

.contact-card__pill--wide {
  margin-top: 10px;
}

.contact-card__label {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--color-contact-label);
}

.contact-card__value {
  margin: 0;
  font-size: var(--fs-contact-value);
  line-height: var(--lh-body);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.contact-card__value a {
  color: inherit;
  transition: color 0.2s ease;
}

.contact-card__value a:hover {
  color: var(--color-accent);
}

.contact-card__requisites {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin: 35px 0 0;
}

.contact-card__requisite {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-card__requisite dt,
.contact-card__requisite dd {
  flex-shrink: 0;
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-contact-requisite);
  font-weight: var(--fw-regular);
  white-space: nowrap;
}

.contact-card__requisite dt {
  color: var(--color-contact-label);
}

.contact-card__requisite dd {
  color: var(--color-ink);
}

.contact-card__requisite-dash {
  height: 0;
  min-width: 20px;
  flex: 1 1 auto;
  border-bottom: 1px dashed var(--color-contact-dash);
}

.map-card {
  display: flex;
  padding: 40px;
}

/* Контейнер интерактивной Яндекс.Карты (см. initContactsMap в js/main.js).
   Фон-плейсхолдер виден до инициализации API (нет window.ymaps — например,
   пока не проставлен реальный apikey, см. contacts-info.njk) — так карточка
   не выглядит пустой белой дырой. */
.map-card__map {
  flex: 1 1 auto;
  min-height: 300px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-contact-map-placeholder);
}

/*
  Мобильная адаптация (600px,
  база 390px). Структурная перестройка карточки реквизитов (не просто
  CSS-подгонка чисел):
  - фон карточки — полупрозрачный блюр (rgba(255,255,255,0.7) +
    blur(54.45px), то же число, что уже используется в service-hero.css/
    product-steps.css для аналогичного эффекта), radius 30px вместо 40 —
    оба реальные исключения из десктопных значений.
  - .contact-card__pills (grid 2 колонки) + отдельная широкая пилюля
    адреса становятся ОДНИМ вертикальным списком из 3 плашек 310px —
    чисто CSS (flex-direction:column вместо grid, margin-top на wide-пилюле
    вместо 10px десктопных), разметку .njk не трогаем.
  - текст в пилюлях — по центру (десктоп: по левому краю), высоты через
    min-height (не height) — устойчиво к более длинному тексту из будущей
    WP-админки.
  - margin-top секции — 0 (не -194px, как на десктопе): в моб. Figma
    точная глубина захода карточки на фон героя не задана, а фейд героя
    полностью сходит в сплошной --color-solutions-bg задолго до конца
    своей высоты (см. contacts-hero.css → мобильный блок) — видимого шва
    без наезда не будет, поэтому фон секции здесь просто сплошной, без
    прозрачной полосы-компенсатора.
*/
@media (max-width: 599.98px) {
  .contacts-info {
    /* Фейд декоративного фото героя сходит в сплошной --color-solutions-bg
       заметно раньше конца секции .contacts-hero (пиксельный замер:
       ~630px против min-height ~746px) — margin-top:0 оставлял ~110px
       лишнего сплошного фона перед карточкой. Небольшой наезд поднимает
       карточку, оставаясь глубоко внутри уже сведённой к сплошному цвету
       зоны (без шва по фото). */
    margin-top: max(-18px, calc(-18 / 390 * 100vw));
    padding: 0 0 min(70px, calc(70 / 390 * 100vw));
    background: var(--color-solutions-bg);
  }

  /* flex-direction переехал сюда из снесённого @media (max-width:1000px)
     (правки 2026-08-05, п.18, этап 2): базовое правило — row (карточка
     реквизитов и карта рядом), на телефоне они обязаны идти друг под
     другом. */
  .contacts-info__row {
    flex-direction: column;
    gap: min(30px, calc(30 / 390 * 100vw));
    max-width: none;
  }

  .contact-card,
  .map-card {
    flex: none;
  }

  .contact-card {
    width: min(370px, calc(370 / 390 * 100vw));
    margin-inline: auto;
    padding: min(40px, calc(40 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw));
    border-radius: min(30px, calc(30 / 390 * 100vw));
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(54.45px);
    -webkit-backdrop-filter: blur(54.45px);
  }

  .contact-card__pills {
    display: flex;
    flex-direction: column;
    gap: min(10px, calc(10 / 390 * 100vw));
  }

  .contact-card__pill {
    align-items: center;
    justify-content: center;
    width: min(310px, calc(310 / 390 * 100vw));
    min-height: min(80px, calc(80 / 390 * 100vw));
    padding: min(15px, calc(15 / 390 * 100vw)) min(20px, calc(20 / 390 * 100vw));
    gap: min(5px, calc(5 / 390 * 100vw));
    text-align: center;
  }

  .contact-card__pill--wide {
    margin-top: min(10px, calc(10 / 390 * 100vw));
    min-height: min(105px, calc(105 / 390 * 100vw));
  }

  .contact-card__label {
    font-size: min(12px, calc(12 / 390 * 100vw));
  }

  .contact-card__value {
    font-size: min(16px, calc(16 / 390 * 100vw));
  }

  .contact-card__requisites {
    gap: min(20px, calc(20 / 390 * 100vw));
    margin-top: min(35px, calc(35 / 390 * 100vw));
  }

  /* Лейбл (напр. «Наименование организации») + dash + значение в одну
     nowrap-строку не влезают в 310px мобильной колонки — на длинных
     реквизитах текст вылезал за карточку (проверено реальным рендером,
     390px). Строка вместо этого складывается в тот же паттерн «лейбл
     сверху, значение снизу», что уже у .contact-card__pill — устойчиво
     к любой длине реального юрлица/счёта из будущей WP-админки, не
     только к плейсхолдеру. Dash в вертикальной раскладке не нужен. */
  .contact-card__requisite {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .contact-card__requisite-dash {
    display: none;
  }

  .contact-card__requisite dt,
  .contact-card__requisite dd {
    white-space: normal;
    font-size: min(13px, calc(13 / 390 * 100vw));
  }

  /* min-height карты переехал сюда из снесённого @media (max-width:1000px)
     (правки 2026-08-05, п.18, этап 2). Базовые 300px рассчитаны на
     полуширинную карту рядом с реквизитами; на телефоне карта во всю ширину
     карточки, и 400px — принятая мобильная высота. */
  .map-card__map {
    min-height: 400px;
  }

  /* Карточка карты — тот же стеклянный стиль/ширина, что у .contact-card
     выше (370px/инсет 10px, blur-фон, 30px радиус), карта внутри с
     равномерным 10px отступом. */
  .map-card {
    width: min(370px, calc(370 / 390 * 100vw));
    margin-inline: auto;
    padding: min(10px, calc(10 / 390 * 100vw));
    border-radius: min(30px, calc(30 / 390 * 100vw));
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(54.45px);
    -webkit-backdrop-filter: blur(54.45px);
  }
}