/* ==========================================================================
   Страница «Контакты» — оформление блока контактов.

   Подключается ТОЛЬКО на странице контактов (см. event/theme.php).
   Все правила ограничены обёрткой .ha-contacts и префиксом .ha-* —
   на остальной сайт, его сетку, шапку, подвал и типографику не влияют.

   Шрифт: на сайте уже подключён корпоративный Manrope (дизайн-слой),
   поэтому семейство задано им и Google Fonts дополнительно не грузится.

   Радиусы, цвета фона и линий берутся из общих переменных сайта,
   чтобы страница не отличалась от остальных.
   ========================================================================== */

.ha-contacts {
  --ha-ink: var(--ink, #0F1B2D);
  --ha-muted: var(--muted, #5C6B7F);
  --ha-line: var(--line, #E3E7ED);
  --ha-hair: var(--line, #E3E7ED);

  font-family: Manrope, Helvetica, Arial, sans-serif;
  color: var(--ha-ink);
  /* Фон — общий фон сайта, отдельной заливки у страницы нет. */
  background: transparent;
  /* Сверху нужен такой же отступ, как у шапки остальных страниц
     (.page-hero), иначе заголовок прилипает к меню. */
  padding: var(--sp-5, 48px) 0 var(--sp-6, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4, 32px);
  box-sizing: border-box;
}
.ha-contacts *,
.ha-contacts *::before,
.ha-contacts *::after { box-sizing: border-box; }

.ha-contacts__head {
  width: 100%;
  max-width: var(--container, 1240px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 24px 28px;
  border-bottom: 1px solid var(--ha-line);
}
.ha-contacts__headings { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ha-contacts__title {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.03em;
  text-wrap: pretty;
}

/* Две колонки одинаковой высоты: карточка и карта выравниваются
   по нижнему краю (align-items: stretch). */
.ha-contacts__grid {
  width: 100%;
  max-width: var(--container, 1240px);
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  align-items: stretch;
}

/* --------------------------------------------------------- карточка */

.ha-card {
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--ha-line);
  /* Радиус как у карточек на остальных страницах. */
  border-radius: var(--r-card, 14px);
  overflow: hidden;
  /* Карточка занимает всю колонку, до самой карты. */
  max-width: none;
  width: 100%;
}
.ha-card__row { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; }
.ha-card__row--split { flex-direction: row; flex-wrap: wrap; gap: 24px; }
.ha-card__hr { height: 1px; background: var(--ha-hair); }

.ha-label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ha-muted);
  font-weight: 600;
}
.ha-address { font-size: 18px; line-height: 1.5; font-weight: 500; text-wrap: pretty; }
.ha-list { display: flex; flex-direction: column; gap: 6px; }

.ha-tel {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ha-ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .15s, color .15s;
}
.ha-tel:hover { border-bottom-color: var(--accent-500, #F2B705); color: var(--ha-ink); text-decoration: none; }

.ha-plain { font-size: 17px; font-weight: 500; color: var(--ha-ink); }

.ha-mail {
  font-size: 17px;
  font-weight: 600;
  word-break: break-word;
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ha-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--accent-500, #F2B705);
  transition: border-color .15s;
}
.ha-mail:hover { border-bottom-color: var(--ha-ink); color: var(--ha-ink); text-decoration: none; }

.ha-col { display: flex; flex-direction: column; gap: 10px; }
.ha-col--fax { min-width: 130px; }
.ha-col--mail { flex: 1; min-width: 0; }

/* Кнопка прижата к низу карточки и оформлена общим стилем сайта. */
.ha-cta-wrap { margin-top: auto; padding: 24px 28px 28px; }
.ha-cta-btn { width: 100%; }

/* ------------------------------------------------------------- карта */

.ha-map-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Тянется на всю высоту строки — вровень с карточкой. */
  height: 100%;
}
.ha-map {
  width: 100%;
  height: 100%;
  min-height: 420px;
  background: var(--bg, #F7F8FA);
  border: 1px solid var(--ha-line);
  border-radius: var(--r-card, 14px);
  overflow: hidden;
}
/* Растягивает саму карту внутри контейнера — правило нужное, не удалять. */
.ha-map ymaps,
.ha-map iframe { width: 100% !important; height: 100% !important; border: 0; }

/* ----------------------------------------------------------- телефон */

@media (max-width: 991px) {
  .ha-contacts__head,
  .ha-contacts__grid { padding-inline: 16px; }
}

@media (max-width: 640px) {
  .ha-contacts { padding-bottom: var(--sp-5, 48px); gap: 28px; }
  .ha-card__row { padding: 22px; }
  .ha-cta-wrap { padding: 22px; }
  .ha-tel { font-size: 20px; }
  /* Колонки встали друг под друга — карте нужна своя высота. */
  .ha-map { height: min(560px, 65vh); min-height: 360px; }
}