/* СТРАНИЦА КОНТАКТОВ — СВОЯ ВЁРСТКА, НЕ ЛЕГАСИ.
   Прежняя страница жила в разметке старого сайта: узкая колонка меню слева, карта
   подложкой и табличка с адресом поверх неё. Здесь всё сложено заново — большой
   заголовок, полосой быстрые действия, город карточкой «карта + сведения»,
   реквизиты складнем и меню раздела внизу фишками.

   ВСЁ ЗАПЕРТО НА `.contacts-page`: файл подключается только этой страницей, но
   соседние страницы раздела живут в тех же `#about`, и общий селектор дотянулся
   бы и до них. Переменные — из `base.css`, со своими запасными значениями:
   таблица стилей грузится отдельным файлом и не должна зависеть от порядка. */

.contacts-page{
   --c-ink:#0f0f10;
   --c-sub:#5d5d63;
   --c-muted:#93939b;
   --c-line:#ececee;
   --c-line-soft:#f4f4f6;
   --c-card:#fff;
   --c-accent:var(--accent,#e6454c);
   --c-r:20px;
   color:var(--c-ink);
}

.contacts-page .cts{max-width:1180px;margin:0 auto;padding:0 20px 90px}

/* ── Шапка страницы ─────────────────────────────────────────────────────── */
.contacts-page .cts-hero{padding:54px 0 0}
.contacts-page .cts-hero h1{margin:0;font-size:clamp(34px,4.6vw,54px);font-weight:300;line-height:1.05;letter-spacing:-.025em;color:var(--c-ink)}
.contacts-page .cts-hero__sub{margin:16px 0 0;max-width:40em;font-size:17px;line-height:1.6;color:var(--c-sub)}

.contacts-page .cts-actions{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 44px}
.contacts-page .cts-action{
   display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;
   background:var(--c-ink);color:#fff;font-size:14px;line-height:1;text-decoration:none;
   transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.contacts-page .cts-action:hover{background:#26262a;color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,15,16,.16)}
.contacts-page .cts-action--ghost{background:var(--c-card);color:var(--c-ink);border:1px solid var(--c-line)}
.contacts-page .cts-action--ghost:hover{background:var(--c-card);color:var(--c-ink);border-color:#d8d8dc;box-shadow:0 6px 18px rgba(15,15,16,.08)}
.contacts-page .cts-action svg{width:17px;height:17px;flex:none;opacity:.9}


/* ── Карточка города ────────────────────────────────────────────────────── */
.contacts-page .cts-city{display:grid;gap:26px}
.contacts-page .cts-city + .cts-city{margin-top:26px}

.contacts-page .cts-card{
   display:grid;grid-template-columns:minmax(0,1fr);min-width:0;
   background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-r);overflow:hidden;
   box-shadow:0 1px 2px rgba(15,15,16,.04);
}
@media(min-width:940px){
   .contacts-page .cts-card{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
}

.contacts-page .cts-map{position:relative;min-height:300px;background:#f1f1f3}
@media(min-width:940px){.contacts-page .cts-map{min-height:100%}}
.contacts-page .cts-map__canvas{position:absolute;inset:0}
/* Запасной кадр Embed (когда ключу не разрешён JavaScript API) остаётся
   неподвижным: чужой iframe забирает колесо себе целиком, и страница переставала
   бы прокручиваться. Большая карта открывается ссылкой в углу. */
.contacts-page .cts-map__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none}

/* Пока не ясно, нарисуется ли карта, кадр держим невидимым: иначе на обновлении
   страницы видно, как мелькают метки, и их сменяет запасной кадр. */
.contacts-page .cts-map__canvas.is-waiting{visibility:hidden}

/* Переключатель адресов над запасным кадром: он умеет одну метку за раз. */
.contacts-page .cts-map__picks{position:absolute;left:14px;top:14px;z-index:1001;display:flex;flex-wrap:wrap;gap:6px}
.contacts-page .cts-map__picks button{
   display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 7px;border:0;border-radius:999px;
   background:rgba(255,255,255,.94);color:var(--c-sub);font:400 12px/1 var(--font,system-ui);cursor:pointer;
   box-shadow:0 1px 4px rgba(15,15,16,.2);
}
.contacts-page .cts-map__picks button i{
   display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
   background:#e3e3e6;color:#5d5d63;font-style:normal;font-size:11px;font-weight:600;
}
.contacts-page .cts-map__picks button[aria-pressed="true"]{color:var(--c-ink);font-weight:500}
.contacts-page .cts-map__picks button[aria-pressed="true"] i{background:#ea4335;color:#fff}

/* Свои «+ / −» для запасного кадра: у неподвижного кадра своих органов нет. */
.contacts-page .cts-map__zoom{position:absolute;right:14px;bottom:14px;z-index:1001;display:grid;gap:1px;border-radius:10px;overflow:hidden;box-shadow:0 1px 5px rgba(15,15,16,.25)}
.contacts-page .cts-map__zoom button{
   width:34px;height:34px;border:0;background:#fff;color:var(--c-ink);
   font:400 18px/1 var(--font,system-ui);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.contacts-page .cts-map__zoom button:hover{background:#f2f2f4}

/* Ссылка на большую карту — поверх угла кадра, выше органов управления карты. */
.contacts-page .cts-map__open{
   position:absolute;left:14px;bottom:14px;z-index:1001;
   padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.94);
   font-size:12px;line-height:1.2;color:var(--c-ink);text-decoration:none;
   box-shadow:0 1px 4px rgba(15,15,16,.18);
}
.contacts-page .cts-map__open:hover{background:#fff;color:var(--c-ink);text-decoration:none}
.contacts-page .cts-map--none{display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-size:13px}

.contacts-page .cts-info{padding:30px 32px;display:grid;gap:24px;align-content:start}
.contacts-page .cts-info__head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.contacts-page .cts-info__city{margin:0;font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--c-ink);border:0;padding:0}

.contacts-page .cts-state{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:12.5px;line-height:1;background:#f2f2f4;color:var(--c-sub)}
.contacts-page .cts-state i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.contacts-page .cts-state--open{background:#e9f8ec;color:#1a7a33}

.contacts-page .cts-places{display:grid;gap:22px;margin:0;padding:0;list-style:none}
/* НОМЕРА — КОГДА АДРЕСОВ НЕСКОЛЬКО: те же цифры стоят на метках карты, иначе не
   видно, какая метка чей адрес. Один адрес — номер не нужен, метка одна. */
.contacts-page .cts-places--many{counter-reset:cts-pt}
.contacts-page .cts-places--many .cts-place{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;align-items:start;counter-increment:cts-pt}
.contacts-page .cts-places--many .cts-place > *{grid-column:2}
.contacts-page .cts-places--many .cts-place::before{
   content:counter(cts-pt);grid-column:1;grid-row:1/-1;align-self:start;
   width:22px;height:22px;border-radius:50%;background:#ea4335;color:#fff;
   font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.contacts-page .cts-place{padding-top:22px;border-top:1px solid var(--c-line-soft)}
.contacts-page .cts-place:first-child{padding-top:0;border-top:0}
.contacts-page .cts-place__kind{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.contacts-page .cts-place__addr{margin:8px 0 0;font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.01em;color:var(--c-ink);font-style:normal}
.contacts-page .cts-place__note{margin:7px 0 0;font-size:13px;line-height:1.5;color:var(--c-muted)}

.contacts-page .cts-routes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.contacts-page .cts-route{
   display:inline-flex;align-items:center;gap:7px;padding:8px 14px;white-space:nowrap;
   border:1px solid var(--c-line);border-radius:999px;background:var(--c-card);
   font-size:12.5px;line-height:1;color:var(--c-sub);text-decoration:none;
   transition:border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.contacts-page .cts-route:hover{border-color:#d5d5da;color:var(--c-ink);text-decoration:none;box-shadow:0 3px 10px rgba(15,15,16,.07)}
.contacts-page .cts-route svg{width:15px;height:15px;flex:none}
.contacts-page .cts-route--ya svg{color:#fc3f1d}
.contacts-page .cts-route--gg svg{color:#1a73e8}

.contacts-page .cts-rows{display:grid;gap:4px;padding-top:22px;border-top:1px solid var(--c-line-soft)}
.contacts-page .cts-row{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start;padding:6px 0;font-size:14px;line-height:1.5}
.contacts-page .cts-row svg{width:16px;height:16px;color:#b9b9c0;margin-top:2px}
.contacts-page .cts-row__v{color:var(--c-ink);font-style:normal}
.contacts-page .cts-row__v span{display:block}
.contacts-page .cts-row__v a{color:var(--c-ink);text-decoration:none;border-bottom:1px solid #dcdce0}
.contacts-page .cts-row__v a:hover{border-bottom-color:var(--c-ink);color:var(--c-ink)}

/* ── Реквизиты складнем ─────────────────────────────────────────────────── */
.contacts-page .cts-req{margin-top:34px;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--c-r);padding:0 30px}
.contacts-page .cts-req + .cts-req{margin-top:14px}
.contacts-page .cts-req > summary{
   list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
   padding:24px 0;font-size:17px;font-weight:500;color:var(--c-ink);
}
.contacts-page .cts-req > summary::-webkit-details-marker{display:none}
.contacts-page .cts-req > summary::after{content:'';width:9px;height:9px;flex:none;border-right:1.5px solid #a9a9b0;border-bottom:1.5px solid #a9a9b0;transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s ease}
.contacts-page .cts-req[open] > summary::after{transform:rotate(-135deg)}
.contacts-page .cts-req__body{padding-bottom:18px}
.contacts-page .cts-req__row{display:grid;grid-template-columns:minmax(150px,26%) minmax(0,1fr) 28px;gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid var(--c-line-soft);font-size:14px;overflow-wrap:anywhere}
.contacts-page .cts-req__k{color:var(--c-muted);font-size:13px}
.contacts-page .cts-req__v{color:var(--c-ink)}
.contacts-page .cts-copy{justify-self:end;border:0;background:transparent;padding:4px;border-radius:8px;color:#c2c2c9;cursor:pointer;line-height:0;transition:color .15s ease,background-color .15s ease}
.contacts-page .cts-copy:hover{color:var(--c-ink);background:#f4f4f6}
.contacts-page .cts-copy.is-done{color:#1a7a33}
.contacts-page .cts-copy svg{width:15px;height:15px}

/* ── Меню раздела внизу: фишками, а не колонкой ─────────────────────────── */
.contacts-page .cts-more{margin-top:52px;padding-top:34px;border-top:1px solid var(--c-line)}
.contacts-page .cts-more__t{margin:0 0 20px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);font-weight:400}
.contacts-page .cts-more .about-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px 30px}
.contacts-page .cts-more .about-menu__group{margin:0}
.contacts-page .cts-more .about-menu__t{margin:0 0 12px;padding:0;border:0;font-size:12px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;text-align:left;color:var(--c-muted);font-weight:500}
/* Рамку и разделители списка снимаем: на соседних страницах меню — колонка
   кнопок, здесь оно подвал, и коробки в подвале лишние. */
.contacts-page .cts-more .about-menu__list{display:grid;gap:9px;margin:0;padding:0;list-style:none;background:none;border:0;border-radius:0;overflow:visible}
.contacts-page .cts-more .about-menu__list a{display:inline-block;padding:0;border:0;font-size:14px;line-height:1.35;color:var(--c-sub);text-decoration:none;box-shadow:inset 0 -1px 0 transparent}
.contacts-page .cts-more .about-menu__list a:hover{background:none;color:var(--c-ink);box-shadow:inset 0 -1px 0 #dcdce0}
.contacts-page .cts-more .about-menu__list a.is-on{background:none;color:var(--c-ink);font-weight:500}

@media(max-width:939px){
   .contacts-page .cts{padding-bottom:60px}
   .contacts-page .cts-hero{padding-top:34px}
   .contacts-page .cts-map{height:270px;min-height:0}
   .contacts-page .cts-info{padding:24px 22px}
   .contacts-page .cts-req{padding:0 22px}
}
@media(max-width:600px){
   .contacts-page .cts-actions{margin:24px 0 30px}
   .contacts-page .cts-action{flex:1 1 100%;justify-content:center}
      .contacts-page .cts-req__row{grid-template-columns:minmax(0,1fr) 28px;gap:4px 12px}
   .contacts-page .cts-req__k{grid-column:1/-1}
}