/* ============================================================
   station · 浅色底补丁层（2026-09-21）
   ⚠️ 只在 station/style.css 之后加载，覆盖其残留深色；不修改原样式表。
   覆盖对象：① hero 黑遮罩 ② hero 强制白字 ③ 照片横幅黑遮罩+反白字
   ============================================================ */

/* ① hero 照片层：降为极淡纹理，不再压暗页面 */
.hero-bg {
  opacity: .30;
  filter: grayscale(.28);
}
.hero-bg::after {
  background: linear-gradient(180deg, rgba(250,250,248,.80) 0%, rgba(250,250,248,.96) 100%) !important;
}

/* ② hero 内被强制成白色的文字 → 深字（否则白字压浅底＝消失） */
.hero-content .hero-eyebrow,
.hero-content .hero-title,
.hero-content .hero-sub,
.hero-content .hero-stat .label,
.hero-content .hero-stat .val {
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}
.hero-content p[style*="font-size:11px"] { color: rgba(0,0,0,.58) !important; }
.hero-content .hero-sub { opacity: 1; }
.hero-content .hero-stat .label { opacity: .72; }

/* ③ 照片横幅：黑遮罩 → 浅洗；反白字 → 深字 */
.section-img .overlay {
  background: linear-gradient(180deg, rgba(250,250,248,.06) 0%, rgba(250,250,248,.94) 100%) !important;
}
.section-img .overlay h3 { color: #1d1d1f !important; }
.section-img .overlay p  { color: rgba(0,0,0,.66) !important; }

/* ④ 卡片内图片横幅（同款黑遮罩） */
.card-img .overlay,
.feature-img .overlay {
  background: linear-gradient(180deg, rgba(250,250,248,.05) 30%, rgba(250,250,248,.95) 100%) !important;
}
.card-img .overlay h3, .feature-img .overlay h3 { color: #1d1d1f !important; }
.card-img .overlay p,  .feature-img .overlay p  { color: rgba(0,0,0,.66) !important; }

/* ⑤ 渐变标题：原用 --text-l(近白)起头，浅底下不可见 → 改深墨起头
   ⚠️ 必须同时重申 background-clip/text-fill-color：background 简写会重置 clip，
      只改 background 会让渐变变成一块实心矩形（2026-09-21 实测踩过）。 */
.hero-title--gradient {
  background: linear-gradient(135deg, #1d1d1f 0%, #0a5750 55%, #0855a3 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ⑥ 沙盘区：原灰渐变保留层次，但把过亮的白晕收掉 */
.section--sandtable {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.55) 0%, transparent 52%),
    radial-gradient(ellipse at 70% 80%, rgba(0,0,0,.06) 0%, transparent 52%),
    linear-gradient(180deg, #ece7dd 0%, #e4dfd4 40%, #dcd7cc 100%);
  color: var(--text-d);
}


/* ⑦ token 精调（2026-09-21）：原 style.css 的强调色为深底时代取值，
   浅底上小字对比度不足，此处统一压深；同选择器后加载即覆盖。 */
:root {
  --text-secondary: #5f5f66;
  --text-d: #1d1d1f;
  --text-m: #5f5f66;
  --text-l: #1d1d1f;
  --text-caption: #5f5f66;
  --teal: #0a5750;
  --blue: #0855a3;
  --green: #0b6326;
  --orange: #8a4f00;
  --red: #a01c15;
  --purple: #7b26c9;
}


/* ============================================================
   填充块文字对比补偿（2026-09-21 终版）
   原 style.css 用「亮青底 + 黑字」，浅色改造后强调色已压深，
   填充块上的文字必须改为白色才可读；同时去掉 hover 的亮色回弹。
   ============================================================ */
.btn--teal, .btn--teal:visited, .btn--teal:hover { color: #fff !important; }
.btn--teal:hover { background: var(--teal) !important; }
.btn--primary:hover { background: var(--blue) !important; }
.btn--green, .btn--green:hover, .btn--orange, .btn--orange:hover,
.btn--red, .btn--red:hover { color: #fff !important; }
.step-num, .filter-btn.active { color: #fff !important; }

/* ============================================================
   ⑨ 浏览器实测低对比收口（2026-09-21）
   依据 temp/locate_lc_out/lc.json —— 定点覆盖 style.css 的深底时代字色。
   ============================================================ */
.section--sandtable .section-eyebrow { color: #8a6d3f !important; }
.chart-box--map .map-label strong    { color: #8a6d3f !important; }
.chart-box--map .map-label span      { color: #5b6b7d !important; }
.map-frame .mf-coords                { color: rgba(0,0,0,.55) !important; }

/* ============================================================
   ⑩ hero 数字（原深底渐变文字，2026-09-21 实测修正）
   问题：.hero-stat .val 原为「渐变背景 + background-clip:text + 透明填充」，
        浅色层把 text-fill-color 改成不透明深墨后，渐变底仍被裁在文字内；
        其子元素 span「/天*」继承不到裁剪、且自带 --text-m 灰字，
        结果 = 深青渐变底 + 中灰字 → 实测 1.33:1 不可读。
   处置：彻底去掉 .val 的渐变背景（纯深墨字），span 单独给中灰 —— 干净且无隐患。
   ============================================================ */
.hero-content .hero-stat .val {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}
.hero-content .hero-stat .val span {
  color: #5f5f66 !important;
  -webkit-text-fill-color: #5f5f66 !important;
}


/* ============================================================
   ⑫ 桌面端横向滑动可用性修复（2026-09-21）
   问题（线上实测）：>768px 时 .swipe-hint 被 display:none；
        且 .swipe-wrapper 的滚动条被 scrollbar-width:none +
        ::-webkit-scrollbar{display:none} 一并隐藏；
        纯 CSS 实现下鼠标既拖不动、滚轮也不转横向
        → 桌面用户看到卡片被切断，却没有任何办法「左右滑动」。
   处置：① 桌面端恢复可见滚动条与「左右滑动」提示；
        ② 卡片由 70%~80% 百分比宽度改为定宽 320px，一屏可见 2–3 张；
        ③ 拖拽 / 滚轮 / 键盘交互由 shared.js 末尾补齐。
   ⚠️ 触摸端（≤768px）行为不变，仍是原生手势。
   ============================================================ */
@media (min-width: 769px) {
  .swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .swipe-hint::before { content: "←"; }
  .swipe-hint::after  { content: "→"; }
  .swipe-wrapper {
    scrollbar-width: thin;                                  /* Chrome 121+ / Firefox */
    scrollbar-color: rgba(0,0,0,.28) rgba(0,0,0,.06);
    padding-bottom: 20px;
  }
  .swipe-wrapper::-webkit-scrollbar { display: block; height: 8px; }  /* Safari 回退 */
  .swipe-wrapper::-webkit-scrollbar-track {
    background: rgba(0,0,0,.06);
    border-radius: 4px;
  }
  .swipe-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.28);
    border-radius: 4px;
  }
  .swipe-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.45); }
  .swipe-item,
  .swipe-item:nth-child(2n),
  .swipe-item:nth-child(3n) { flex: 0 0 320px; }
}

/* 拖拽态（由 shared.js 切换 class） */
.swipe-wrapper.is-draggable { cursor: grab; }
.swipe-wrapper.is-dragging  { cursor: grabbing; scroll-snap-type: none; }