/* ==========================================================================
   未登录首页 · 五套版式风格（需求 #2 追加项）

   「做五套风格首页（未登录的状态首页），管理员根据需要切换风格，
     包括排版也可以改变」

   ---------------------------------------------------------------------------
   为什么单独一个文件、而不是塞进 app.css：
     ① app.css 已经 6000+ 行，首页版式与后台表单样式混在一起，
        改一处要在一坨里找；
     ② 这个文件里**每一条规则都必须带 [data-home="…"]** —— 有这一条纪律，
        就能保证"换首页风格"永远不会误伤核验页 / 车辆查询页 / 数据看板
        （它们共用 .hero / .section 这些类）。放在 app.css 里迟早会有人
        顺手写一条裸的 .hero 规则，把其他对外页也改了。
     纪律由 includes/home_style.php 的 home_style_verify() 兜底：
     它会把 CSS 里的 key 与 PHP 字典比对，后台设置页直接显示差异。

   ---------------------------------------------------------------------------
   五套的骨架差异（不是换色，是换排版）：
     classic    左右分栏 · 数据 2 列 · 区块居中
     spotlight  单列居中 · 数据 5 列横排 · 首屏最高
     grid       紧凑信息带 · 数据 5 列 · 区块左对齐 + 留白压缩 + 4 列密集
     split      左栏速览（320px）+ 右栏大字 · 区块双列
     editorial  单列窄栏 · 大标题大留白 · 任务态势单列竖排

   注意几个必须一起改的默认值，漏掉就会出洋相：
     · .hero-stat:nth-child(odd) 有 border-right、:nth-child(even) 有 padding-left；
       改成 5 列横排后要把它们清掉，否则分隔线会错位。
     · .hero-stat:last-child:nth-child(odd) 有 grid-column: 1 / -1（原本是
       "奇数项时最后一项独占整行，不留半格空洞"）—— 5 项横排时它会
       把第 5 项顶到下一行，必须改回 auto。
   ========================================================================== */

/* --------------------------------------------------------------------------
   ① classic · 经典横幅（默认）
   左文右数，区块居中铺开。这里显式写出来（而不是"什么都不写"），
   是为了让 home_style_verify() 的"CSS 与 PHP 一一对应"检查有意义 ——
   classic 是唯一一个"默认值即最终效果"的风格，但它也必须有一条规则。
   -------------------------------------------------------------------------- */
.home-root[data-home="classic"] .hero-inner {
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
}
.home-root[data-home="classic"] .hero-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-root[data-home="classic"] .section-head { text-align: center; }

/* --------------------------------------------------------------------------
   ② spotlight · 聚焦大屏
   单列居中、首屏拔高，五项关键数据横排成一条 —— 进站第一眼就是"我们是谁"。
   -------------------------------------------------------------------------- */
