@charset "UTF-8";
/*!
 * 线路通 · home.css
 *
 * 只给首页：hero、首屏统计、快捷入口。
 *
 * 拆分依据：19 类页面 × 2 个视口实测的 CSS coverage。
 * 本文件是拆分的产物，之后直接在这里改样式；重新跑 .tools/css-split.mjs 会覆盖它。
 */



/* ---------- hero ---------- */
.hero {
  position: relative;
  background: #fff;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}


.hero-inner {
  /*
   * 横向 20px 必须写：这个元素同时挂着 .container，而下面这条 padding 会整个
   * 覆盖 .container 的 `padding: 0 20px`。写成 `52px 0 76px` 的话
   * 桌面端标题比别的内容左移 20px，手机端直接贴屏幕边缘（实测 h1Left = 0）。
   */
  padding: 52px 20px 76px;
  position: relative;
  z-index: 2;
}


.hero h1 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 16em;
}


.hero-sub {
  margin-top: 14px;
  max-width: 620px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
}


.hero-art {
  position: absolute;
  right: -40px;
  top: 30px;
  width: 520px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}


.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 40px;
  margin-top: 26px;
}


.hero-stat strong {
  display: block;
  font-size: 22px;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.2;
}


.hero-stat span {
  font-size: 12px;
  /* 原来是 --muted-2（白底 3.10:1）——那是只许给分隔线和图标的色，
     这四个标签是承载信息的文字，必须用 --muted-3（4.97:1） */
  color: var(--muted-3);
}


/* ---------- search ---------- */
.search-wrap {
  position: relative;
  z-index: 3;
  margin-top: -40px;
}


/* ---------- sections ---------- */
.section {
  padding: 46px 0;
}


.mode-icon {
  width: 34px;
  height: 34px;
  color: var(--navy);
}


/* chip 行前面的说明文字（"设施较多的城市"这类） */
.chip-row .chip-label {
  align-self: center;
  font-size: 12.5px;
  color: var(--muted-3);
  margin-right: 2px;
}


.hero h1 {
  animation: hero-rise 0.62s var(--ease-out) both;
}


.hero-sub {
  animation: hero-rise 0.62s var(--ease-out) 0.08s both;
}


.hero-stats {
  animation: hero-rise 0.62s var(--ease-out) 0.16s both;
}


.hero-art path {
  animation: dash-drift 4.5s linear infinite;
}


.hero-art circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pop 0.46s var(--ease-out) both;
}


.hero-art circle:nth-of-type(1) {
  animation-delay: 0.34s;
}


.hero-art circle:nth-of-type(2) {
  animation-delay: 0.46s;
}


.hero-art circle:nth-of-type(3) {
  animation-delay: 0.54s;
}


.hero-art circle:nth-of-type(4) {
  animation-delay: 0.6s;
}


.hero-art circle:nth-of-type(5) {
  animation-delay: 0.66s;
}


.hero-art circle:nth-of-type(6) {
  animation-delay: 0.72s;
}


.hero-art rect,
.hero-art text {
  animation: hero-rise 0.5s var(--ease-out) 0.78s both;
}


.mode-icon {
  transition:
    color var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out);
}


/* ---------- 手机端：横向滑动卡片条 ----------
   12 张线路卡竖排要滚 1000 多像素，改成吸附式横滑，露出半张卡提示可以滑。 */
@media (max-width: 720px) {
  .grid-snap {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    gap: 10px;
    margin: 0 -16px;
    padding: 2px 16px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* 有 padding 的吸附容器必须配 scroll-padding，否则第一张卡会被自动滚掉 16px */
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .grid-snap::-webkit-scrollbar {
    display: none;
  }

  .grid-snap > * {
    scroll-snap-align: start;
  }

  .grid-snap .route-card {
    height: 100%;
  }
}


/* ---------- 细节：首屏一层极淡的冷色光，避免大白块太素 ---------- */
.hero {
  background:
    radial-gradient(880px 340px at 88% -12%, #eef4fb 0%, rgba(238, 244, 251, 0) 62%),
    radial-gradient(520px 280px at 12% 110%, #f7f4ef 0%, rgba(247, 244, 239, 0) 60%),
    #fff;
}


/* ---------- 首页数据条（§4.4） ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}


.stat-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}


.stat-item strong {
  display: block;
  font-size: 18px;
  font-weight: 650;
  color: var(--navy);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}


.stat-item span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted-3);
}


/* ---------- 首页类型网格（§4.5 / §4.6） ---------- */
.type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}


/* 提交卡与类型卡同高同列，尺寸规则写在一起，断点只写一次 */
.type-card,
.submit-card {
  display: flex;
  flex-direction: column;
  min-height: 104px;
  padding: 13px 14px;
  border-radius: var(--radius);
}


.type-card {
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}


.type-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}


.type-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--navy);
  transition: color 0.16s ease;
}


