/* 首页样式 —— 深色数据舱（2026-08-21 深色统一，tokens 全部来自 base.css）。
   页面序列：全局导航条（nav.js，sticky 最顶部）→ 地图 hero（面板化图幅）。
   KPI/featured/页脚读数已按用户决策移除。
   动效只动 transform/opacity；reduced-motion 由 base.css 全局静止。 */

/* 视觉隐藏（保留无障碍可读性）：首页 h1 由导航条站点名承担视觉职责 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* noscript 提示（CSP 禁内联样式，故用类） */
.noscript-note {
  padding: 1rem 1.5rem;
}

/* ---------- 布局骨架（hero 版心收敛；导航条通栏，见 base.css） ---------- */

/* 首页整体最小宽度 = 地图定尺寸 880px + hero 两侧留白：窗口更窄时不压缩地图，
   整个页面（导航/地图/页脚）在浏览器底部出横向滚动条一起滚——页面级滚动，
   避免滚动条挂在 hero 面板与页脚之间的半空（2026-09 修复“滚动条层级不对”）。 */
body {
  min-width: 928px;
}

.hero {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.25rem 1.5rem 1.5rem;
}

/* ---------- 中国地图（map-hero.js 渲染） ---------- */

.map-hero {
  position: relative;
  /* 高度上限换算为宽度（图幅纵横比 1000:740，与 map-hero.js 的 VIEW_W/VIEW_H 同步），
     保住 SVG 固有比例与圆点定位换算；82vh：给导航条/hero 内边距/页脚留约 18vh，
     使常规视口内恰好能看到页脚（2026-09 由 93vh 下调）
     2026-09：max-width → width 定尺寸——窗口收窄时地图不缩小，整页横向滚动（见 body min-width）；
     min-width 880px 为可读性下限；max-width 100vw-3rem 防超高/竖屏窗口下 82vh 换算宽撑出视口 */
  width: calc(82vh * 1000 / 740);
  min-width: 880px;
  max-width: calc(100vw - 3rem);
  margin-inline: auto;
  animation: hero-enter 500ms var(--ease-out-expo);
}

.map-hero__loading {
  margin: 0;
  padding: 3.5rem 1.5rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}

.map-hero__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 省份：透明底（直接透出首页毫米格底纹）+ dim 发丝描边；圆点所在省 cyan 晕染高亮 */
.map-hero__provinces path {
  fill: transparent;
  stroke: var(--text-dim);
  stroke-width: 0.7;
  stroke-opacity: 0.4;
  transition: fill var(--duration-normal) var(--ease-out-expo);
}

/* 国界线（外轮廓）：与省界同为细发丝线，仅颜色提亮区分（省界 dim 0.4 透明度） */
.map-hero__outline {
  fill: none;
  stroke: #b9c9d6;
  stroke-width: 0.7;
  stroke-opacity: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.map-hero__highlight {
  fill: color-mix(in srgb, var(--cyan) 18%, transparent);
  stroke: none; /* 只填充，边界线保持省图层默认样式 */
}

/* 开发中项目所在省：黄色填充高亮（#c9a227 降饱和/亮度的琥珀黄，与在建 cyan 区分） */
.map-hero__highlight--survey {
  fill: color-mix(in srgb, #c9a227 16%, transparent);
  stroke: none;
}

/* 项目圆点：SVG 内定位（viewBox 坐标系），HTML 层只做交互热区 */
.map-hero__dot-svg {
  fill: var(--cyan);
  stroke: var(--bg);
  stroke-width: 2;
}

/* 开发中项目圆点（踏勘统计）：半径 4.7 ≈ 在建点 7 的 2/3（小 1/3），低饱和琥珀黄，
   无脉冲环——次级信息与在建项目拉开层级 */
.map-hero__dot-svg--survey {
  fill: #c9a227;
  stroke-width: 1.4;
}

/* 省级名称标签：font-size 仅为 JS 未运行时的兜底（viewBox 单位会随图幅缩放）；
   实际渲染字号由 map-hero.js 按字号谱恒定设置——正文小字 0.78rem≈12.5px /
   小块省取徽章与读数档 0.68rem≈11px，图幅 <600px 宽按比例收缩（下限 8px） */
.map-hero__label {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  fill: var(--text-dim);
  opacity: 0.66;
  pointer-events: none;
  user-select: none;
}

.map-hero__label--small {
  font-size: 9px;
  opacity: 0.5;
}

/* 项目所在省：cyan 高亮（与地图高亮同语言） */
.map-hero__label--hl {
  fill: var(--cyan);
  opacity: 1;
}

.map-hero__marker {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 1;
  /* 命中判定由容器 pointermove 代理（最近点中分），marker 不截指针——根治相邻点遮挡 */
  pointer-events: none;
}

/* 开发中项目 marker：9.4px ≈ 在建点 14px 的 2/3（与 SVG 圆点同步小 1/3） */
.map-hero__marker--survey {
  width: 9.4px;
  height: 9.4px;
}

/* 开发中项目无脉冲环 */
.map-hero__marker--survey .map-hero__dot::after {
  content: none;
}

/* 开发中项目悬停/激活描边随点色（琥珀黄），不用 cyan */
.map-hero__marker--survey.is-active .map-hero__dot,
.map-hero__marker--survey .map-hero__dot:hover,
.map-hero__marker--survey .map-hero__dot:focus-visible {
  outline-color: #c9a227;
}

.map-hero__dot {
  display: block;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.map-hero__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  animation: dot-pulse 2.4s var(--ease-out-expo) infinite;
}

.map-hero__marker.is-active .map-hero__dot,
.map-hero__dot:hover,
.map-hero__dot:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

@keyframes dot-pulse {
  to {
    opacity: 0;
    transform: scale(2.6);
  }
}

/* 开发中项目简卡：仅项目名称——收窄宽度、去掉 cyan 顶条（改用琥珀黄），内边距收紧 */
.map-card--survey {
  width: auto;
  max-width: 264px;
  padding: 0.55rem 0.8rem;
  border-top-color: #c9a227;
}

.map-card--survey .map-card__name {
  margin: 0;
  font-size: 0.82rem;
}

/* 图例：地图范围外右上角（图幅右侧约 20% 为投影适配留白带，无省份占位）；
   不截指针（pointer-events:none），悬停命中不受影响 */
.map-hero__legend {
  position: absolute;
  top: clamp(0.4rem, 1.5vw, 1rem);
  right: clamp(0.4rem, 1.5vw, 1rem);
  z-index: 1;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-panel);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  pointer-events: none;
  user-select: none;
}

.map-hero__legend-title {
  margin: 0 0 0.28rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}

.map-hero__legend-row {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0.18rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text);
  white-space: nowrap;
}

