/* ==========================================================================
   Карта филиалов (mapBranches) — ymaps 2.1, стиль Honda Club
   ========================================================================== */
.map-branches{padding:58px 0;background:#fff}
.map-branches .label{font-size:12px;font-weight:900;letter-spacing:.11em;
  text-transform:uppercase;color:var(--red)}
.map-branches h2{font-size:34px;margin:5px 0 10px;letter-spacing:-.03em}
.map-branches-desc{font-size:17px;color:var(--muted);max-width:720px;margin:0 0 26px}

.map-branches-grid{display:grid;gap:24px;grid-template-columns:1.45fr .55fr;
  align-items:start}

/* ---------- карта ---------- */
.map-branches-map{border-radius:12px;overflow:hidden;background:#2a2a2a;
  border:1px solid var(--line, #e6e6e6)}
.map-branches-canvas{width:100%;height:520px}

/* ---------- список филиалов ---------- */
.map-branches-list{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:8px;max-height:520px;overflow:auto}

.branch{position:relative;margin:0;border:1px solid var(--line, #e6e6e6);
  border-radius:10px;background:#fff;transition:border-color .2s,background-color .2s}
.branch:hover{border-color:rgba(237,28,36,.45)}
.branch.is-active{border-color:var(--red);background:rgba(237,28,36,.04)}

.branch-btn{display:flex;align-items:flex-start;gap:10px;width:100%;
  padding:12px 14px 10px;background:none;border:0;margin:0;font:inherit;
  text-align:left;cursor:pointer;color:inherit}
.branch-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:10px}

.branch-num{flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;border-radius:7px;font-size:12px;font-weight:900;
  background:#f2f2f2;color:#555;transition:background .2s,color .2s}
.branch.is-active .branch-num{background:var(--red);color:#fff}

.branch-body{flex:1 1 auto;min-width:0;display:block}
.branch-title{display:block;font-size:14px;font-weight:800;line-height:1.25;
  letter-spacing:-.01em;margin-bottom:3px}
.branch-address{display:block;font-size:13px;line-height:1.35;color:#4a4a4a}
.branch-metro{display:block;font-size:12px;line-height:1.35;color:var(--muted);margin-top:2px}

/* телефон и маршрут — вне кнопки, иначе вложенная ссылка не кликается */
.branch-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  padding:0 14px 11px 48px}
.branch-phone{display:inline-block;font-size:13px;font-weight:800;color:#1a1a1a;
  text-decoration:none;letter-spacing:-.01em;transition:color .18s}
.branch-phone:hover,.branch-phone:focus-visible{color:var(--red);text-decoration:underline}
.branch-route{display:inline-block;font-size:12px;font-weight:800;color:var(--red);
  text-decoration:none;transition:opacity .18s}
.branch-route:hover{text-decoration:underline}

/* ---------- адаптив ---------- */
@media(max-width:1099px){
  .map-branches-grid{grid-template-columns:1fr;gap:18px}
  .map-branches-canvas{height:420px}
  .map-branches-list{max-height:none;flex-direction:row;flex-wrap:wrap}
  .branch{flex:1 1 calc(50% - 8px);min-width:260px}
}
@media(max-width:767px){
  .map-branches{padding:38px 0}
  .map-branches h2{font-size:25px}
  .map-branches-desc{font-size:15px}
  .map-branches-canvas{height:320px}
  .branch{flex:1 1 100%;min-width:0}
  .branch-btn{padding:11px 12px 9px}
  .branch-actions{padding:0 12px 10px 46px}
}
@media(prefers-reduced-motion:reduce){
  .branch,.branch-num{transition:none}
}

/* ---------- кнопки мессенджеров ---------- */
.map-branches-msg{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.msg-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 14px;
  border:1px solid var(--line, #e6e6e6);border-radius:10px;background:#fff;
  color:#1a1a1a;font-size:14px;font-weight:800;line-height:1;letter-spacing:-.01em;
  text-decoration:none;transition:border-color .18s,background-color .18s,color .18s,transform .18s}
.msg-btn:hover{transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.12)}
.msg-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.msg-btn svg{flex:none;color:#6b6b6b;transition:color .18s}

.msg-max:hover{background:#2b6cf6;border-color:#2b6cf6;color:#fff}
.msg-max:hover svg{color:#fff}
.msg-tg:hover{background:#229ed9;border-color:#229ed9;color:#fff}
.msg-tg:hover svg{color:#fff}
.msg-wa:hover{background:#25d366;border-color:#25d366;color:#fff}
.msg-wa:hover svg{color:#fff}

@media(max-width:899px){
  .map-branches-msg{gap:8px;margin-bottom:18px}
  /* на телефоне только иконки: подпись в узкой кнопке вылезала */
  .msg-btn span{display:none}
  .msg-btn{width:44px;height:44px;padding:0;gap:0;
    align-items:center;justify-content:center}
  .msg-btn svg{width:20px;height:20px}
  .msg-max svg{width:18px;height:18px}
}
@media(prefers-reduced-motion:reduce){
  .msg-btn{transition:border-color .18s,background-color .18s,color .18s}
  .msg-btn:hover{transform:none;box-shadow:none}
}

/* ---------- кнопки мессенджеров переехали под карту ----------
   Раньше блок стоял над .map-branches-grid и имел отступ снизу.
   Теперь он последний в секции: нужен отступ сверху, снизу не нужен. */
.map-branches-grid + .map-branches-msg{margin:24px 0 0}
@media(max-width:899px){
  .map-branches-grid + .map-branches-msg{margin:18px 0 0}
}