/* ============================================================
   BLUE WATERS — страница «Контакты»
   Подключается только на contacts.html поверх styles.css.

   Типографика и поверхности — из общих токенов:
   заголовки .h-display (Cormorant), карточки как .plan-tile/.inv-card
   (var(--foam) + 1px var(--line) + радиус 8px).
   Метки на карте переиспользуют .map-pin / .map-label / .map-iw
   из styles.css — отдельных стилей для них не нужно.
   ============================================================ */

.contacts-page {
  padding-top: calc(var(--header-h) + clamp(2.2rem, 5vw, 4.4rem));
  padding-bottom: var(--sect-y);
}
.contacts-page__head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
/* flex, а не inline-flex: .eyebrow ниже — тоже inline-flex и иначе
   встаёт в одну строку со ссылкой «назад» */
.contacts-page__back {
  display: flex; width: fit-content; align-items: center; gap: .5em; margin-bottom: 1.2rem;
  font-size: .85rem; font-weight: 600; color: var(--text-mut); transition: color .3s var(--ease);
}
.contacts-page__back:hover { color: var(--tide); }

/* ---------- Быстрые контакты ---------- */
.contacts-quick {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem);
}
.contacts-quick__card {
  display: flex; flex-direction: column; gap: .45rem;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  background: var(--foam); border: 1px solid var(--line); border-radius: 8px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.contacts-quick__card:hover {
  transform: translateY(-5px); border-color: var(--mist);
  box-shadow: 0 30px 50px -34px rgba(11,30,42,.4);
}
.contacts-quick__label { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text-mut); }
.contacts-quick__value {
  font-family: var(--font-d); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; color: var(--ink);
  transition: color .3s var(--ease); word-break: break-word;
}
.contacts-quick__card:hover .contacts-quick__value { color: var(--tide); }
.contacts-quick__note { font-size: .84rem; color: var(--text-mut); }

/* ---------- Офисы + карта ---------- */
.offices { background: var(--paper-2); }
.offices__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3.4rem); align-items: start;
}
.offices__list { display: grid; gap: clamp(.7rem, 1.2vw, 1rem); }

/* Подзаголовок страны с добивающей линией */
.offices__country {
  display: flex; align-items: center; gap: .9rem;
  margin-top: clamp(1.1rem, 2vw, 1.7rem);
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--tide);
}
.offices__country:first-child { margin-top: 0; }
.offices__country::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.office {
  position: relative; cursor: pointer;
  background: var(--foam); border: 1px solid var(--line); border-radius: 8px;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.office:hover { border-color: var(--mist); transform: translateY(-3px); }
.office.is-active {
  border-color: var(--tide);
  box-shadow: 0 0 0 1px var(--tide) inset, 0 26px 44px -32px rgba(11,30,42,.45);
}
/* тонкая золотая засечка у активной карточки */
.office.is-active::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px;
  width: 2px; border-radius: 2px; background: var(--gold);
}
/* h3 по умолчанию жирный, а Cormorant на сайте нигде не идёт в 700 —
   выравниваем на 400, как .plan-tile__type в блоке планировок на главной */
.office__city {
  font-family: var(--font-d); font-weight: 400;
  font-size: 1.35rem; line-height: 1.15; color: var(--ink);
}
.office__tag {
  display: inline-block; margin-left: .6em; vertical-align: .18em;
  font-family: var(--font-b); font-size: .6rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-d);
  border: 1px solid rgba(192,160,98,.45); border-radius: 999px; padding: .3em .8em;
}
.office__addr { margin-top: .4rem; font-size: .93rem; line-height: 1.55; color: var(--text-mut); }
.office__meta { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin-top: .85rem; font-size: .88rem; }
.office__phone { color: var(--ink); font-weight: 600; white-space: nowrap; transition: color .3s var(--ease); }
.office__phone:hover { color: var(--tide); }
.office__hours { color: var(--text-mut); }
.office__acts { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: 1rem; }
.office__act {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .82rem; font-weight: 600; color: var(--tide);
  padding-bottom: .15em; border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.office__act:hover { color: var(--ink); border-bottom-color: var(--gold); gap: .8em; }
.office__act--route { color: var(--text-mut); }

/* Карта: та же подача, что у .map-wrap на главной, но фиксированной высоты
   и «липкая» — список офисов длиннее карты. */
.offices__map { position: sticky; top: calc(var(--header-h) + 24px); }
.contacts-map {
  position: relative; z-index: 0; isolation: isolate;
  height: clamp(420px, 66vh, 620px);
  border-radius: 8px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -40px rgba(11,30,42,.4); background: #eef1f3;
}
.contacts-map__canvas { width: 100%; height: 100%; }
/* Подстраховка, если Leaflet не загрузился */
.contacts-map__fallback {
  position: absolute; inset: 0; display: grid; place-content: center; gap: .8rem;
  padding: 2rem; text-align: center; color: var(--text-mut); font-size: .92rem;
}
.offices__hint { margin-top: .9rem; font-size: .78rem; color: var(--text-mut); }

/* ---------- Адаптив ---------- */
@media (max-width: 1000px) {
  .offices__grid { grid-template-columns: 1fr; }
  /* на узком экране карта идёт первой — сразу видно географию */
  .offices__map { position: static; order: -1; }
  .contacts-map { height: clamp(320px, 52vh, 460px); }
}
@media (max-width: 760px) {
  .contacts-quick { grid-template-columns: 1fr; }
}

/* ---------- Мобильные цели нажатия и мелкий текст ----------
   Телефоны, «Маршрут» и «Назад» — тонкие строки в 22–24px: для пальца
   мало (минимум по WCAG 2.5.8 — 24px, комфортно от 40px). Вертикальный
   padding увеличивает область нажатия, не ломая раскладку строк.
   Метка офиса при 9.6px на телефоне уже нечитаема. */
@media (max-width: 860px) {
  .office__phone, .office__act { padding-block: .5rem; }
  .office__acts { gap: .2rem .9rem; margin-top: .6rem; }
  .office__meta { gap: 0 1.4rem; }
  .contacts-page__back { padding-block: .45rem; }
  .office__tag { font-size: .68rem; }
  .contacts-quick__label, .offices__country { font-size: .74rem; }
}