/* =============================================================================
 * mountain.css — 十万大山页（山峰攀登记录）样式
 * -----------------------------------------------------------------------------
 * 设计语言：完全对齐 travel.css（到此一游）的主题卡片风格
 *   · 全部以 .mountain-page 前缀限定作用域，不污染全站其它页面
 *   · 配色统一走 Butterfly 主题变量（--card-bg / --font-color / --tab-border-color
 *     / --default-bg-color / --radius-card），亮 / 暗 / 阅读 三种模式自动适配
 *   · 卡片质感（圆角 / 细描边 / 微阴影 / 悬停浮起）与全站 .card 一致
 *   · 内容容器 max-width:1140px，与 travel 同宽
 * ========================================================================== */

/* ── 0. 页面容器：居中、限定宽度，露出主题背景 ─────────────────────────────── */
.mountain-page {
  max-width: 1140px;
  margin: 0 auto;
  padding: 1rem 1.2rem 3rem;
}

/* ── 1. 区块标题（与 travel 卡片同款左色条） ─────────────────────────────── */
.mountain-section {
  margin-bottom: 2.4rem;
}

.mountain-h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 1.1rem;
  padding-left: 0.7rem;
  border-left: 4px solid var(--default-bg-color);
  color: var(--font-color);
}

.mountain-section .hint {
  margin: -0.4rem 0 1rem;
  font-size: 0.82rem;
  opacity: 0.6;
  line-height: 1.6;
}

/* ── 2. 概览统计卡 ─────────────────────────────────────────────────────── */
/* 注：auto-fit 在 N 列 item 时会让 1fr 被「按容器能容纳的轨道数」均分，
   桌面下右侧留白。3 张卡用固定列数 + 媒体查询更可控：
   ≥bp-md 3 列均分整行，bp-md 以下 2 列，bp-sm 以下单列。 */
.mountain-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.mountain-stat-card {
  background: var(--card-bg);
  border: 1px solid var(--tab-border-color);
  border-radius: var(--radius-card);
  padding: 1.3rem 1rem;
  text-align: center;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--font-color) 8%, transparent);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.mountain-stat-card:hover {
  box-shadow: 0 10px 26px color-mix(in srgb, var(--font-color) 16%, transparent);
  transform: translateY(-3px);
}

.mountain-stat-card .num {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--default-bg-color);
  font-variant-numeric: tabular-nums;
}

.mountain-stat-card .lbl {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ── 3. 攀登记录列表（数据表） ───────────────────────────────────────────── */
.mountain-table-wrap {
  background: var(--card-bg);
  border: 1px solid var(--tab-border-color);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--font-color) 8%, transparent);
  overflow: hidden;
}

.mountain-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  color: var(--font-color);
}

.mountain-table thead th {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--default-bg-color) 12%, var(--card-bg));
  color: var(--font-color);
  font-weight: 700;
  text-align: left;
  padding: 0.8rem 1rem;
  white-space: nowrap;
  border-bottom: 2px solid var(--tab-border-color);
}

.mountain-table tbody td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--tab-border-color);
  font-variant-numeric: tabular-nums;
}

.mountain-table tbody tr:last-child td {
  border-bottom: none;
}

.mountain-table tbody tr:hover {
  background: color-mix(in srgb, var(--default-bg-color) 7%, transparent);
}

.mountain-table .peak-name {
  font-weight: 700;
}

.mountain-table .region {
  opacity: 0.65;
  font-size: 0.85rem;
}

.mountain-table .dist {
  color: var(--default-bg-color);
  font-weight: 700;
}

.mountain-table .badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
  line-height: 1.4;
  border-radius: 999px;
  background: color-mix(in srgb, var(--default-bg-color) 18%, transparent);
  color: var(--default-bg-color);
  vertical-align: middle;
}

/* ── 4. 图表卡片 ──────────────────────────────────────────────────────── */
.mountain-chart-card {
  background: var(--card-bg);
  border: 1px solid var(--tab-border-color);
  border-radius: var(--radius-card);
  padding: 1.2rem 1.3rem 1.4rem;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--font-color) 8%, transparent);
}

.mountain-chart-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
  color: var(--font-color);
}

.mountain-chart-sub {
  font-size: 0.8rem;
  opacity: 0.6;
  margin: 0 0 0.9rem;
}

.mountain-chart-card svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: inherit;
}

/* 图表内 SVG 元素（由 mountain-charts.js 生成，统一走主题变量色） */
.mountain-page .mc-grid {
  stroke: color-mix(in srgb, var(--font-color) 12%, transparent);
  stroke-width: 1;
}
.mountain-page .mc-axis {
  stroke: color-mix(in srgb, var(--font-color) 24%, transparent);
  stroke-width: 1;
}
.mountain-page .mc-axis-text {
  fill: var(--font-color);
  opacity: 0.7;
  font-size: 0.92rem;
}
.mountain-page .mc-bar {
  fill: var(--default-bg-color);
  opacity: 0.82;
  transition: opacity 0.2s ease;
}
.mountain-page .mc-bar:hover {
  opacity: 1;
}
.mountain-page .mc-bar-label {
  fill: var(--font-color);
  font-size: 0.92rem;
  font-weight: 600;
}
.mountain-page .mc-name-label {
  fill: var(--font-color);
  font-size: 0.92rem;
  font-weight: 500;
}
.mountain-page .mc-line {
  fill: none;
  stroke: var(--default-bg-color);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.mountain-page .mc-area {
  fill: color-mix(in srgb, var(--default-bg-color) 22%, transparent);
  stroke: none;
}
.mountain-page .mc-dot {
  fill: var(--default-bg-color);
  stroke: var(--card-bg);
  stroke-width: 2;
}
.mountain-page .mc-dot-last {
  fill: var(--card-bg);
  stroke: var(--default-bg-color);
  stroke-width: 3;
}

/* ── 5. 响应式 ───────────────────────────────────────────────────────────── */
@media (max-width: var(--bp-md)) {
  .mountain-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: var(--bp-sm)) {
  .mountain-stats {
    grid-template-columns: 1fr;
  }
  .mountain-table thead {
    display: none;
  }
  .mountain-table,
  .mountain-table tbody,
  .mountain-table tr,
  .mountain-table td {
    display: block;
    width: 100%;
  }
  .mountain-table tbody td {
    border-bottom: none;
    padding: 0.3rem 1rem;
  }
  .mountain-table tbody tr {
    border-bottom: 1px solid var(--tab-border-color);
    padding: 0.6rem 0;
  }
}