.type-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}


.type-arrow {
  width: 12px;
  height: 12px;
  margin-left: auto;
  flex: none;
  color: var(--navy-mute);
  transition: transform 0.16s ease;
}


/* 固定两行：描述只有一行或没有描述时，靠 min-height 撑住整行高度 */
.type-desc {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.type-count {
  margin-top: auto;
  padding-top: 8px;
  font-size: 11.5px;
  color: var(--muted-3);
}


.type-count strong {
  font-size: 13px;
  font-weight: 650;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}


/* 第 8 格：虚线边 + 浅蓝底，本站唯一的「可补充 / 空缺」语义 */
.submit-card {
  background: #fbfcfe;
  border: 1px dashed var(--navy-line);
  color: var(--ink-2);
  transition: border-color 0.16s ease, background 0.16s ease;
}


.submit-card .type-icon,
.submit-card .type-name {
  color: var(--blue);
}


/* 设施较多的城市：数量弱化内联，不再用「·」分隔 */
.chip-row .chip-city {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 9px;
}


.chip-row .chip-city em {
  margin-left: 0;
  opacity: 1;
  font-style: normal;
  font-size: 11px;
  color: var(--muted-3);
  font-variant-numeric: tabular-nums;
}


/* ---------- 第九轮断点 ---------- */
@media (max-width: 1080px) {
  .stat-item {
    padding: 10px 12px;
  }

  .stat-item strong {
    font-size: 17px;
  }

  .type-card,
  .submit-card {
    padding: 11px 12px;
  }

  .type-name {
    font-size: 13.5px;
  }

  .type-desc {
    font-size: 11.5px;
  }

  .city-card-head strong {
    font-size: 14px;
  }

  .city-card-head em {
    font-size: 11px;
  }
}


/* ============================================================
   第十二轮：首页折叠列表 + 模块间距
   起因：34 个省份 + 10 个工具全量摊开，手机上首页一半高度耗在这里；
   首页模块之间 46px+46px 的留白也偏松。
   ============================================================ */

/* ---------- 1. 收起状态：按断点遮住第 N 项之后 ---------- */
/*
 * 用 :nth-child 遮项，不用 max-height 裁高度。两个原因：
 * 一、卡片高度随断点/字号变（provinces 是 12px 内边距、tools 是 15px，tools 的 desc
 *    还可能折行），max-height 只能写死一个数，改天文案变长就切掉半行字；
 * 二、overflow: hidden 会把最后一行卡片的 hover 阴影削平，看着像被截断。
 *
 * 遮项是精确的：4 列就 4 的倍数，1 列就 1 的倍数，行永远是整行。
 * display: none 的元素仍在 DOM 里，链接照样能被抓取——这两个列表是站内链接主干。
 *
 * 前缀 html.js 是安全阀：没有 JS 时整条规则不匹配，列表保持全量展开；
 * 服务端虽然写了 is-collapsed，也不会藏掉任何东西。
 */

/* 省份：4 列 × 3 行 = 12 */
html.js .home-provinces.is-collapsed > :nth-child(n+13) {
  display: none;
}


/* 工具：3 列 × 2 行 = 6 */
html.js .home-tools.is-collapsed > :nth-child(n+7) {
  display: none;
}


/*
 * 手机上 .grid-4 / .grid-3 都会变成 1 列（720 断点里的通用规则）。
 * 34 个省份一列排 34 行是首页最大的那块高度，这里单独改成 2 列：
 * 卡里就一个 2–4 字的省名加「N 个城市」，180px 宽完全够，没必要占满一整行。
 */
@media (max-width: 720px) {
  .home .home-provinces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* 2 列 × 3 行 = 6 */
@media (max-width: 900px) {
  html.js .home-provinces.is-collapsed > :nth-child(n+7) {
    display: none;
  }

  /* 工具 2 列 × 2 行 = 4 */
  html.js .home-tools.is-collapsed > :nth-child(n+5) {
    display: none;
  }
}


/*
 * 1 列时按行算就太抠了：省份还能 2 列排 6 个，工具是整行卡片，
 * 留 2 行等于只给 2 个工具，用户基本一定要点开。这里给 3 行。
 */
@media (max-width: 720px) {
  html.js .home-tools.is-collapsed > :nth-child(n+4) {
    display: none;
  }
}


/* ---------- 2. 展开 / 收起按钮 ---------- */
.collapse-foot {
  display: flex;
  justify-content: center;
  margin: 16px 0 0;
}


.collapse-toggle {
  /* 没有 JS 时这个按钮什么也做不了，索性不长出来 */
  display: none;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color var(--t-fast) ease,
    background-color var(--t-fast) ease,
    color var(--t-fast) ease;
}


html.js .collapse-toggle {
  display: inline-flex;
}


.collapse-toggle svg {
  width: 12px;
  height: 12px;
  margin-top: 1px;
  transition: transform var(--t-base) var(--ease-out);
}


/* 文案与箭头都跟着 aria-expanded 走，不另存一个状态 */
.collapse-toggle .when-open {
  display: none;
}


/* ---------- 3. 首页模块间距收一档 ---------- */
/*
 * 只管首页（body.home），不动全站 .section——
 * 内页模块少、上下留白撑得住，首页模块多，46px 一叠就成了「一段空白一段内容」。
 */
.home .section {
  padding: 32px 0;
}


.home .section-head {
  margin-bottom: 16px;
}


@media (max-width: 720px) {
  .home .section {
    padding: 26px 0;
  }
}


/* ============================================================
   第十三轮：首页 hero 手机端排版
   起因：412px 下 h1 + 4 行说明 + 4 个统计挤成一整块，
   360px 时第 4 个统计（136,530 城市线路组合）还被挤到第二行独自站着。
   ============================================================ */

@media (max-width: 720px) {
  .hero-inner {
    /* 底部 62 减掉 .search-wrap 的 -40，留给搜索卡 22px；再大就把首屏推下去了。
       横向 16px 与同一断点里 .container 的 0 16px 对齐，否则正文贴边。 */
    padding: 26px 16px 58px;
  }

  .hero h1 {
    font-size: 25px;
    line-height: 1.32;
    letter-spacing: -0.01em;
    max-width: none;
  }

  .hero-sub {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.72;
    /* 中文窄栏里避免最后一行只剩两三个字 */
    text-wrap: pretty;
  }

  /*
   * 四个统计从「一行 flex + 40px 间距」改成 2×2 网格。
   * 一行放不下是必然的：四项自然宽度 60+48+61+88=257，
   * 加三个 40px 间距就 377，380 的可用宽度只差一点点——
   * 于是 412 勉强挤成一排（字贴字），360 直接把第四项挤到下一行。
   * 网格里每格等宽，136,530 这种长数字不会再去挤别人。
   */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 20px;
    border-top: 1px solid var(--line);
  }

  .hero-stat {
    padding-top: 12px;
  }

  /* 第二行补一条浅根线，四个格子才像一张表；不画竖线，靠左右内边距分栏 */
  .hero-stat:nth-child(n + 3) {
    margin-top: 12px;
    border-top: 1px solid var(--line-soft);
  }

  .hero-stat:nth-child(2n) {
    padding-left: 18px;
  }

  .hero-stat:nth-child(2n + 1) {
    padding-right: 18px;
  }

  .hero-stat strong {
    font-size: 24px;
  }

  .hero-stat span {
    display: block;
    margin-top: 1px;
    font-size: 12.5px;
  }
}