.home-root[data-home="spotlight"] .hero-inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  max-width: 1040px;
  gap: 38px;
  padding: 92px 20px 70px;
}
.home-root[data-home="spotlight"] .hero h1 { font-size: 50px; }
.home-root[data-home="spotlight"] .hero-lead {
  max-width: 720px;
  margin: 0 auto 30px;
}
.home-root[data-home="spotlight"] .hero-actions { justify-content: center; }
.home-root[data-home="spotlight"] .hero-stats {
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.home-root[data-home="spotlight"] .hero-stat {
  padding: 20px 10px 18px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 0;
}
.home-root[data-home="spotlight"] .hero-stat:nth-child(odd),
.home-root[data-home="spotlight"] .hero-stat:nth-child(even) {
  padding-right: 10px;
  padding-left: 10px;
}
/* 5 项横排时，第 5 项既是奇数也是最后一项 —— 默认规则会把它顶到下一行 */
.home-root[data-home="spotlight"] .hero-stat:last-child {
  grid-column: auto;
  border-right: 0;
}
.home-root[data-home="spotlight"] .hero-stat .hs-val { font-size: 34px; }

/* --------------------------------------------------------------------------
   ③ grid · 数据网格
   首屏收紧成一条信息带；区块留白压缩、标题左对齐、指标四列密集。
   给"值班时盯数据"的场景用 —— 一屏能看到最多的东西。
   -------------------------------------------------------------------------- */
.home-root[data-home="grid"] .hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 26px;
  padding: 26px 20px 22px;
}
.home-root[data-home="grid"] .hero-eyebrow { margin-bottom: 8px; }
.home-root[data-home="grid"] .hero h1 { font-size: 29px; letter-spacing: -.6px; margin-bottom: 10px; }
.home-root[data-home="grid"] .hero-lead {
  font-size: 13.5px;
  line-height: 1.7;
  max-width: none;
  margin-bottom: 14px;
  /* 压成一行：内容仍在 DOM 里、搜索与读屏都拿得到，只是不再占三行高度 */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-root[data-home="grid"] .hero-actions .btn { padding: 10px 18px; font-size: 14px; }
.home-root[data-home="grid"] .hero-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.home-root[data-home="grid"] .hero-stat {
  padding: 12px 10px 12px 0;
  border-right: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 0;
}
.home-root[data-home="grid"] .hero-stat:nth-child(even) { padding-left: 14px; }
.home-root[data-home="grid"] .hero-stat:last-child {
  grid-column: auto;
  border-right: 0;
}
.home-root[data-home="grid"] .hero-stat .hs-val { font-size: 26px; letter-spacing: -.8px; }
.home-root[data-home="grid"] .hero-stat .hs-label { font-size: 12px; margin-top: 2px; }

.home-root[data-home="grid"] .section { padding: 30px 20px; }
.home-root[data-home="grid"] .section-head { text-align: left; margin-bottom: 18px; }
.home-root[data-home="grid"] .section-head h2 { font-size: 22px; }
.home-root[data-home="grid"] .section-head p { max-width: none; font-size: 13.5px; }
.home-root[data-home="grid"] .stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.home-root[data-home="grid"] #stats .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-root[data-home="grid"] .period-grid { gap: 12px; }

/* --------------------------------------------------------------------------
   ④ split · 左右分栏
   首屏 DOM 顺序仍是「正文在前、数据在后」，这里用 order 把数据栏挪到左边 ——
   宽屏值班机上"左边永远看得到队伍底数"，右边读正文。
   只动视觉顺序，DOM 顺序不变，读屏与键盘 Tab 的先后仍然合理。
   -------------------------------------------------------------------------- */
.home-root[data-home="split"] .hero-inner {
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 44px;
  padding: 54px 20px 60px;
  align-items: center;
}
.home-root[data-home="split"] .hero-inner > :first-child { order: 2; }
.home-root[data-home="split"] .hero-stats {
  order: 1;
  grid-template-columns: minmax(0, 1fr);
  border-top: 0;
}
.home-root[data-home="split"] .hero-stat {
  padding: 16px 0;
  border-right: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.home-root[data-home="split"] .hero-stat:nth-child(odd),
.home-root[data-home="split"] .hero-stat:nth-child(even) { padding-left: 0; padding-right: 0; }
.home-root[data-home="split"] .hero-stat:last-child {
  grid-column: auto;
  border-bottom: 0;
}
.home-root[data-home="split"] .hero-stat .hs-val { font-size: 30px; }
.home-root[data-home="split"] .hero h1 { font-size: 42px; }
.home-root[data-home="split"] .stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-root[data-home="split"] #stats .grid-2,
.home-root[data-home="split"] #ranking .grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   ⑤ editorial · 画报留白
   大标题、窄栏单列、区块之间大留白；任务态势从三列横排改单列竖排。
   给对外宣传页 / 投屏展示用 —— 一屏只讲一件事。
   -------------------------------------------------------------------------- */
.home-root[data-home="editorial"] .hero-inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  max-width: 920px;
  gap: 34px;
  padding: 112px 20px 100px;
}
.home-root[data-home="editorial"] .hero h1 {
  font-size: 56px;
  letter-spacing: -2px;
  line-height: 1.1;
}
.home-root[data-home="editorial"] .hero-lead {
  max-width: 620px;
  margin: 0 auto 30px;
  font-size: 17px;
}
.home-root[data-home="editorial"] .hero-actions { justify-content: center; }
.home-root[data-home="editorial"] .hero-stats {
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.home-root[data-home="editorial"] .hero-stat {
  padding: 22px 12px 20px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 0;
}
.home-root[data-home="editorial"] .hero-stat:nth-child(odd),
.home-root[data-home="editorial"] .hero-stat:nth-child(even) {
  padding-left: 12px;
  padding-right: 12px;
}
.home-root[data-home="editorial"] .hero-stat:last-child {
  grid-column: auto;
  border-right: 0;
}
.home-root[data-home="editorial"] .section {
  max-width: 960px;
  padding: 96px 20px;
}
.home-root[data-home="editorial"] .section-head { text-align: center; }
.home-root[data-home="editorial"] .section-head p { margin-left: auto; margin-right: auto; }
.home-root[data-home="editorial"] .period-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.home-root[data-home="editorial"] .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-root[data-home="editorial"] #stats .grid-2 { grid-template-columns: minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   窄屏兜底
   以上五套的"横排指标"在手机上都会挤成一团，统一回落成 2 列；
   split 的左右分栏也退回上下堆叠。
   （.home-root 的 data-home 值在窄屏不变，所以只用媒体查询补宽度即可。）
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .home-root[data-home="spotlight"] .hero-inner,
  .home-root[data-home="editorial"] .hero-inner {
    padding: 60px 20px 52px;
  }
  /* ---------------------------------------------------------------------
     需求 #78（手机版首页 banner 错位）
     ---------------------------------------------------------------------
     用户原话：「手机版首页 banner 区域错位……手机版打开内容太多，
                左右挤在一起了，优化排版设计」。

     根因是**选择器优先级**，不是断点没写：
       · app.css 里 `.hero-inner { grid-template-columns: 1fr }` 确实在
         900px 以下把首屏改成了单栏 —— 但它只有 (0,1,0)；
       · 本文件 classic 那一条 `[data-home="classic"] .hero-inner` 是
         (0,2,0)，且本文件在 app.css **之后**加载，
         于是"单栏"这条兜底被稳稳压住，首屏仍然是 1.15fr / .85fr 两栏。
     结果就是 2 栏 × 最窄 390px 屏：左边那句「让每一次出勤都能找到人、
     查得到证」被压成一条细柱，右边 5 个数据格挤在一起。

     所以这里把**每一套风格**都在窄屏显式回落成单栏 ——
     以后再加首页风格，只要忘了写这一条，就会重演同一个 bug，
     因此下面按"所有 data-home 值"一次列全，而不是只补 classic。
     （spotlight / editorial 本来就是单栏，写进来是无害的重复，
       但能让人一眼看出"这里必须全列"。） */
  .home-root[data-home] .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    justify-items: stretch;
  }
  /* 单栏后 `> :first-child` 的 order 要把文案排回上面 */
  .home-root[data-home="split"] .hero-inner > :first-child { order: 1; }
  .home-root[data-home="split"] .hero-stats { order: 2; }
  .home-root[data-home="spotlight"] .hero h1 { font-size: 36px; }
  .home-root[data-home="editorial"] .hero h1 { font-size: 38px; letter-spacing: -1.2px; }
  .home-root[data-home="split"] .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .home-root[data-home="grid"] .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-root[data-home="grid"] .hero-lead { -webkit-line-clamp: 3; }
  .home-root[data-home="grid"] .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  /* ★ 需求 #2 补充（手机版首页 #stats / #ranking 错位）
     ─────────────────────────────────────────────────────────────
     上面 138 / 175 行把 `#stats .grid-2`、`#ranking .grid-2` 写成了
     `repeat(2, minmax(0,1fr))`，出发点是对的：**横排指标**在手机上回落成
     2 列。但 #stats / #ranking 里装的不是紧凑指标，而是**带标签 + 数值 +
     进度条的列表卡**。实测（390 视口）：
       .grid-2        → 350px 宽、两列各 **167px**
       「在岗」标签    → 竖成 3 行
       数值「36 人 · 72%」→ 折成 2 行
       进度条           → 被压到几乎看不见
       两张卡           → 335px / 506px 高度参差
     所以窄屏把这两处回落成单列。真正的「横排指标」在 `.hero-stats` 里，
     它由下面那条 `repeat(2, minmax(0,1fr))` 管着，不受本规则影响。 */
  .home-root[data-home] #stats .grid-2,
  .home-root[data-home] #ranking .grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 窄屏统一 2 列：5 项数据在 390px 上排 2 列（最后一项独占整行），
     比起 5 项横排要横着划、或单列拉出一屏高，这个更好用。 */
  .home-root[data-home] .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 2 列布局下要恢复"奇数项最后一项独占整行"，否则右下角留半格空洞 */
  .home-root[data-home] .hero-stat:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, .16);
  }
  .home-root[data-home] .hero-stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: 0;
  }
  /* 间距与字号再收一档：390px 宽时每一项约 170px，
     40px 的数字 + 左右各 18px 内边距会把它顶到换行。 */
  .home-root[data-home] .hero-stat { padding: 14px 14px 16px 0; }
  .home-root[data-home] .hero-stat:nth-child(odd) { padding-right: 14px; }
  .home-root[data-home] .hero-stat:nth-child(even) { padding-left: 14px; }
  .home-root[data-home] .hero-stat .hs-val { font-size: 26px; letter-spacing: -.8px; }
  .home-root[data-home] .hero-stat .hs-label { font-size: 11.5px; }
  .home-root[data-home="editorial"] .section { padding: 64px 20px; }
}