/* ============================================================
   首页（index.html）专属样式
   仅承载全局四层覆盖不到的独特布局：
     · 首屏 Logo 墙
     · 行业/场景入口弹性网格（最后一行居中）
     · 为什么选择我们 背景区隔
     · 资讯卡片日期与“阅读全文”
     · 资讯中心行头：小标题 + 「查看更多」同一排两端对齐
     · 区块底部“查看全部”引导链接（案例区仍在用）
   不定义任何 .panel--* 配色变体（已在 components.css 全局，规范 A）。
   ============================================================ */

/* ══════════ 首屏纵向节奏（2026-09-28 方案 A：组内收紧、组间拉开）══════════
   桌面实测原值：eyebrow→H1 24 ｜ H1→品类行 20 ｜ 品类行→按钮 32 ｜ 按钮→Logo 墙 34 ｜
                Logo 墙→核心数据 48。
   问题：五档全挤在 20~48，相邻档差仅 4~14px ⇒ 视觉上是一根**等距清单**，
        读不出首屏其实分三组（定位组 / 行动 / 信任组）；按钮像 H1 块的尾巴，
        Logo 墙自带的分割线也只被当成「按钮下面的一条线」。
   现改为两级节奏：**组内 20 / 20 ｜ 组间 52 / 58 / 68**（越往下越松，形成收束感）。

   ⚠️ **预算约束（改前必读）**：桌面 `.hero__in{min-height:660px}` + 内容垂直居中，
      是 `verify/hero.js` 断言的 §6.4 口径（全站 28 页统一）。实测首页内容实际高
      **452px**、容器内容盒 **516px** ⇒ **可用余量仅 64px**。
      本次净增 60px（−4 +20 +24 +20）⇒ 内容高 512px，**首屏仍为 660px**。
      再往上加就会撑高首屏，与其它 27 页产生高度差（切页跳动）。

   ⚠️ **为什么全部写在 pages/index.css 而不是 components.css**：`.hero h1` 与
      `.hero__cta` 的间距是**全站 28 个 hero 页共用**的，改组件会连带改动其它 27 页
      首屏节奏。本文件仅在 index.html 加载（构建时按页名注入，见 dist 中
      `pages/index.css` 排在 `components.css` 之后）。

   ⚠️ **`.hero .hero__cta` 必须写成两级**：全局是 `.hero__cta`(0,1,0)，且 components.css
      的 ≤860 块里还有一条全站 `.hero__cta{margin-top:var(--sp-6)}`(0,1,0) ——
      不提到 (0,2,0) 两处都压不过。移动端取值另见本文件 ≤860 块。 */
.hero h1{margin-top:var(--sp-5);}          /* eyebrow → H1：24 → 20（首页专属，全站只有首页首屏带 eyebrow） */
.hero .hero__cta{margin-top:52px;}         /* 品类行 → 按钮：32 → 52（"读"到"做"的转折点） */

/* 模块二：为什么选择我们 —— 与首屏/其他白底区隔 */
.home-why{background:var(--bg-soft);}

/* 模块一：首屏 Logo 墙（深蓝底上的客户名条）
   margin-top 决定「分割线距按钮多远」、padding-top 决定「分割线距第一行品牌名多远」——
   两者分工不同，不要合并看。58px 让这条 border-top 真正成为**信任区的上边界**
   （原 34px 只比 H1→品类行大 14px，线看着像贴在按钮下方）。
   ⚠️ 原值 34px 是全站唯一没走令牌的间距裸值；此处保留显式 px —— 52/58/68 是一组
      有梯度的节奏值，用令牌会表达不出「越往下越松」。 */
