/* 手机端布局补强 · 必须排在 responsive.css 之后加载 */
/* 只写移动端覆盖，不动 extract.py 切出的原始文件 */

@media (max-width: 768px) {

  /* ---------- 导航 ---------- */
  /* print.html 没有汉堡按钮，它的链接用 .nav-mini 一行排开，不能跟着 responsive.css 整块藏掉 */
  .nav-inner { padding: 0 16px; }
  .nav-logo { font-size: 16px; gap: 6px; }
  .nav-logo svg { width: 20px; height: 20px; }
  .nav-links.nav-mini { display: flex; gap: 16px; flex-shrink: 0; }
  .nav-links.nav-mini a { padding: 14px 0; }
  .nav-links.open a { display: block; padding: 6px 0; }
  .nav-toggle { font-size: 14px; }

  /* ---------- Hero ---------- */
  /* .hero-content 和 .hero-stats 是同一个 flex 行里的两个兄弟，
     窄屏会被挤成左右两栏，标题只剩两百多像素宽，必须改成上下堆叠 */
  .hero { flex-direction: column; }
  .hero-content { max-width: 100%; }
  .hero-badge { margin-bottom: 20px; letter-spacing: 0; }
  .hero-sub { margin-bottom: 28px; }
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; width: 100%; margin-top: 40px; }
  .btn { padding: 13px 26px; }

  /* ---------- 页面左右留白：窄屏多挤出 16px 正文宽度 ---------- */
  .day-crumb, .plan-crumb { padding: 16px 16px 0; }
  .day-wrap, .plan-wrap { padding: 0 16px 48px; }
  .pr-wrap { padding: 16px; }
  .day-crumb a, .plan-crumb a { display: inline-block; padding: 11px 0; }
  .footer { padding: 40px 16px; }
  .footer a { display: inline-block; padding: 8px 0; }

  /* ---------- 单日页 ---------- */
  .day-hero h1 { font-size: 21px; line-height: 1.45; }
  .day-hero-route { font-size: 14px; }
  .day-why, .day-block, .day-ev { padding-left: 0; padding-right: 0; }
  .eat-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .stay-main { flex-direction: column; align-items: flex-start; gap: 6px; }
  .stay-pile { flex-wrap: wrap; }

  /* 展开链接原来只有 24px 高，手指点不准 */
  .day-more { padding: 11px 0; margin-top: 8px; }

  /* ---------- 建议面板 ---------- */
  .sug-panel { padding: 20px 16px; }
  .tag-pick { padding: 11px 16px; }
  .sug-actions { gap: 12px; }
  .sug-btn { flex: 1 1 100%; padding: 13px 20px; }
  .sug-export { padding: 11px 0; display: inline-block; margin-left: 0; }
  .sug-del { padding: 8px 4px; }
  .sug-meta { flex-wrap: wrap; row-gap: 4px; }

  /* ---------- 打印表 ---------- */
  /* margin-left:auto 在窄屏会把打印按钮挤出可视区，改成独占一行 */
  .pr-bar { gap: 8px; }
  .pr-tab { padding: 11px 18px; }
  .pr-print { margin-left: 0; flex: 1 1 100%; padding: 13px 20px; }
  .pr-head h1 { font-size: 22px; }

  /* ---------- 地图 ---------- */
  /* leaflet 自带 .leaflet-touch .leaflet-bar a 优先级更高，必须同级覆盖 */
  .leaflet-touch .leaflet-control-zoom a {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 22px;
  }

  /* ---------- 回到顶部 ---------- */
  .back-top { width: 46px; height: 46px; }

  /* ---------- 对比表 ---------- */
  /* 表比屏幕宽是必然的（横向对比就是要并排看），所以让首列吸住左边，
     横滑时始终看得见正在比哪一项 */
  .compare-wrap { position: relative; -webkit-overflow-scrolling: touch; }
  .compare-table { min-width: 760px; }
  .cmp-main { min-width: 700px; }
  /* 历史表是五列，收到 760 会挤成一堆折行，留宽一点让它自己横滑 */
  .cmp-legacy { min-width: 900px; }
  .legacy-title { font-size: 17px; }
  .compare-table th, .compare-table td { padding: 12px; }
  .compare-table th:first-child, .compare-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--c-bg-card);
    box-shadow: 1px 0 0 var(--c-border);
  }
  .compare-table thead th:first-child { background: var(--c-dark); }
  .compare-table tbody tr:hover td:first-child { background: var(--c-bg-warm); }
  /* 分组标题行是 colspan=4 的单格，跟着首列吸住会把整行钉在左边 */
  .compare-table tbody tr.cmp-group td:first-child {
    position: static;
    box-shadow: none;
  }
  .cmp-hint { display: block; }

  /* ---------- 首页其余区块 ---------- */
  .why-grid, .cut-list, .exp-grid, .tips-grid, .fw-grid { grid-template-columns: 1fr; }
  .route-overview { padding: 18px 16px; }
  .legacy-toggle { width: 100%; padding: 13px 18px; }
  .plan-link { padding: 8px 0; }
}

/* 320px 这类超窄屏，print.html 的一行导航会差 24px，把 logo 和间距再收一点 */
@media (max-width: 340px) {
  .nav-logo { font-size: 14px; }
  .nav-logo svg { width: 18px; height: 18px; }
  .nav-links.nav-mini { gap: 10px; }
}

/* 横滑提示只在手机上出现 */
.cmp-hint {
  display: none;
  font-size: 14px;
  color: var(--c-text-light);
  margin: 0 0 12px;
}