/* Страница контактов. Figma: Contact/pc 611:5150 (1920×2283), Contact/mb 611:5463 (390×3530).
   На этой странице нет блока «Обратите внимание»: секция идёт от шапки (pc 89, mb 82)
   до подвала (pc 1725, mb 1723) → высота pc 1636, mb 1641.
   Координаты: left от контейнера (pc − 261, mb − 14), top от начала секции;
   внутри слайда с картой — от слайда. Спека — log-figma.md §28–29. */
.contacts {
  position: relative;
  min-height: 1636px;
  padding-bottom: 72px;          /* 1636 − 1564 (низ карты) */
  /* Блоб выше секции и свисал ниже футера, растягивая документ на 2970px пустоты */
  overflow: hidden;
}

/* Контейнер страницы в вертикальном потоке: крошки → H1 → сетка → блоки → карта */
.contacts .container {
  display: flex;
  flex-direction: column;
}

/* Блоб Ellipse 15 (611:5151): 1880×1472 на (20, 250) → центр (960, 986).
   SVG 2680×2272, центр (1340, 1136); ассет `blob-catalog-pc.svg` */
.contacts__blob {
  left: 50%;
  top: -239px;                   /* (986 − 89) − 1136 */
  width: 2680px;
  height: 2272px;
  margin-left: -1340px;
}

/* Блоб mb-фрейма (611:5470) — только в mb */
.contacts__blob--mb {
  display: none;
}

/* H1 (611:5153): 261/223 379×86, Bold 36, жёсткий перенос после «компании» */
.contacts__h1 {
  width: fit-content;
  margin: 120.67px 0 0;          /* 134 − 13.33 (крошки) */
  font-weight: 700;
  font-size: 36px;
  line-height: normal;
  color: var(--black);
  white-space: nowrap;
}

/* Сетка контактов. В макете 10 элементов стояли на своих left/top: колонки
   0/374/709 от контейнера, ряды 257 и 394. Замер дал внутри пары зазор 16,
   между рядами 64. Телефоны и адреса правит заказчик, поэтому ряд в потоке.

   Во втором ряду макета WhatsApp стоит на 636 против 635 у «Пресс службы» —
   погрешность дизайнера на 1px. Сетка выравнивает колонки, это расхождение принято. */
.contacts__grid {
  width: fit-content;
  margin-top: 37.67px;           /* 257 − 219.33 (низ H1) */
  display: grid;
  grid-template-columns: 374px 335px auto;
  row-gap: 64px;
}

