/* ============================================================
   全国产业带图谱 · 页面级样式（仅 atlas / atlas_prov / atlas_belt 加载）
   依赖：在 static/theme.css 之后加载
   命名空间：全部 .atl-* ，避免影响其他页面
   ============================================================ */

/* ---------- Hero：深墨绿，与首页重设计同族 ---------- */
.atl-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#07130F 0%,#0E2620 58%,#14332B 100%);
  border-radius:var(--r-lg);
  padding:var(--s-10) var(--s-10) var(--s-8);
  margin-bottom:var(--s-8);
}
.atl-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 240px at 82% -18%,rgba(2,219,163,.22),transparent 70%);
}
.atl-hero-in{position:relative;display:flex;align-items:flex-end;gap:var(--s-10);flex-wrap:wrap}
.atl-hero-txt{flex:1 1 420px;min-width:0}
.atl-hero h1{
  margin:0 0 var(--s-3);color:#EDF6F2;
  font-size:var(--fs-30);line-height:1.25;font-weight:700;letter-spacing:0;
}
.atl-hero p{margin:0;color:#A6C6B9;font-size:var(--fs-14);line-height:1.75}

/* Hero 统计：不等分，数字为主 */
.atl-hero-stats{display:flex;gap:var(--s-8);flex:none}
.atl-hs{min-width:88px}
.atl-hs b{
  display:block;color:#02DBA3;font-size:var(--fs-30);font-weight:700;
  line-height:1.05;letter-spacing:-.5px;font-variant-numeric:tabular-nums;
}
.atl-hs span{display:block;margin-top:6px;color:#6E9485;font-size:var(--fs-12)}

/* ---------- 地图卡片 ---------- */
.atl-mapcard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-5) var(--s-5) var(--s-4);box-shadow:var(--sh-1);
}
.atl-map{
  display:block;width:100%;height:auto;
  background:
    radial-gradient(1100px 520px at 50% 42%,#FBFDFC 0%,#F4F8F6 100%);
  border-radius:var(--r-md);
}

/* 省份组：入场 + 悬停 */
.atl-prov{
  transform-box:fill-box;transform-origin:center;
  opacity:0;
  animation:atlIn .52s var(--e-out) both;
  animation-delay:calc(var(--i,0) * 34ms);
  transition:transform .26s var(--e-out);
  cursor:pointer;
}
@keyframes atlIn{
  from{opacity:0;transform:translateY(9px) scale(.965)}
  to  {opacity:1;transform:none}
}
.atl-prov:hover{transform:translateY(-3.5px)}
.atl-prov:hover .atl-shape{filter:brightness(1.06) saturate(1.1)}
.atl-prov:hover .atl-label{font-weight:800;fill:#04382B}

/* 省界 */
.atl-shape{
  stroke:#fff;stroke-width:1.1;
  transition:fill var(--t) var(--e),stroke-width var(--t) var(--e),filter var(--t) var(--e);
}
.atl-prov:hover .atl-shape{stroke-width:1.9}
.atl-shape.is-empty{fill:#E7EEEB}

/* 省名 */
.atl-label{
  font-size:12px;font-weight:700;fill:#0E3B30;letter-spacing:0;
  paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:2.6px;stroke-linejoin:round;
  pointer-events:none;transition:font-weight var(--t) var(--e),fill var(--t) var(--e);
}
.atl-label.is-empty{fill:#9DAFA7;font-weight:600;font-size:11px}

/* 热门省份（产业带 ≥14）呼吸光晕：不占版面位置，避免与省名重叠 */
.atl-shape.is-top{animation:atlGlow 3s var(--e) infinite}
@keyframes atlGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(2,219,163,0))}
  50%    {filter:drop-shadow(0 0 7px rgba(2,219,163,.7))}
}

/* 南海诸岛插图 */
.atl-ss-box{fill:#FBFCFC;stroke:#DCE5E2}
.atl-ss-path{fill:#5FE0BF;stroke:#02DBA3;stroke-width:.6}
.atl-ss-line{fill:none;stroke:#00B487;stroke-width:1.4}
.atl-ss-txt{font-size:10px;fill:#748A80}

/* ---------- 悬停浮层 ---------- */
.atl-tip{
  position:fixed;z-index:60;pointer-events:none;opacity:0;
  transform:translate(-50%,-100%) translateY(-10px);
  background:#07130F;color:#EDF6F2;border-radius:var(--r-sm);
  padding:9px 12px;box-shadow:var(--sh-3);
  font-size:var(--fs-12);line-height:1.6;white-space:nowrap;
  transition:opacity .16s var(--e);
}
.atl-tip.on{opacity:1}
.atl-tip b{color:#02DBA3;font-size:var(--fs-13)}
.atl-tip i{display:block;color:#6E9485;font-style:normal;margin-top:2px;font-size:var(--fs-11)}

/* ---------- 图例 ---------- */
.atl-legend{
  display:flex;align-items:center;justify-content:center;gap:var(--s-4);
  flex-wrap:wrap;margin-top:var(--s-4);padding-top:var(--s-3);
  border-top:1px dashed var(--line-2);
}
.atl-lg{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-11);color:var(--t3)}
.atl-lg i{width:22px;height:9px;border-radius:3px;display:inline-block}
.atl-lg-note{font-size:var(--fs-11);color:var(--t4)}

/* ---------- 搜索 ---------- */
.atl-search{
  display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;
  margin-bottom:var(--s-8);
}
.atl-search input{
  flex:1 1 260px;min-width:0;height:40px;padding:0 14px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--paper);font-size:var(--fs-14);color:var(--t1);
  transition:border-color var(--t) var(--e),box-shadow var(--t) var(--e);
}
.atl-search input:focus{
  outline:none;border-color:var(--g-400);
  box-shadow:0 0 0 3px rgba(2,219,163,.14);
}
.atl-search button{
  height:40px;padding:0 20px;border:none;border-radius:var(--r-pill);
  background:var(--ink-900);color:#EDF6F2;font-size:var(--fs-13);font-weight:600;
  cursor:pointer;transition:background var(--t) var(--e),transform var(--t) var(--e);
}
.atl-search button:hover{background:var(--ink-700);transform:translateY(-1px)}
.atl-search .ghost{
  height:40px;line-height:40px;padding:0 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);color:var(--t2);font-size:var(--fs-13);text-decoration:none;
}
.atl-search .ghost:hover{border-color:var(--g-300);color:var(--g-800)}

/* ---------- 区块标题 ---------- */
.atl-sechead{
  display:flex;align-items:baseline;gap:var(--s-3);
  margin:0 0 var(--s-4);padding-bottom:var(--s-3);border-bottom:1px solid var(--line);
}
.atl-sechead h2{
  margin:0;font-size:var(--fs-18);font-weight:700;color:var(--t1);letter-spacing:0;
}
.atl-sechead span{font-size:var(--fs-12);color:var(--t3)}

/* ---------- 省份卡片网格 ---------- */
.atl-pgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  gap:var(--s-3);
}
.atl-pcard{
  position:relative;display:block;padding:var(--s-4);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:transform var(--t) var(--e-out),box-shadow var(--t) var(--e),border-color var(--t) var(--e);
}
.atl-pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--g-200)}
.atl-pcard:focus-visible{outline:2px solid var(--g-500);outline-offset:2px}
.atl-pc-top{display:flex;align-items:center;gap:var(--s-2);margin-bottom:10px}
.atl-pc-no{
  flex:none;width:22px;height:22px;border-radius:6px;
  background:var(--paper-3);color:var(--t3);
  font-size:var(--fs-11);font-weight:700;line-height:22px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.atl-pcard:hover .atl-pc-no{background:var(--g-100);color:var(--g-800)}
.atl-pc-name{
  flex:1;min-width:0;font-size:var(--fs-15);font-weight:600;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.atl-pc-n{
  flex:none;font-size:var(--fs-12);color:var(--g-800);font-weight:700;
  font-variant-numeric:tabular-nums;
}
.atl-pc-bar{height:4px;border-radius:999px;background:var(--paper-3);overflow:hidden;margin-bottom:10px}
.atl-pc-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#5FE0BF,#008A6B)}
.atl-pc-tags{display:flex;flex-wrap:wrap;gap:5px}
.atl-pc-tags span{
  font-size:var(--fs-11);color:var(--t2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 8px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.atl-pc-tags span.more{color:var(--t4);background:transparent;border-style:dashed}

/* ---------- 省视图 / 产业带视图：轻量增强 ---------- */
.atl-provmap{
  background:linear-gradient(160deg,#F7FBF9,#EFF6F3);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-5);max-width:520px;margin:0 auto;
}
.atl-provmap svg{width:100%;height:auto}
.atl-provmap path{
  filter:drop-shadow(0 6px 14px rgba(2,219,163,.22));
  animation:atlDraw 1.1s var(--e-out) both;
}
@keyframes atlDraw{
  from{opacity:0;transform:scale(.94)}
  to  {opacity:1;transform:none}
}
.atl-provmap svg{transform-box:fill-box}
.atl-provmap path{transform-box:fill-box;transform-origin:center}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .atl-hero{padding:var(--s-6) var(--s-5)}
  .atl-hero h1{font-size:var(--fs-24)}
  .atl-hero-stats{gap:var(--s-6)}
  .atl-hs b{font-size:var(--fs-24)}
}
@media (max-width:640px){
  .atl-pgrid{grid-template-columns:1fr}
  .atl-hero-in{flex-direction:column;align-items:flex-start;gap:var(--s-5)}
  .atl-hero-stats{width:100%}
}

/* ---------- 尊重「减少动效」偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .atl-prov{animation:none;opacity:1;transition:none}
  .atl-shape.is-top{animation:none}
  .atl-provmap path{animation:none}
  .atl-pcard:hover,.atl-prov:hover{transform:none}
}