.map-hero__legend-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.map-hero__legend-dot--build {
  background: var(--cyan);
}

.map-hero__legend-dot--dev {
  background: #c9a227;
}

/* 信息卡：悬停/键盘聚焦展开（无点击固定，移开即收起）；默认悬于圆点上方 */
.map-card {
  position: absolute;
  left: 50%;
  bottom: 28px;
  translate: -50% 0;
  width: 264px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--panel-border);
  border-top: 2px solid var(--cyan);
  border-radius: var(--radius-panel);
  background: var(--panel);
  box-shadow: 0 12px 32px oklch(0% 0 0 / 50%);
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-out-expo),
    visibility var(--duration-normal);
}

.map-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -0.1rem 0 0.55rem;
}

.map-card__badge {
  padding: 1px 9px;
  border: 1px solid var(--cyan);
  border-radius: var(--radius-pill);
  background: var(--cyan-soft);
  color: var(--cyan);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

/* 贴近顶边：卡片翻到圆点下方 */
.map-card--below {
  bottom: auto;
  top: 28px;
  transform: translateY(-6px);
}

/* 贴近左/右边：卡片水平翻入地图 */
.map-card--left {
  left: 0;
  translate: 0 0;
}

.map-card--right {
  left: auto;
  right: 0;
  translate: 0 0;
}

.map-hero__marker.is-active .map-card,
.map-hero__marker:hover .map-card,
.map-hero__marker:focus-within .map-card {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto; /* 卡片可见时恢复指针（缩略图可点） */
}

.map-card__name {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  overflow-wrap: anywhere; /* 长项目名在 264px 卡内折行，防溢出卡片（2026-08-24） */
}

.map-card__fields {
  margin: 0 0 0.6rem;
  display: grid;
  gap: 0.3rem;
}

.map-card__row {
  display: flex;
  gap: 0.6rem;
  font-size: 0.76rem;
}

.map-card__label {
  flex: none;
  width: 6.2em;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.map-card__value {
  margin: 0;
  letter-spacing: 0.04em;
}

.map-card__empty {
  margin: 0 0 0.6rem;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.map-card__thumbs {
  display: flex;
  gap: 0.5rem;
  border-top: 1px solid var(--panel-border);
  padding-top: 0.6rem;
}

.map-card__thumbs-empty {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

/* 缩略图按钮：点击唤起 lightbox */
.map-card__thumb {
  width: 74px;
  height: 50px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-thumb);
  background: var(--thumb-bg);
  cursor: zoom-in;
  transition: border-color var(--duration-normal) var(--ease-out-expo);
}

.map-card__thumb:hover,
.map-card__thumb:focus-visible {
  border-color: var(--cyan);
  outline: 1px solid var(--cyan);
  outline-offset: 1px;
}

.map-card__thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-card__thumb.is-degraded {
  display: grid;
  place-items: center;
  cursor: default;
}

.map-card__thumb-fallback {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

/* 坐标读数（右上角「N 个项目已定位」）已按用户要求移除（2026-08-24） */

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ---------- 响应式（断点统一 768/1024） ---------- */

@media (max-width: 1024px) {
  .hero {
    padding-inline: 1.25rem;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 1rem 1rem 1.25rem;
  }

  .map-card {
    width: 220px;
  }
}