/**
 * 里程查询电脑版 · 页面样式
 *
 * 老版本的样式全部写在 <style> 里，只有四条规则，其中 #map-container{height:500px}
 * 是写死的——在手机上占掉一整屏还多。这份样式表把固定高度换成按视口收缩，
 * 三级下拉在窄屏上也能正常换行。
 *
 * 站是给电脑端做的，但百度统计里移动端占比通常不低，而一个「在手机上没法用」
 * 的页面会被搜索引擎按移动端体验降权。做到能用即可，不追求移动端优先。
 */

body {
  /* 老版本没设字体，Windows 上会落到宋体 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

.container { max-width: 1100px; }

/* ---------- 查询表单 ---------- */

/* 三个下拉挤在一行时给最小宽度，窄屏自动换行而不是压成一条缝 */
.picker-row > select {
  flex: 1 1 30%;
  min-width: 96px;
  margin-right: 4px;
  margin-bottom: 4px;
}
.picker-row > select:last-child { margin-right: 0; }

.cost-input { width: 92px; }

/* ---------- 概览区 ---------- */

.summary-row .summary-value {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
}
.summary-row .summary-value .unit {
  font-size: .8rem;
  font-weight: 400;
  margin-left: 2px;
  color: #6c757d;
}
.summary-row .summary-label {
  font-size: .8rem;
  color: #6c757d;
  margin-top: 2px;
}

.estimate-note { font-size: .8rem; line-height: 1.7; }

.share-box {
  border-top: 1px solid #eee;
  padding-top: .75rem;
  margin-top: .25rem;
}

/* ---------- 路线详情和地图 ---------- */

#map-container {
  /* 跟着视口收缩，不再是写死的 500px */
  height: 60vh;
  min-height: 300px;
  max-height: 560px;
  width: 100%;
  border: 1px solid #e3e6ea;
  border-radius: .25rem;
  background: #f1f3f5;
}

.route-panel {
  height: 60vh;
  min-height: 240px;
  max-height: 560px;
  overflow-y: auto;
  font-size: .82rem;
  border: 1px solid #e3e6ea;
  border-radius: .25rem;
  padding: .5rem;
  background: #fff;
}

/* 百度地图渲染进 panel 的内容自带一堆内联样式，压一下免得撑破容器 */
.route-panel img { max-width: 100%; }
.route-panel table { width: 100% !important; }

/* ---------- 热门线路 ---------- */

.hot-routes a {
  display: block;
  padding: .35rem .25rem;
  font-size: .875rem;
  color: #0056b3;
}
.hot-routes a:hover { text-decoration: underline; }

/* ---------- 正文 ---------- */

.article h2 {
  margin-top: 1.25rem;
  font-weight: 600;
}
.article h2:first-child { margin-top: 0; }
.article p {
  font-size: .9rem;
  line-height: 1.85;
  color: #495057;
  margin-bottom: 0;
}

/* ---------- 广告位 ---------- */

/*
 * 容器本身不占位。广告没接或者脚本被拦时，页面上不该留一块空白——空广告位
 * 既难看，也会被搜索引擎按「主要内容被挤走」计入体验评分。
 */
.ad-slot { min-height: 0; }
.ad-slot:empty { display: none !important; }

/* ---------- 窄屏 ---------- */

@media (max-width: 575.98px) {
  .summary-row .summary-value { font-size: 1.3rem; }
  #map-container, .route-panel { height: 46vh; min-height: 240px; }
  .cost-input { width: 80px; }
}