/* ═══════════════════════════════════════════════════════════════
   上海服务区域地图（2026-10-03 建立）
   位置：首页「上海服务区域」板块 + /service-area.html 区域选择器
   数据：/assets/sh-districts.json（tools/build-region-map.mjs 生成）
   口径：颜色只表达一件事 —— 「可承接楼盘数量」分 5 档；点击区域 = 进入该区筛选。
   ═══════════════════════════════════════════════════════════════ */

.shmap-block{display:grid;grid-template-columns:minmax(0,1.34fr) minmax(0,1fr);gap:46px;align-items:center}
.shmap-block.is-solo{grid-template-columns:minmax(0,720px);justify-content:start}

/* ── 地图本体 ───────────────────────────────────────────── */
.shmap-map{position:relative}
.shmap-svg{display:block;width:100%;height:auto;max-width:700px;margin:0 auto;overflow:visible}
.shmap-svg .sh-d{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .32s var(--ease)}
.shmap-svg .sh-d .sh-fill{stroke:#fff;stroke-width:1.4;stroke-linejoin:round;transition:filter .32s var(--ease),stroke .32s var(--ease)}
.shmap-svg .sh-d .sh-hit{fill:none;stroke:transparent;stroke-width:13;pointer-events:stroke}
.shmap-svg .sh-d:focus{outline:none}
.shmap-svg .sh-d:hover,.shmap-svg .sh-d:focus-visible,.shmap-svg .sh-d.is-hover{transform:translateY(-3px)}
.shmap-svg .sh-d:hover .sh-fill,.shmap-svg .sh-d:focus-visible .sh-fill,.shmap-svg .sh-d.is-hover .sh-fill{filter:brightness(1.06) drop-shadow(0 9px 15px rgba(0,0,0,.22));stroke:var(--gold)}
.shmap-svg .sh-d.is-active .sh-fill{stroke:var(--ink);stroke-width:2}
.shmap-svg text{font-family:var(--serif);font-size:25px;fill:#1e1810;text-anchor:middle;dominant-baseline:central;pointer-events:none;letter-spacing:.02em}
.shmap-svg text.sh-short{font-size:21px;fill:#2a2213}
.shmap-svg .sh-d:hover text,.shmap-svg .sh-d.is-hover text,.shmap-svg .sh-d.is-active text{font-weight:600}
/* 进场：区按序号错峰浮现（由 IntersectionObserver 加 .is-in 触发，滚动到才播）
   ⚠️ 默认态必须是「可见」：隐藏只在 .will-anim 下发生，避免观察器/动画失效时地图变空白。
   ⚠️ 只做 opacity 动画：g 上的 transform 要留给 hover 抬升，动画一旦 fill 住 transform 就点不动效果 */
.shmap-svg.will-anim .sh-d{opacity:0}
.shmap-svg.will-anim.is-in .sh-d{animation:shmapIn .6s var(--ease) both;animation-delay:calc(var(--i,0) * 30ms)}
@keyframes shmapIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .shmap-svg.will-anim .sh-d{opacity:1;animation:none!important}
  .shmap-svg .sh-d:hover{transform:none}
}

/* ── 图下读数条 + 图例 ──────────────────────────────────── */
.shmap-cap{margin-top:20px;text-align:center;font-size:14px;color:var(--muted);min-height:23px;letter-spacing:.02em}
.shmap-cap b{font-family:var(--serif);font-size:17px;font-weight:500;color:var(--ink);letter-spacing:.04em}
.shmap-cap em{font-style:normal;color:var(--gold);font-weight:600;padding:0 1px}
.shmap-cap .go{color:var(--gold);white-space:nowrap}
.shmap-legend{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;align-items:center;margin-top:14px;font-size:11.5px;color:var(--muted)}
.shmap-legend .lg-cap{letter-spacing:.1em}
.shmap-legend span{display:inline-flex;align-items:center;gap:6px}
.shmap-legend i{width:15px;height:10px;border:1px solid rgba(0,0,0,.10);display:inline-block}

/* ── 右侧：16 区清单（同时是爬虫可读的文字版 + 手机端可点列表）── */
.shmap-list{align-self:center}
.shmap-list .ls-head{font-family:var(--serif-en);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.shmap-list ul{list-style:none;display:grid;grid-template-columns:1fr;gap:0 24px}
.shmap-list li{margin:0}
.shmap-list a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:15px;color:var(--ink);transition:.25s var(--ease)}
.shmap-list a:hover{color:var(--gold);border-color:var(--gold);letter-spacing:.02em}
.shmap-list a.is-active{color:var(--gold);border-color:var(--gold)}
.shmap-list a .n{font-family:var(--sans);font-size:12px;color:var(--muted);font-weight:400}
.shmap-list a:hover .n,.shmap-list a.is-active .n{color:var(--gold)}
.shmap-list .ls-foot{margin-top:14px;font-size:12.5px;color:var(--muted)}

/* ── 响应式（必须放在所有基础规则之后：同权重下后写的赢）─────────
   ≤1000px：地图上、清单下（清单排两列，免得 16 行把手机页面拖太长） */
@media(max-width:1000px){
  .shmap-block,.shmap-block.is-solo{grid-template-columns:minmax(0,1fr);gap:30px}
  .shmap-svg{max-width:640px}
  .shmap-list ul{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .shmap-list ul{gap:0 16px}
  .shmap-list a{padding:9px 2px;font-size:14.5px}
  .shmap-svg text{font-size:24px}
  .shmap-svg text.sh-short{font-size:20px}
}