/* ==========================================================================
   城市分站 branches.css · 互动服务地图
   依赖 site.css 变量（--blue/--blue-b/--blue-l/--deep 等）
   ========================================================================== */

/* ---------- 互动地图区 ---------- */
.brmap{
  display:grid;grid-template-columns:1.45fr 1fr;gap:28px;align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;
  box-shadow:0 10px 34px rgba(10,42,74,.06);
}
.brmap-svg{position:relative;min-width:0}
.brmap-svg>svg{width:100%;height:auto;display:block}
/* 占位防位移：branches.js 注入省份路径前 SVG 高度为 0，注入后整页 +850px，
   会让 #map 锚点跳转落到变化中的布局上（main 整体跳动，CLS≈0.079）。
   aspect-ratio 与 cnmap-data.js 的 w:780/h:673 保持同步。 */
.brmap-svg>svg#cnmapSvg{aspect-ratio:780/673}

/* 省份基础态（按等级着色） */
.pv{cursor:pointer;transition:fill .18s ease;stroke:#fff;stroke-width:.7;outline:none}
.pv.lv-hq{fill:var(--blue)}          /* 总部直营 北京 */
.pv.lv-branch{fill:var(--blue-b)}    /* 分公司驻地 湖南 */
.pv.lv-a{fill:#A9CBEA}               /* 常态服务 */
.pv.lv-b{fill:#CFE1F4}               /* 项目服务 */
.pv.lv-c{fill:#E9EEF5}               /* 线上咨询可及 */
.brmap-svg.dim .pv:not(.hot){fill:#EDF1F7;transition:fill .18s ease}
.pv:hover,.pv.hot{fill:var(--orange-b)!important;stroke:#fff;stroke-width:1}
.pv:focus-visible{stroke:var(--deep);stroke-width:1.6}

/* 标注点（总部 / 分公司） */
.mk{pointer-events:none}
.mk-dot{fill:#fff;stroke:var(--deep);stroke-width:2}
.mk--hq .mk-dot{fill:var(--orange-b);stroke:#fff;stroke-width:2.4}
.mk--branch .mk-dot{fill:#fff;stroke:var(--blue-deep);stroke-width:2.2}
.mk-ring{fill:none;stroke:rgba(232,163,61,.75);stroke-width:1.6;animation:bmk 2.4s ease-out infinite}
.mk--branch .mk-ring{stroke:rgba(30,128,214,.55);animation-delay:1.2s}
@keyframes bmk{
  0%{opacity:.9;transform:scale(.55)}70%{opacity:0;transform:scale(1.5)}100%{opacity:0}
}
.mk-lb{font-size:12.5px;font-weight:700;fill:var(--deep);
  paint-order:stroke;stroke:#fff;stroke-width:3.2;stroke-linejoin:round}

/* 南海诸岛插图（选择器带 .brmap-svg 前缀，压过 `.brmap-svg>svg` 的 width:100%） */
.brmap-svg .cnmap-inset{
  position:absolute;right:6px;bottom:0;width:112px;height:auto;
  background:#F6F9FC;border:1px solid var(--line);border-radius:6px;padding:4px 6px;
  pointer-events:none;
}
.brmap-svg .cnmap-inset path{fill:none;stroke:#41719C;stroke-width:1.1;vector-effect:non-scaling-stroke}
.brmap-svg .cnmap-inset .jd{stroke:#B4472E;stroke-width:1.3}
.brmap-svg .cnmap-inset-cap{
  position:absolute;right:14px;bottom:6px;font-size:10.5px;color:var(--gray-3);
  pointer-events:none
}

/* ---------- 右侧信息面板 ---------- */
.brmap-panel{
  position:relative;background:linear-gradient(180deg,#F7FAFE 0%,#fff 60%);
  border:1px solid var(--line);border-radius:14px;padding:26px 26px 22px;
  display:flex;flex-direction:column;gap:12px;min-height:520px;
}
.bp-tag{
  align-self:flex-start;font-size:12.5px;font-weight:700;color:var(--blue-ink);
  background:var(--tint-blue);border-radius:999px;padding:4px 12px;letter-spacing:.5px
}
.bp-t{font-size:25px;margin:2px 0 0;color:var(--deep);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bp-lv{font-size:12px;font-weight:700;border-radius:6px;padding:3px 9px;letter-spacing:.5px}
.bp-lv.lv-hq{background:var(--blue);color:#fff}
.bp-lv.lv-branch{background:var(--blue-b);color:#fff}
.bp-lv.lv-a{background:var(--tint-blue);color:var(--blue-ink)}
.bp-lv.lv-b{background:var(--bg-soft);color:var(--gray-2)}
.bp-lv.lv-c{background:#F4F0EA;color:var(--orange-ink)}
.bp-d{margin:0;font-size:15px;line-height:1.9;color:var(--gray-2)}
.bp-sub{
  background:#fff;border:1px solid var(--line-2);border-left:3px solid var(--blue-b);
  border-radius:8px;padding:10px 14px;font-size:13.5px;line-height:1.8;color:var(--gray-2)
}
.bp-sub b{display:block;font-size:12.5px;color:var(--deep);margin-bottom:3px;letter-spacing:1px}

.bp-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bp-stats>div{background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:12px 14px}
.bp-stats b{display:block;font-size:21px;color:var(--blue);line-height:1.2}
.bp-stats span{font-size:12.5px;color:var(--gray-2)}

.bp-chips{display:flex;flex-wrap:wrap;gap:8px}
.bp-chip{
  font-size:13px;font-weight:600;border-radius:8px;padding:6px 12px;cursor:pointer;
  border:1px solid transparent;transition:all .15s ease;font-family:inherit
}
.bp-chip.lv-hq{background:var(--blue);color:#fff}
.bp-chip.lv-branch{background:var(--blue-b);color:#fff}
.bp-chip.lv-a{background:var(--tint-blue);color:var(--blue-ink)}
.bp-chip.lv-a:hover{background:var(--blue-b);color:#fff}
.bp-chip.lv-b{background:var(--bg-soft);color:var(--gray-2)}
.bp-chip.lv-b:hover{background:#DFE7F2;color:var(--deep)}
.bp-chip.lv-c{background:#F4F0EA;color:var(--orange-ink)}

.bp-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.btn--sm{padding:9px 18px;font-size:14px}
.bp-back{
  align-self:flex-start;background:none;border:none;cursor:pointer;
  font-size:13px;color:var(--blue-ink);padding:2px 0;font-family:inherit
}
.bp-back:hover{text-decoration:underline}
.bp-close{
  position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:8px;
  border:1px solid var(--line);background:#fff;color:var(--gray-2);font-size:17px;
  cursor:pointer;line-height:1;transition:all .15s ease
}
.bp-close:hover{color:var(--deep);border-color:var(--deep)}

.bp-legend{
  margin-top:auto;display:flex;flex-wrap:wrap;gap:8px 14px;
  border-top:1px dashed var(--line);padding-top:12px
}
.bp-legend span{font-size:12px;color:var(--gray-2);display:inline-flex;align-items:center;gap:6px}
.lg{width:12px;height:12px;border-radius:3px;display:inline-block}
.lg-hq{background:var(--blue)}
.lg-branch{background:var(--blue-b)}
.lg-a{background:#A9CBEA}
.lg-b{background:#CFE1F4}
.lg-c{background:#E9EEF5;border:1px solid var(--line)}

/* 地图脚注 */
.brmap-note{
  margin-top:14px;font-size:12px;color:var(--gray-3);line-height:1.8
}

/* ---------- 区域目录卡 ---------- */
.region-card h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.region-card .rc-tag{
  font-size:11.5px;font-weight:700;border-radius:6px;padding:3px 9px;
  background:var(--ac-l);color:var(--ac-ink);letter-spacing:.5px
}
.region-card .bp-chips{margin-top:14px}
.region-card{cursor:default;transition:box-shadow .2s ease,transform .2s ease}
.region-card:hover{box-shadow:0 12px 30px rgba(10,42,74,.10);transform:translateY(-2px)}

/* ---------- 响应式 ---------- */
@media(max-width:1024px){
  .brmap{display:flex;flex-direction:column;gap:22px;padding:18px}
  .brmap-panel{min-height:0}
  .bp-legend{margin-top:4px}
}
@media(max-width:600px){
  .brmap{padding:12px}
  .bp-t{font-size:21px}
  /* 给南海插图留出专属空间，不再压住东南沿海省份 */
  .brmap-svg{padding-bottom:86px}
  .brmap-svg .cnmap-inset{width:72px}
}
@media(max-width:1024px) and (min-width:601px){
  .brmap-svg .cnmap-inset{width:92px}
}
@media(prefers-reduced-motion:reduce){
  .mk-ring{animation:none;opacity:.5}
  .pv{transition:none}
  .brmap .pv{opacity:1;animation:none}
  .br-spark,.br-link,.br-hint::before{animation:none}
  .br-link{opacity:1}
  .brmap-panel.anim *{animation:none!important}
}

/* ==========================================================================
   电话入口（2026-11-03）：地图下方常驻电话条 + 右侧面板各视图拨打条
   ========================================================================== */
.brmap-call{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;
  margin-top:14px;padding:15px 20px;border:1px solid #CFE3F7;border-radius:14px;
  background:linear-gradient(100deg,#F1F8FF,#fff 64%);
}
.brmap-call-t b{display:block;font-size:15.4px;color:var(--deep)}
.brmap-call-t span{display:block;margin-top:5px;font-size:13.2px;line-height:1.7;color:var(--gray-2)}
.brmap-call-a{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
.brmap-call-a .btn{padding:10px 18px;font-size:14px}
.brmap-call-a em{font-style:normal;font-size:11.6px;font-weight:600;opacity:.82;margin-left:7px}

.bp-call{
  display:flex;align-items:center;gap:10px;margin-top:4px;
  border:1px solid #CFE3F7;border-radius:10px;padding:9px 12px;
  background:linear-gradient(96deg,#F1F8FF,#fff 72%);text-decoration:none;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.bp-call:hover{border-color:#7FB2DC;background:#EAF5FF;transform:translateY(-1px)}
.bp-call-i{flex:0 0 30px;width:30px;height:30px;border-radius:8px;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center}
.bp-call-b{display:flex;flex-direction:column;line-height:1.22}
.bp-call-b b{font-size:11.4px;font-weight:600;color:var(--gray-2)}
.bp-call-b em{font-style:normal;font-size:17px;font-weight:800;color:var(--blue);letter-spacing:.01em}
.bp-call-m{margin-left:auto;font-size:11.4px;color:var(--gray-3);white-space:nowrap}

@media(max-width:768px){
  .brmap-call{padding:14px 16px;gap:12px}
  .brmap-call-a{width:100%}
  .brmap-call-a .btn{flex:1;justify-content:center;padding:10px 12px}
  .bp-call-m{display:none}
}

/* ---------- 分公司档案（2026-11-03 新疆分公司上线） ----------
   省份面板里说明「谁在本地、覆盖到哪、怎么干」，与办事处辐射区分开 */
.bp-branch{
  background:linear-gradient(180deg,#F7FBFF,#FFF);border:1px solid var(--line-2);
  border-left:3px solid var(--blue-b);border-radius:10px;padding:12px 14px;
  display:grid;gap:8px
}
.bp-branch-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bp-branch-h b{font-size:15px;color:var(--deep)}
.bp-branch-h span{font-size:12.3px;font-weight:600;color:var(--blue-ink);background:var(--tint-blue);
  border-radius:999px;padding:2px 9px}
.bp-branch .bp-sub{background:transparent;border:0;border-radius:0;padding:0;font-size:13px;line-height:1.75}
.bp-branch .bp-sub b{display:block;font-size:11.6px;letter-spacing:.08em;color:var(--gray-3);margin-bottom:2px}

/* 总览统计 5 格：最后一项通栏，避免半格留白 */
.bp-stats>div:nth-child(5){grid-column:1/-1}

/* ==========================================================================
   动效（2026-11-04）：与首页地图同款 —— 逐省点亮 / 总部→分公司流光 /
   悬停光晕 / 面板切换淡入；进入视口才触发（.brmap.is-on）
   作用域全部锁在 .brmap，不影响首页 .hmap（index.html 也引本文件）
   ========================================================================== */

/* 逐省点亮：JS 给每个省份写 animation-delay，这里等 is-on 再播 */
.brmap .pv{opacity:0;transform-box:fill-box;transform-origin:center}
.brmap.is-on .pv{animation:brPvIn .5s var(--ease) forwards}
@keyframes brPvIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* 悬停光晕：比基础态多一层外发光，指哪亮哪 */
.brmap .pv:hover,.brmap .pv.hot{filter:drop-shadow(0 2px 7px rgba(232,163,61,.45))}

/* 服务网络流光：北京总部 → 长沙 / 新疆分公司（示意连线，不指真实路由） */
.br-net{pointer-events:none}
.br-link{fill:none;stroke:rgba(30,128,214,.42);stroke-width:1.7;stroke-linecap:round;
  stroke-dasharray:5 8;animation:brFlow 1.9s linear infinite,brVIn .7s var(--ease) .35s both}
@keyframes brFlow{to{stroke-dashoffset:-26}}
@keyframes brVIn{from{opacity:0}to{opacity:1}}
.br-spark{fill:var(--orange-b);filter:drop-shadow(0 0 5px rgba(245,168,46,.85))}

/* 操作提示（与首页 .hm-hint 同款） */
.br-hint{position:absolute;left:10px;bottom:6px;z-index:2;
  font-size:11.8px;color:var(--gray-3);letter-spacing:.02em}
.br-hint::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--green-b);margin-right:6px;vertical-align:1px;
  animation:brDot 1.8s ease-in-out infinite}
@keyframes brDot{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* 面板切换淡入：每次渲染重播（JS 通过重排重触发） */
.brmap-panel.anim .bp-tag,.brmap-panel.anim .bp-t,.brmap-panel.anim .bp-d,
.brmap-panel.anim .bp-branch,.brmap-panel.anim .bp-sub,.brmap-panel.anim .bp-chips,
.brmap-panel.anim .bp-cta,.brmap-panel.anim .bp-stats,.brmap-panel.anim .bp-back{
  animation:brIn .38s var(--ease) both}
.brmap-panel.anim .bp-t{animation-delay:.04s}
.brmap-panel.anim .bp-d{animation-delay:.08s}
.brmap-panel.anim .bp-branch,.brmap-panel.anim .bp-sub,.brmap-panel.anim .bp-chips,
.brmap-panel.anim .bp-cta,.brmap-panel.anim .bp-stats,.brmap-panel.anim .bp-back{
  animation-delay:.12s}
@keyframes brIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 「一套架构」标题：整行呈现（2026-11-04） ----------
   36px 时约 890px，超出 .sec-head 的 800px 必然折行；
   降到 30px 顶格、再随视口线性缩放，≥560px 保证一行；
   <560px 允许在箭头后自然折行（结构里 nbsp 已保箭头不悬头） */
#network .sec-head h2.h2-flow{font-size:clamp(19px,3.2vw,30px)}
#network .sec-head h2.h2-flow .accent i{font-style:normal;white-space:nowrap}
@media(min-width:560px){
  #network .sec-head h2.h2-flow{white-space:nowrap}
}

/* 打印兜底：逐省点亮依赖 .is-on，打印/导出时直接呈现，避免省份空白 */
@media print{
  .brmap .pv{opacity:1!important;animation:none!important;transform:none!important}
  .br-spark,.br-link,.br-hint::before{display:none!important}
  .brmap-panel.anim *{animation:none!important}
}