.logo-wall{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px 30px; margin-top:58px; padding-top:26px;
  border-top:1px solid var(--on-dark-line);
}
.logo-wall__t{
  font-size:13px; color:var(--on-dark-3);
  letter-spacing:.04em; margin-right:6px;
}
.logo-wall span{
  font-size:15px; font-weight:var(--fw-bold);
  color:rgba(255,255,255,.82);
  transition:color var(--dur-fast) var(--ease);
}
.logo-wall span:hover{color:#fff;}

/* 模块一：首屏三组核心数据（V1.3 由「信任背书」移入首屏；深蓝底上的浅色数字）
   68px（原 --sp-10 = 48）—— Logo 墙与它都是「横向平铺的一排小字」，只隔 48px 时
   会被当成一个连读块；拉开后视线才有停顿点：先读客户提名，再落到量化数据。 */
.hero-stats{margin:68px 0 0; width:100%; justify-content:space-between;}
.hero-stats .stats__n{color:#fff;}
.hero-stats .stats__n small{color:var(--c-gold);}
.hero-stats .stats__l{color:var(--on-dark-3);}
/* 紧凑居中：三组数据等宽、文字居中、竖线均匀（覆盖全局 .stats 的左对齐 content 定宽，
   避免「10年+ / 2000+场 / 1000+家」宽度差异导致竖线落点参差、右侧留白。仅作用于首屏。 */
.hero-stats .stats__i{flex:1; text-align:center;}

/* 模块三：服务概览 —— 价格锚点（V1.8 新增，2026-09-26）
   依据：《内容运营分册》§1.2 各页面内容策略「首页…服务概览底部须露出价格锚点」；
        《首页 · 页面规划大纲》V1.8 §四「在服务卡片下方单独一行，小字展示，不抢视觉焦点」。
   ⚠️ 2026-09-27：定义已**上移到 components.css**（4 个服务页的「服务模式」屏要复用同一元件），
      此处不再重复定义 —— 组件级样式只留全局一处，避免上次 .faq__q svg 那样「只有本页生效」的坑。 */

/* 模块三/四/五：入口弹性网格（默认 3 列；服务区用 --2col 变 2 列；最后一行居中）
   卡片改用 .panel 视觉（与 service-* 内页一致），并作为整卡链接。
   响应式（全站统一断点 860 / 520）：3 列 → ≤860 收 2 列 → ≤520 收 1 列 */
.home-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--sp-6);
}
.home-grid > .panel{
  /* 默认 3 列：flex-basis 必须设成 33.333%，仅设 max-width 会被 flex-wrap 按 240px 基准把 4 张排进一行 → 仍是 4 列（与 --2col 同源坑，参见 skill 07-pitfalls §26） */
  flex:1 1 calc(33.333% - 16px);
  max-width:calc(33.333% - 16px);
}
/* 模块三：服务概览 —— 2 列 × 2 行（共 4 张，V1.4）。
   同排两张卡强制等高（align-items:stretch，与行业/场景的 flex 网格一致，用户已认可该观感）：
   · 不用 grid-auto-rows:1fr（会把四张卡强制拉到「全局」最高一张的高度，内容少的卡中部大量留白 → 原始「竖长条」）；
   · 也不用 align-items:start（卡片按各自内容高度排布，平板宽度 520–860 下文字换行更多、同排两张高度差被放大，
     短的偏矮、底部参差，反而显得「竖长条 + 间隔空白」）。
   per-row stretch 仅让同排两张卡等高，高度差极小，紧凑自然。
   panel__go 取消 margin-top:auto，让「了解更多」紧跟正文，不沉底制造中部空白。 */
.home-grid--2col{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:stretch;
  gap:var(--sp-6);
}
/* 覆盖基类 .home-grid > .panel 的 max-width:33.333%（仅用于 3 列），否则在 2 列网格里每卡会被压窄留白 */
.home-grid--2col > .panel{max-width:none;}
/* 本网格内「了解更多」紧跟正文（不沉底），避免同排矮卡被拉伸后链接悬空、中部留白 */
.home-grid--2col .panel__go{margin-top:var(--sp-2);}
/* 模块四：行业解决方案 —— 卡片左对齐（末行不满也贴左，不居中） */
.home-grid--left{justify-content:flex-start;}
/* 响应式（全站统一断点 860 / 520）：≤860 收为 2 列（平板过渡），≤520 收为 1 列（手机）。
   关键：flex 网格收列必须同时改 flex-basis，只改 max-width 无效——
   因为 flex-basis 仍是 33.333%，三张卡求和正好 100% 不换行，max-width 仅起封顶作用。
   这里用 flex-basis（非 width）覆盖，可继承原 flex-grow:1 的填充行为，仅改变换行临界点。 */
@media (max-width:860px){
  /* 仅作用于 3 列弹性网格（flex 收 2 列）；2 列网格 .home-grid--2col 用 max-width:none，避免被此处覆盖 */
  .home-grid:not(.home-grid--2col) > .panel{flex-basis:calc(50% - 12px); max-width:calc(50% - 12px);}
}
@media (max-width:520px){
  .home-grid > .panel{flex-basis:100%; max-width:100%;}
  .home-grid--2col{grid-template-columns:1fr;}
}
/* 首页入口卡片：方案 B（拉伸链接）—— 真实 <a> 只包标题（纯净锚文本），::after 把点击区拉伸到整卡；整卡仍可点，SEO 锚文本更聚焦（2026-09-20） */
.home-grid > .panel{ position:relative; display:flex; flex-direction:column; }
.home-grid .panel__link{ color:inherit; text-decoration:none; transition:color var(--dur) var(--ease); }
.home-grid .panel__link::after{ content:""; position:absolute; inset:0; z-index:1; }
.home-grid .panel__link:hover{ color:var(--c-gold); }
.panel__go{
  display:inline-flex; align-items:center; gap:5px; margin-top:auto; padding-top:6px;
  font-size:14px; font-weight:var(--fw-bold); color:var(--ink-3);
  transition:all var(--dur-fast) var(--ease);
}
.home-grid > .panel:hover .panel__go{ color:var(--c-gold); gap:9px; }

