/* ==========================================================================
   Страница «Контакты»
   Источник: Figma «База отдыха» → node 328-18781 (Desktop 1440 / Mobile 390).
   Значения (отступы, размеры, радиусы, цвета) сняты из макета 1:1.
   Токены и типографические классы — из variables.css / main.css.
   Брейкпоинт desktop↔mobile: 992px (как в шаблоне).
   ========================================================================== */

/* ---------- Заголовок страницы (frame «Title») ---------- */
.page-head {
  padding-top: 60px;
  padding-bottom: 32px;
}
.page-head__title {
  color: var(--c-ink);
}
@media (min-width: 992px) {
  .page-head {
    padding-top: 64px;
    padding-bottom: 40px;
  }
}

/* ---------- Секция «Info + Map» ---------- */
.contacts {
  padding-bottom: 60px;
}
@media (min-width: 992px) {
  .contacts {
    padding-bottom: 40px;
  }
}

.contacts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 992px) {
  .contacts__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Карточка с информацией ---------- */
.contacts__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  background: var(--c-bg);
  border-radius: 20px;
}
@media (min-width: 992px) {
  .contacts__card {
    gap: 24px;
    padding: 40px;
  }
}

.contacts__divider {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--c-gray);
  opacity: 0.2;
}

.contacts__block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contacts__block--address {
  gap: 8px;
}

.contacts__label {
  color: var(--c-gray);
}

.contacts__addr {
  color: var(--c-ink);
}

/* строка контакта: иконка + текст */
.contacts__row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-ink);
}
.contacts__row a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.contacts__row a:hover {
  color: var(--c-navy);
}
.contacts__ic {
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--c-ink);
}
.contacts__ic img {
  display: block;
}

/* соцсети — общий блок .socials.socials--panel из header.css */

/* реквизиты */
.contacts__data-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.contacts__data {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contacts__data-label {
  color: var(--c-gray);
}
.contacts__data-value {
  color: var(--c-ink);
}

/* ---------- Карта (Яндекс JS API 2.1, см. contacts/index.php) ---------- */
.contacts__map {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  color: #7a7a7a;
  background: #d9d9d9;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate; /* скругление поверх слоёв карты в Safari */
}
/* Ссылка-заглушка, пока карта не загрузилась (или если JS/API недоступны) */
.contacts__map-link {
  color: inherit;
  text-decoration: underline;
}
.contacts__map-canvas {
  position: absolute;
  inset: 0;
}
.contacts__map:not(.is-ready) .contacts__map-canvas {
  pointer-events: none;
}
/* Ч/б подложка: фильтр только на слой тайлов — метка и контролы остаются цветными.
   Класс версионный (ymaps-2-1-79-ground-pane), поэтому [class*=]. */
.contacts__map [class*="ground-pane"] {
  filter: grayscale(1) contrast(1.05);
}
@media (min-width: 992px) {
  .contacts__map {
    min-height: 776px;
  }
}