.contacts__pair {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Подписи над значениями (611:5238 и др.): Rubik Regular 16 */
.contacts__label {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: var(--black);
  white-space: nowrap;
}

/* Инстансы 611:5239 / 611:5240 (mb 611:5536 / 611:5535) переопределяют цвет кита:
   подписи мессенджеров цветные, остальные три подписи остаются чёрными. */
.contacts__label--tg { color: #07f; }
.contacts__label--wa { color: #00d76b; }
.contacts__label--max { color: #0a0a0a; }   /* MAX: фирменный чёрный */

/* Значения (611:5160 и др.): Rubik Bold 32 */
.contacts__value {
  margin: 0;
  font-weight: 700;
  font-size: 32px;
  line-height: normal;
  color: var(--black);
  white-space: nowrap;
}

/* Значение может быть ссылкой (звонок, почта, мессенджер): цвет и начертание берём
   от блока, подчёркивание — только при наведении, как у остальных ссылок сайта. */
a.contacts__value {
  color: inherit;
  text-decoration: none;
}

a.contacts__value:hover,
a.contacts__value:focus-visible {
  text-decoration: underline;
}

/* «ВОПРОС-ОТВЕТ» (611:5163 pc, 611:5475 mb): Bold 32/24 с `lowercase`, первая литера
   заглавная, подчёркнуто всё слово — решение по PNG-экспорту. */
.contacts__value--faq {
  text-transform: lowercase;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.contacts__value--faq::first-letter {
  text-transform: uppercase;
}

/* Текстовые блоки. В макете h2 и абзацы стояли на top 573/641/709 и 829/897/965;
   замер дал зазор заголовок→абзац 30, абзац→абзац 20. Тексты редактируются,
   поэтому блок — flex-колонка. */
.contacts__block {
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contacts__block--1 { margin-top: 108px; }    /* 573 − 465 (низ сетки) */
.contacts__block--2 { margin-top: 72.67px; }  /* 829 − 756.33 (низ блока 1) */

/* Заголовки блоков (611:5175, 611:5178): Bold 32, фрейм 251 с padding 10 → текст на 261 */
.contacts__h2 {
  width: 994px;
  margin: 0 0 10px;              /* зазор до абзаца 30 = gap 20 + 10 */
  font-weight: 700;
  font-size: 32px;
  line-height: normal;
  color: var(--black);
}

/* Абзацы (611:5179, 611:5184, 611:5186): фреймы на 261 с padding только по вертикали →
   текст шириной 1014, Regular 16/24 */
.contacts__p {
  width: 1014px;
  margin: 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  color: var(--black);
}

/* Слайд с картой (611:5188): 1398×503 на 261/1150, white, radius 32 */
.contacts__map {
  position: relative;
  width: 100%;
  height: 503px;
  margin-top: 72.67px;           /* 1061 − 988.33 (низ блока 2) */
  background: var(--white);
  border-radius: var(--r-card);
  overflow: hidden;
}

/* Живая Яндекс.Карта на месте скриншота. Кадр закрыт от перетаскивания: центр
   фиксирован, поэтому брендовая метка всегда указывает на адрес. */
.contacts__map-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

/* Метка: круг Ellipse 31 (611:5190) 104×104 сплошной `#305684`, в макете 476/234 слайда.
   Карта живая и центрирована по координатам адреса, поэтому метка стоит в центре кадра:
   так её острие указывает ровно на адрес при любой ширине слайда. В макете позиция была
   привязана к кропу скриншота — тот же смысл, но координаты там были жёсткими.
   Ссылка ведёт на адрес в Яндекс.Картах — по макету это единственный интерактив карты. */
.contacts__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
  background: var(--brand);
  border-radius: 50%;
}

/* Логотип внутри метки (611:5191): 68×20.32, белая заливка через альфа-маску.
   Метка центрирована в кадре, логотип — по центру метки (в макете 494/276 при метке
   на 476/234, то есть те же 18/42 внутри круга). */
.contacts__pin-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10.16px 0 0 -34px;
  width: 68px;
  height: 20.32px;
  background: var(--white);
  -webkit-mask-image: url("../assets/img/logo-mask.webp");
  mask-image: url("../assets/img/logo-mask.webp");
  -webkit-mask-size: 68px 20.32px;
  mask-size: 68px 20.32px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (max-width: 1199px) {
  .contacts {
    min-height: 1641px;          /* 1723 − 82 */
    padding-bottom: 50px;        /* 1641 − 1591 (низ карты) */
  }

  .contacts__blob {
    display: none;
  }

  /* Блоб Ellipse 14 (611:5470): 390×5946 на (0, 234) → центр (195, 3207) */
  .contacts__blob--mb {
    display: block;
    left: 50%;
    top: -248px;                 /* (3207 − 82) − 3373 */
    width: 1190px;
    height: 6746px;
    margin-left: -595px;
  }

  /* H1 (611:5469): 28/157 295×66, Bold 28 */
  .contacts__h1 {
    margin: 61px 0 0 14px;       /* 75 − 14 (крошки); 14 от края контейнера */
    font-size: 28px;
  }

  /* В mb сетка вырождается в одну колонку. Замер исходной вёрстки: внутри пары
     зазор 8, между парами 20 (ряды 259/338/413/488/563 при высоте пары 47..56). */
  .contacts__grid {
    margin: 36px 0 0 14px;       /* 177 − 141 (низ H1); 14 от края контейнера */
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  /* Зазоры между парами в макете неравномерны: 24 после первой пары, дальше 20
     (шаги labelTop 79/75/75/75). Единого gap нет, поэтому первая пара добирает 4. */
  .contacts__pair:first-child {
    margin-bottom: 4px;
  }

  .contacts__pair {
    gap: 8px;
  }

  /* Значения в mb — Bold 24 (611:5471) */
  .contacts__value {
    font-size: 24px;
  }

  /* Текстовые блоки в mb: заголовок 18 шириной 220, абзацы 275 на 14/20.
     Зазор заголовок→абзац 19, абзац→абзац 20 (top 658/699/819 и 939/980/1080). */
  .contacts__block {
    margin-left: 14px;           /* 14 от края контейнера */
    gap: 20px;
  }

  .contacts__block--1 { margin-top: 115px; }  /* 576 − 461 (низ сетки при 4 парах) */
  .contacts__block--2 { margin-top: 40px; }   /* 857 − 817 (низ блока 1) */

  .contacts__h2 {
    width: 220px;
    margin-bottom: -1px;         /* зазор до абзаца 19 = gap 20 − 1 */
    font-size: 18px;
  }

  .contacts__p {
    width: 275px;
    font-size: 14px;
    line-height: 20px;
  }

  /* Карта в mb (611:5537): 362×503 на 14/1170, БЕЗ радиуса и без белой плашки.
     Кроп скриншота не нужен: кадр занимает слайд целиком, карта центрирована по
     адресу, а метка стоит в центре кадра — сдвиг из макета (185/200) больше не нужен. */
  .contacts__map {
    width: 362px;
    height: 503px;
    margin-top: 50px;            /* 1088 − 1038 (низ блока 2) */
    background: none;
    border-radius: 0;
  }
}