/* ============================================================================
   Страница «Контакты» — page-kontakty.php.

   Грузится только на этой странице (enqueue стоит в самом шаблоне).
   Все значения — из assets/tokens.css: литералов цвета здесь нет, кроме #fff.
   Призыв в конце страницы описан в site.css классами .dkPgCta и намеренно
   не переопределяется — две копии одной кнопки в проекте уже были, побеждал
   порядок подключения файлов.
   ========================================================================== */

/* Свой box-sizing: родительская тема hello-elementor уйдёт вместе
   с конструктором, и наследовать её сброс нельзя. */
:is(.dkK),
:is(.dkK) *,
:is(.dkK) *::before,
:is(.dkK) *::after { box-sizing: border-box; }

.dkK {
  font-family: var(--font-body);
  color: var(--body);
}

.dkK__wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Чередование фонов секций по стандарту: #fff → --air → #fff. */
.dkK__sec { padding: var(--section-y) 0; background: #fff; }
.dkK__sec--air { background: var(--air); }

.dkK__sec--hero { padding-bottom: calc(var(--section-y) / 2); }

.dkK__crumbs { font-size: var(--fz-meta); color: var(--muted); margin-bottom: 16px; }
.dkK .dkK__crumbs a { color: var(--navy); text-decoration: none; }
.dkK .dkK__crumbs a:hover { text-decoration: underline; }

.dkK__eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 12px;
}

.dkK__h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fz-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-h1);
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}

.dkK__h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fz-h2);
  line-height: var(--lh-h2);
  color: var(--ink);
  margin: 0 0 24px;
  text-wrap: balance;
}

.dkK__lead {
  font-size: var(--fz-sub);
  line-height: var(--lh-sub);
  color: var(--body);
  margin: 0;
  max-width: 46ch;
}

/* --- Карточки контактов --------------------------------------------------- */

/* minmax обёрнут в min(): голый minmax(280px, 1fr) не сжимается ниже 280
   и на экране 375 выдавливает страницу вбок — так уже ломалась вилка цены. */
.dkK__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--grid-gap);
}

.dkK__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh1);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dkK__card--wide { grid-column: 1 / -1; }

.dkK__cardTitle {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fz-meta);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}

.dkK__val {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}

.dkK__val--big { font-size: var(--fz-h3); margin-bottom: 16px; }

/* Телефон и почта — цели нажатия: на телефоне по ним и звонят. */
.dkK .dkK__val--tel,
.dkK .dkK__val--mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--navy);
  text-decoration: none;
  word-break: break-word;
}

.dkK .dkK__val--tel:hover,
.dkK .dkK__val--mail:hover { color: var(--cyan); }

.dkK .dkK__val--mail { font-size: 17px; }

.dkK .dkK__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-btn);
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dkK .dkK__link:hover { color: var(--cyan); }

.dkK__hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.dkK__hoursItem {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

.dkK__note { font-size: var(--fz-meta); line-height: 1.5; color: var(--muted); margin: 4px 0 0; }

.dkK__social { display: flex; flex-wrap: wrap; gap: 10px; }

.dkK .dkK__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--tint);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fz-btn);
  color: var(--navy);
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.dkK .dkK__chip:hover { background: #fff; border-color: var(--blue); }

/* --- Как добраться и карта ------------------------------------------------ */

.dkK__route { font-size: var(--fz-body); line-height: var(--lh-body); max-width: 68ch; }
.dkK__route > * + * { margin-top: 14px; }
.dkK__route ul { list-style: none; margin: 0; padding: 0; }
.dkK__route li { position: relative; padding-left: 26px; margin-bottom: 10px; }

/* Ромб — единственный маркёр списка в системе. */
.dkK__route ul > li::before {
  content: "";
  position: absolute;
  left: 2px; top: .6em;
  width: 9px; height: 9px;
  transform: rotate(45deg);
  background: var(--cyan);
}

.dkK .dkK__route a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }

/* Подсказка редактору. Видна только тем, кто может править страницу, —
   отсюда и вид служебной плашки, а не элемента дизайна. */
.dkK__admin {
  border: 1px dashed var(--blue);
  border-radius: var(--r-md);
  background: var(--tint);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
  max-width: 68ch;
}

.dkK__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }

.dkK .dkK__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fz-btn);
  text-decoration: none;
}

.dkK .dkK__btn--ghost {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.dkK .dkK__btn--ghost:hover { border-color: var(--blue); color: var(--cyan); }

/* Обёртка карты — цель якоря #dk-karta на главной; на «Контактах» здесь же
   ставит класс скрипт (см. ниже), пусть якорь у самой страницы и висит
   на родительской <section>. */
.dkK__mapBox { scroll-margin-top: 24px; }

/* Место под карту задано пропорцией заранее: иначе рамка появляется после
   загрузки и сдвигает всё, что под ней (CLS). position: relative — общий
   для обеих страниц, где карта показывается сама (assets/map-auto.js):
   подложка (.dkK__mapStub) стоит внутри абсолютно и без него уехала бы
   за пределы рамки. */
.dkK__map {
  position: relative;
  margin-top: 24px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh1);
  aspect-ratio: 16 / 9;
  min-height: 320px;
}

/* Кадр поверх подложки. Без position он бы остался ниже её в порядке
   отрисовки: позиционированный элемент (подложка) рисуется над обычным
   блочным боксом, даже если стоит в разметке раньше. Проверено в браузере:
   elementFromPoint в центре карты возвращает .dkK__mapFrame. */
.dkK__mapFrame { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; }

/* Пока карта не загрузилась, iframe отсутствует в разметке (или ещё не создан
   скриптом) и видно подложку с адресом. Когда кадр появился — он лежит поверх
   и закрывает её собой. Если Яндекс у человека заблокирован, подложка
   остаётся навсегда, и это правильный исход: адрес виден. */
.dkK__mapStub {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 24px;
  text-align: center;
}

.dkK__mapStubAddr {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
}

.dkK__mapStubHint {
  font-size: var(--fz-meta);
  line-height: 1.5;
  color: var(--muted);
}

/* Адрес в подложке повторяется не всегда: там, где блок уже напечатал его
   строкой выше (страница «Контакты», вариант главной без карточек), в рамке
   остаётся только подпись, и 13 px var(--muted) посреди неё читаются как
   пустое место, а не как «здесь будет карта». Правило заперто в :only-child
   и срабатывает ровно в этом случае. */
.dkK__mapStubHint:only-child {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--body);
}

/* Кнопка «Показать карту на странице» — запасной путь для тех, у кого
   IntersectionObserver или JS недоступны. Как только скрипт (assets/map-auto.js)
   сам показывает карту, он ставит .dkK__mapBox--auto на обёртку — кнопка
   прячется, потому что показывать уже нечего. Три класса в селекторе —
   не для красоты: специфичность (0-3-0) обязана перебить `.dkK .dkK__btn`
   выше (0-2-0) саму по себе, без расчёта на порядок подключения файлов. */
.dkK .dkK__mapBox--auto .dkK__btn--map { display: none; }

@media (max-width: 640px) {
  .dkK__card { padding: 20px; }
  .dkK__map { aspect-ratio: 4 / 5; min-height: 0; }
  .dkK__actions > .dkK__btn { flex: 1 1 100%; }
}