/* 区块底部“查看全部”引导链接 */
.sect-note{text-align:center; margin-top:var(--sp-10);}
.link-more{
  display:inline-flex; align-items:center; gap:6px;
  font-size:15px; font-weight:var(--fw-bold); color:var(--c-navy);
  text-decoration:none;
}
.link-more:hover{color:var(--c-gold); gap:10px;}

/* 模块八：资讯卡片 */
.news{display:flex; flex-direction:column; position:relative;}
.news__date{
  font-size:13px; color:var(--ink-3); font-weight:var(--fw-bold);
  margin-bottom:10px;
}
.news h3{
  font-size:var(--fs-h4); font-weight:var(--fw-black);
  line-height:1.5; margin-bottom:10px;
}
.news__more{
  margin-top:auto; padding-top:14px;
  font-size:14px; font-weight:var(--fw-bold); color:var(--c-navy);
  transition:color var(--dur-fast) var(--ease);
}
.news:hover .news__more{color:var(--c-gold);}
/* 资讯卡同样采用方案 B：真实链接只包标题，::after 拉伸点击区到整卡 */
.news__link{ color:inherit; text-decoration:none; transition:color var(--dur) var(--ease); }
.news__link::after{ content:""; position:absolute; inset:0; z-index:1; }
.news__link:hover{ color:var(--c-gold); }

/* 模块八：资讯中心 —— 两排分组标签（行业资讯 / 服务指南） */
.news-row{margin-top:var(--sp-8);}
/* 行头：小标题与「查看更多」同一排、两端对齐（V1.7） */
.news-row__hd{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--sp-4); margin-bottom:var(--sp-4);
}
.news-row__hd .link-more{flex:none;}
.news-row__t{
  display:inline-block;
  font-size:15px; font-weight:var(--fw-black); color:var(--c-navy);
  padding-bottom:4px;
  border-bottom:2px solid var(--c-gold);
}
/* 两排各带「查看更多」链接时的间距 */
.sect-note .link-more + .link-more{margin-left:22px;}

/* 首屏（首页专属）：移动端收紧竖向节奏，避免首屏过长、各块贴太紧 */
/* 核心数据 hero-stats：手机与竖屏平板（≤768）由「3 列横排」改为「竖排居中块」，
   限宽 440px 居中，使其视觉宽度与主标题/副标题相称，不再抢满整行、比例失调；
   用细分隔线替代桌面端竖线，保持信息分组感（原仅 520 断点，521–860 仍是 3 列，已修正） */
/* 首屏纵向节奏 · ≤860（手机 / 竖屏平板）：桌面梯度同比收窄一档（2026-09-28 方案 A）
   32 / 40 / 48 三段都是显式 px（桌面同组值为 52 / 58 / 68）。
   ⚠️ `.hero .hero__cta` 必须提特异性 —— 压 components.css ≤860 块里那条全站的
      `.hero__cta{margin-top:var(--sp-6)}`(0,1,0)，写法与文件顶部注释同源。 */
@media (max-width:860px){
  .hero .hero__cta{margin-top:32px;}   /* 品类行 → 按钮：24 → 32 */
  .logo-wall{margin-top:40px;}         /* 按钮 → Logo 墙：28 → 40 */
  .hero-stats{margin-top:48px;}        /* Logo 墙 → 核心数据：28 → 48 */
}
@media (max-width:768px){
  .hero-stats{
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0;
    margin-top:48px;   /* 与 ≤860 段同值：避免 769↔768 跨断点时间距跳变 */
    max-width:440px; margin-left:auto; margin-right:auto;
  }
  .hero-stats .stats__i{
    width:100%; flex:none; padding:var(--sp-6) 0;
    border-left:0; border-top:1px solid var(--on-dark-line);
    text-align:center;
  }
  .hero-stats .stats__i:first-child{border-top:0; padding-top:0;}
  .hero-stats .stats__n{font-size:clamp(26px,7vw,30px);}
  .hero-stats .stats__l{margin-top:4px;}
}
/* ≤520：logo 墙与资讯「查看更多」进一步竖排/收紧；核心数据数字略缩、间距收一档 */
@media (max-width:520px){
  .logo-wall{margin-top:32px; padding-top:var(--sp-5);}   /* 比 ≤860 段（40）再收一档 */
  .hero-stats{margin-top:40px;}                            /* 比 ≤860 段（48）再收一档 */
  .hero-stats .stats__i{padding:var(--sp-5) 0;}
  .hero-stats .stats__n{font-size:26px;}
  /* 资讯中心底部两个「查看更多」链接：手机上由并排改为竖排居中，避免 320px 折行错位 */
  .sect-note .link-more{display:flex; width:fit-content; margin:0 auto;}
  .sect-note .link-more + .link-more{margin-left:0; margin-top:var(--sp-3);}
}