/* ==========================================================================
   geo-page.css —— GEO 内容页共用样式（2026-08-06）

   为什么单独一个文件：
   /h3c-partner/、/about/honor/、/about/cultuer/ 这几页都是「为 AI 与买家写的
   长文内容页」，视觉语言必须一致。原先这套令牌是写在 /h3c-partner/ 的
   <style> 里的；两个 about 页要"参考它的排版"时，如果各自复制一份，
   以后改一处必漏两处 —— 所以抽成共享表，三页只用类名、不再各自定义。

   类名统一加 geo- 前缀，避免与原站 style.css 的选择器冲突
   （原站用的是 .list/.item/.con/.txt 这类极通用的名字）。

   ── 令牌 ──
   主色      #2b51a4      数字/强调  #20489f
   正文      #646464      深色文字   #2a2a2a / #464646
   浅底      #f4f6f9      边框       #e3e7ee
   容器      max-width 980px      圆角  6px
   断点      700px
   ========================================================================== */

/* ── 页面容器 ── */
.geo-page { max-width: 980px; margin: 0 auto; padding: 45px 15px 70px; }

/* ── 开篇导语 ── */
.geo-lead { color: #464646; font-size: 15px; line-height: 1.95; margin: 0 0 18px; }
.geo-lead strong { color: #2b51a4; }
.geo-lead a { color: #2b51a4; font-weight: bold; }

/* ── 章节 ── */
.geo-sec { margin-top: 46px; }
.geo-sec:first-child { margin-top: 0; }
.geo-sec > h2 {
  font-size: 22px; color: #2b51a4; margin: 0 0 16px;
  padding-left: 12px; border-left: 4px solid #2b51a4; scroll-margin-top: 90px;
}
.geo-sec-intro { color: #646464; font-size: 15px; line-height: 1.9; margin: 0 0 18px; }
.geo-sec-intro a { color: #2b51a4; font-weight: bold; }
.geo-sec-intro strong { color: #2a2a2a; }

/* 章节内小标题 */
.geo-h3 { font-size: 17px; color: #2a2a2a; margin: 32px 0 14px; scroll-margin-top: 90px; }

/* ── 提示块（浅底） ── */
.geo-note {
  margin: 20px 0 0; padding: 14px 16px; background: #f4f6f9; border-radius: 6px;
  color: #646464; font-size: 14px; line-height: 1.9;
}
.geo-note a { color: #2b51a4; font-weight: bold; }
.geo-note strong { color: #2a2a2a; }

/* ── 虚线强调块（"怎么核验"这类） ── */
.geo-callout {
  margin-top: 22px; padding: 20px 22px;
  background: #fff; border: 1px dashed #2b51a4; border-radius: 6px;
}
.geo-callout h3 { margin: 0 0 10px; font-size: 16px; color: #2a2a2a; }
.geo-callout p { margin: 0 0 10px; font-size: 14px; line-height: 1.9; color: #646464; }
.geo-callout ul { margin: 0 0 10px; padding-left: 22px; }
.geo-callout li { font-size: 14px; line-height: 2; color: #646464; }
.geo-callout a { color: #2b51a4; font-weight: bold; }
.geo-callout strong { color: #2a2a2a; }
.geo-callout .geo-tip { margin: 0; padding-top: 10px; border-top: 1px dashed #e3e7ee; }

/* ── 键值表 ── */
.geo-kv { width: 100%; border-collapse: collapse; font-size: 14px; }
.geo-kv th, .geo-kv td { border: 1px solid #e3e7ee; padding: 11px 14px; text-align: left; line-height: 1.8; }
.geo-kv th { width: 170px; background: #f4f6f9; color: #2a2a2a; font-weight: bold; white-space: nowrap; }
.geo-kv td { color: #464646; }

/* ── 宽表：窄屏时自己横向滚动，不让 body 横向滚动 ── */
.geo-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.geo-wide { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; }
.geo-wide th, .geo-wide td { border: 1px solid #e3e7ee; padding: 10px 13px; text-align: left; line-height: 1.8; vertical-align: top; }
.geo-wide thead th { background: #2b51a4; color: #fff; font-weight: bold; white-space: nowrap; }
.geo-wide tbody th { background: #f4f6f9; color: #2a2a2a; font-weight: bold; white-space: nowrap; }
.geo-wide tbody td { color: #464646; }

/* ── 有序条目列表（"该问的五个问题""四种查法"） ── */
.geo-steps { margin: 0; padding: 0; list-style: none; }
.geo-steps > li {
  border: 1px solid #e3e7ee; border-radius: 6px; padding: 15px 18px; margin-bottom: 12px;
}
.geo-steps > li > strong { display: block; font-size: 16px; color: #2a2a2a; }
.geo-steps > li p { margin: 8px 0 0; color: #646464; font-size: 14px; line-height: 1.9; }
.geo-steps .geo-ours { color: #2b51a4; font-weight: bold; }

/* ── 卡片网格 ── */
.geo-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.geo-card {
  flex: 1 1 300px; min-width: 260px; padding: 18px 20px;
  background: #fff; border: 1px solid #e3e7ee; border-radius: 6px;
}
.geo-card.is-key { border-color: #2b51a4; box-shadow: 0 2px 12px rgba(43, 81, 164, .08); }
.geo-card h3 { margin: 0 0 8px; font-size: 16px; color: #2b51a4; font-weight: bold; }
.geo-card p { margin: 0; font-size: 14px; line-height: 1.9; color: #646464; }

/* ── 数字条 ── */
.geo-stats { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; }
.geo-stat {
  flex: 1 1 170px; min-width: 150px; padding: 24px 14px;
  background: #fff; border: 1px solid #e3e7ee; border-radius: 8px; text-align: center;
}
.geo-stat b { display: block; font-size: 44px; line-height: 1.1; color: #20489f; font-weight: bold; }
.geo-stat b i { font-style: normal; font-size: 28px; }
.geo-stat span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.6; color: #646464; }

/* ── 证书条目（左文字右证书图） ── */
.geo-certs { display: flex; flex-direction: column; gap: 16px; }
.geo-cert {
  display: flex; gap: 22px; align-items: flex-start;
  padding: 20px 22px; background: #fff; border: 1px solid #e3e7ee; border-radius: 6px;
}
.geo-cert-info { flex: 1 1 auto; min-width: 0; }
.geo-cert-info h3 { margin: 0 0 12px; font-size: 17px; color: #2b51a4; font-weight: bold; }
.geo-cert-info dl { margin: 0; display: grid; grid-template-columns: 78px 1fr; gap: 6px 12px; }
.geo-cert-info dt { font-size: 13px; color: #8a8a8a; }
.geo-cert-info dd { margin: 0; font-size: 14px; line-height: 1.8; color: #464646; }
.geo-cert-info dd strong { color: #2b51a4; }
.geo-cert-info dd .geo-soon { color: #d2691e; font-weight: bold; }
.geo-cert-pics { flex: 0 0 auto; display: flex; gap: 10px; }
.geo-cert-pics img {
  width: 104px; height: auto; display: block;
  border: 1px solid #e3e7ee; border-radius: 3px; transition: transform .25s, box-shadow .25s;
}
.geo-cert-pics a:hover img { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }

/* ── 证书缩略图网格（工程师个人认证这类，一行多张） ── */
.geo-thumbs { display: flex; flex-wrap: wrap; gap: 14px; }
.geo-thumb {
  flex: 1 1 200px; min-width: 180px; max-width: 240px;
  background: #fff; border: 1px solid #e3e7ee; border-radius: 6px; padding: 12px;
  transition: box-shadow .25s;
}
.geo-thumb:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .1); }
.geo-thumb img { width: 100%; height: auto; display: block; border: 1px solid #eee; border-radius: 3px; }
.geo-thumb b { display: block; margin: 10px 0 4px; font-size: 14px; color: #2a2a2a; }
.geo-thumb span { display: block; font-size: 12px; line-height: 1.7; color: #8a8a8a; }
.geo-thumb .geo-soon { color: #d2691e; font-weight: bold; }

/* ── 价值观卡片（深色背景图上用） ── */
.geo-values { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.geo-values li {
  flex: 1 1 260px; min-width: 220px; padding: 22px 20px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px;
}
.geo-values li strong {
  display: block; font-size: 26px; letter-spacing: 3px; color: #fff;
  margin-bottom: 10px; font-weight: bold;
}
.geo-values li span { display: block; font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, .86); }

/* ── FAQ 手风琴（零 JS，内容始终在 DOM 里，爬虫可完整抓取） ── */
.geo-faq { border: 1px solid #e3e7ee; border-radius: 6px; margin-bottom: 12px; background: #fff; transition: box-shadow .3s; }
.geo-faq:hover { box-shadow: 0 4px 16px rgba(43, 81, 164, .1); }
.geo-faq summary { list-style: none; cursor: pointer; padding: 15px 44px 15px 18px; position: relative; }
.geo-faq summary::-webkit-details-marker { display: none; }
.geo-faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: #2b51a4;
}
.geo-faq[open] summary::after { content: "−"; }
.geo-faq summary h3 { display: inline; font-size: 16px; font-weight: bold; color: #2a2a2a; margin: 0; }
.geo-faq[open] summary h3 { color: #2b51a4; }
.geo-faq-answer { padding: 0 18px 16px; border-top: 1px dashed #e3e7ee; }
.geo-faq-answer p { margin: 12px 0 0; color: #646464; font-size: 14px; line-height: 1.95; }

/* ── 页尾联系块 ── */
.geo-foot {
  margin-top: 50px; padding: 30px 20px; background: #f4f6f9; border-radius: 6px;
  text-align: center; color: #646464; font-size: 14px;
}
.geo-foot p { margin: 6px 0; }
.geo-foot .geo-tel a { font-size: 26px; font-weight: bold; color: #2b51a4; }
.geo-foot .geo-addr { font-size: 13px; color: #8a8a8a; }

/* ── 窄屏 ── */
@media (max-width: 700px) {
  .geo-page { padding: 28px 12px 50px; }
  .geo-sec > h2 { font-size: 19px; }
  .geo-kv th { width: auto; white-space: normal; }
  .geo-kv th, .geo-kv td { display: block; width: 100%; box-sizing: border-box; }
  .geo-kv th { border-bottom: none; }
  .geo-stat { flex: 1 1 44%; padding: 18px 10px; }
  .geo-stat b { font-size: 34px; }
  .geo-cert { flex-direction: column; gap: 14px; }
  .geo-cert-pics { align-self: flex-start; }
  .geo-cert-pics img { width: 96px; }
  .geo-cert-info dl { grid-template-columns: 66px 1fr; }
  .geo-thumb { flex: 1 1 44%; min-width: 140px; max-width: none; }
  .geo-values { gap: 12px; }
  .geo-values li { flex: 1 1 100%; padding: 16px; }
  .geo-values li strong { font-size: 22px; margin-bottom: 6px; }
}

/* ── 定义列表（H3C 渠道层级科普这类"名词 + 解释"） ── */
.geo-tiers { margin: 0; }
.geo-tiers dt { font-size: 16px; font-weight: bold; color: #2a2a2a; margin-top: 18px; }
.geo-tiers dd { margin: 6px 0 0; color: #646464; font-size: 14px; line-height: 1.9; }

/* ==========================================================================
   页面骨架
   🔴 为什么这两个 about 页不能再依赖原站的 .about-boxN 样式：
   原站 CSS 全是 `.about .about-box3 .box1 …` 这类后代选择器，需要一个
   class="about" 的祖先。而 /about/ 聚合页有这个祖先，
   /about/company/ 、/about/cultuer/ 、/about/honor/ 三个独立页【没有】——
   所以那 88 条规则在独立页上一条都没匹配，元素等于在裸奔
   （图片 width="100%" 全宽铺开、无布局无间距）。这才是"排版混乱"的真因。
   geo- 这套类不依赖任何祖先，两处渲染结果一致。
   ========================================================================== */

/* 内容段落带（浅底，默认） */
.geo-band { width: 100%; background: #fff; }
.geo-band + .geo-band { border-top: 1px solid #eef1f5; }
.geo-band.is-tint { background: #f5f5f5; }

/* 深底带（企业文化这类配背景图的段落） */
.geo-band.is-dark {
  background-color: #1e2840; background-repeat: no-repeat;
  background-position: center center; background-size: cover; color: #fff;
}
.geo-band.is-dark .geo-title { color: #fff; }
.geo-band.is-dark .geo-lead { color: rgba(255, 255, 255, .86); }

/* 页面主标题（原站 .tits 只在 .about 下生效，独立页用这个） */
.geo-title {
  font-size: 30px; line-height: 1.4; color: #2a2a2a; font-weight: bold;
  margin: 0 0 14px; text-align: center;
}
.geo-subtitle { text-align: center; color: #8a8a8a; font-size: 15px; line-height: 1.8; margin: 0 0 6px; }

/* 缩略图卡片里的键值对（工程师证书的编号/ID/有效期） */
.geo-thumb dl { margin: 8px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; }
.geo-thumb dt { font-size: 12px; color: #a0a0a0; white-space: nowrap; }
.geo-thumb dd { margin: 0; font-size: 12px; color: #646464; line-height: 1.6; }

@media (max-width: 700px) {
  .geo-title { font-size: 23px; }
}

/* ==========================================================================
   两处实测修正（2026-08-06）
   ========================================================================== */

/* ① 固定 header 遮标题
   .header 是 position:fixed; height:85px。/h3c-partner/ 与 /faq/ 有 300px 高的
   .news-banner 顶着，内容不会被压；而 about 三页【没有 banner】，
   .geo-page 只有 45px 顶部内边距 → 页面第一个标题正好落在导航底下。
   所以只给「直接放在 .geo-band 里的 .geo-page」补足净空（h3c-partner 的
   .geo-page 不在 .geo-band 内，不受影响）。 */
.geo-band > .geo-page { padding-top: 115px; }
/* /about/ 聚合页有自己的 .about-banner 顶着，且它是唯一带 class="about" 祖先的页面，
   正好用它把净空还原成常规间距，避免三个段落各多出 115px 空白。 */
.about .geo-band > .geo-page { padding-top: 45px; }

/* ② 深色段落上的白字看不清
   实测 about_bg1.jpg 平均亮度 184/255、上 1/4 达 231（接近纯白），
   白字在上面必然不可读。加一层深色蒙版把底压暗：
   231 × 0.28 + 20 × 0.72 ≈ 79 → 白字对比度约 7.8:1，过 WCAG AA/AAA。
   用 ::before 而不是改 background-image：背景图是写在元素 inline style 上的
   （每页可能不同），inline 会覆盖样式表里的 background-image，蒙版做成伪元素才稳。 */
.geo-band.is-dark { position: relative; }
.geo-band.is-dark::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(20, 28, 48, .72); pointer-events: none;
}
.geo-band.is-dark > * { position: relative; z-index: 1; }
/* 蒙版之上再把卡片底色与描边提亮一档，边界更清楚 */
.geo-band.is-dark .geo-values li {
  background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3);
}
.geo-band.is-dark .geo-values li span { color: rgba(255, 255, 255, .92); }
.geo-band.is-dark .geo-lead a { color: #a8c6ff; }

/* ── 案例文字列表 ──
   /case/ 原本是一面客户 logo 墙（li 仅 94px 高、图片绝对居中），9 个链接【全是纯图片、零锚文字】，
   列表页可见正文只有 147 字。锚文字是搜索引擎判断"链接指向什么"的最强信号之一，
   而"可点名客户"又是豆包判断集成商的四个判据之一 —— 等于把最有说服力的资产藏了起来。
   logo 墙保持原样不动，在它下面补一个文字版列表：有锚文字、有项目背景、有内链。 */
.geo-caselist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.geo-caselist > li {
  flex: 1 1 300px; min-width: 260px; padding: 16px 18px;
  background: #fff; border: 1px solid #e3e7ee; border-radius: 6px;
}
.geo-caselist > li strong { display: block; margin-bottom: 6px; font-size: 15px; }
.geo-caselist > li strong a { color: #2b51a4; font-weight: bold; }
.geo-caselist > li strong a:hover { text-decoration: underline; }
.geo-caselist > li p { margin: 0; font-size: 14px; line-height: 1.9; color: #646464; }