/*!
 * 栏目页抬头图统一规范（page hero）
 * ------------------------------------------------------------------
 * 适用：产品系列 / 代理品牌 / 应用领域 / 技术中心 / 关于我们 / 联系我们
 * 首页与文章页不受影响。
 *
 * 设计原则：两种变体，同一套规格。
 *   A 型 page-hero--media  左文右图（关于我们）
 *   B 型 page-hero--text   纯文本 + 右上同心圆装饰（其余 5 页）
 * 两型共用：通栏、内边距、标题字号/行高、眉标、正文宽度、垂直节奏。
 *
 * 通栏做法见 --sbw：纵向滚动条宽度由 page-hero.js 写入，
 * 100vw 含滚动条，直接用会导致左右各被裁掉一半滚动条宽度。
 */

/* ============ 共用规格 ============ */
.page-hero{
  --ph-ink:#0a2c3e;
  --ph-ink-2:#0c5261;
  --ph-accent:#d5a85d;
  --ph-kicker:#acd3d6;
  --ph-gutter:120px;       /* 桌面内容左边界（1440 视口下与正文对齐） */
  --sbw:0px;

  position:relative;
  display:block;
  box-sizing:border-box;
  color:#d8ebe8;
  /* 通栏：占满可视宽度，负 margin 把两侧容器内边距抵掉 */
  width:calc(100vw - var(--sbw));
  margin-left:calc(50% - (100vw - var(--sbw))/2);
  margin-right:calc(50% - (100vw - var(--sbw))/2);
  overflow:hidden;
}

/* 内层容器：统一高度与内边距，两种变体都靠它对齐 */
.page-hero__in{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  max-width:1240px;
  margin:0 auto;
  padding:64px 20px 68px;
  min-height:300px;
  display:grid;
  align-items:center;
}

/* B 型：纯文本，单列 */
.page-hero--text .page-hero__in{grid-template-columns:1fr}

/* A 型：左文右图，两列。
   配图列刻意收窄（≈330px @1440）：太宽会让图片变成横条，
   既失去竖幅的稳定感，也贴到内容区右边缘显得「撞墙」。
   正文列拿 1fr 的剩余宽度，实测 631px 足够放下标题 2 行。
   右侧额外留 6% 内缩，让图片不顶到内容边界。 */
.page-hero--media .page-hero__in{
  grid-template-columns:minmax(0,1fr) minmax(260px,330px);
  gap:clamp(32px,4vw,64px);
  justify-content:space-between;
}
.page-hero--media .page-hero__media{
  justify-self:end;
  margin-right:2%;
}

/* ⚠️ 特异性说明（本文件的核心约束）
 * 本站 hero 常被包在 <div class="fm"> / <div class="rgp"> / <div class="af"> 里，
 * 而全站 custom_css（post ID 33 与 128）里有这些规则会命中 hero 内部的 p：
 *     .fm p                       { margin-bottom:18px }         ← 0-1-1
 *     .fm .fm-hero p, .rgp .rgp-hero p { line-height:1.9 }         ← 0-2-1
 *     .fm .fm-hero p, .rgp .rgp-hero p { line-height:1.85!important } ← 带 !important
 * 它们会改掉 kicker / desc 的行高与外边距，导致不同页 hero 高度对不齐。
 * 因此 hero 内部所有文字元素一律用 `.page-hero .page-hero__x`（0-2-0）
 * 提权，并用 !important 锁住行高与间距 —— 这里锁的是版式度量，不是配色。
 */

/* ---- 眉标 / kicker ----
 * 用固定 height + line-height：纯 ASCII 眉标（如 02 / APPLICATIONS）与
 * 中英混排眉标的字体度量不同，行盒会差 1px，逐块累积后让 hero 高度对不齐。 */
.page-hero .page-hero__kicker{
  display:block;
  margin:0 0 16px!important;
  padding:0;
  height:18px;
  color:var(--ph-kicker);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:18px!important;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 窄屏：眉标禁止截断。
 * 桌面端靠 nowrap + height:18px 锁死行盒以保证各页 hero 等高，但窄屏下
 * 长 ASCII 眉标（如 AUTHORIZED MATERIAL PARTNER）会超出容器被省略号吃掉，
 * 用户看不到完整信息。此处放开换行并按行数自适应高度。 */
@media (max-width:600px){
  .page-hero .page-hero__kicker{
    height:auto;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.5!important;
    overflow-wrap:anywhere;
    word-break:normal;
  }
}

/* ---- 主标题 ---- */
.page-hero .page-hero__title{
  margin:0 0 18px!important;
  color:#fff;
  font-size:clamp(34px,3.6vw,50px);
  font-weight:800;
  line-height:1.22;
  letter-spacing:-.01em;
  text-wrap:balance;
  /* 固定预留 2 行：单行标题也占 2 行高度，2 行标题正好用满。
     用 min-height 而非 height，文案超长时仍可自然撑高（不会被裁）。 */
  min-height:calc(2 * 1.22em);
}

/* ---- 说明文字 ---- */
.page-hero .page-hero__desc{
  margin:0!important;
  max-width:64em;
  color:#cfe4e3;
  font-size:15.5px;
  line-height:1.78!important;
  /* 固定 2 行槽位：1 行文案的页面同样占 2 行高度，6 页 hero 高度才一致 */
  min-height:calc(2 * 1.78em);
}

/* ---- 正文容器（A 型左侧） ----
 * 统一垂直节奏。hero 总高由「内容槽位」决定，与具体文案无关：
 *   眉标(18) + 间距(16) + 标题(固定2行) + 间距(18) + 说明(固定2行) + 附加块(65)
 */
.page-hero__body{min-width:0}

/* 附加块槽位：badge 与 facts 统一装进 __extra。
   没有附加内容的页面也保留一个空 __extra，保证 6 页 hero 底边完全对齐。
   高度基准 = badge(40) + 上间距(22) ≈ 62，取 65 留 3px 余量。
   ⚠️ 必须用 flex 而非 flow-root：badge 是 inline-flex，放在块级容器里会因
   line-box 的行高机制多撑出 ~22px，导致有 badge 的页面比其他页高出一截。 */
.page-hero__extra{
  min-height:65px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
}
/* 槽内元素的外边距一律自己说了算 —— .fm p / .rgp p 会把 margin-bottom 改成 18px，
   直接把槽位撑高（实测 badge 槽从 65 变 76）。 */
.page-hero__extra > .page-hero__badge{margin:22px 0 0!important}
.page-hero__extra > .page-hero__facts{margin:24px 0 0!important}

/* ---- A 型右侧配图 ----
 * 配图尺寸必须让「图 + 图注」总高 ≤ 左侧内容高度（294px），
 * 否则是配图在撑高 hero，A 型会比 B 型高出一截（实测曾高出 23px）。
 * 294 - 10(间距) - 19(图注) = 265
 *
 * 2026-11-12：配图从 482x530 竖幅（0.909）换成 660x495 横幅（4:3）。
 * 原来是「定高 max-height:265 + 宽自动」，横幅图套这套算法会撑到 265*1.33=353px 宽，
 * 超出 minmax(260px,330px) 的列宽上限并把文字列挤窄。
 * 改为「定宽 max-width:100% + 高自动」：
 *   330 宽 → 高 247.5；+10 间距 +19 图注 = 276.5 ≤ 294，不会撑高 hero。
 * max-height 保留 265 作为兜底，防止未来换成更方的图再次撑高。 */
.page-hero__media{
  margin:0;
  position:relative;
  z-index:1;
  align-self:center;
  width:100%;
  max-width:330px;
}
.page-hero__media img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:265px;
  object-fit:cover;
  border-radius:2px;
  /* 颗粒图在深色底上边缘偏亮，加一圈极淡描边收住 */
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
}
.page-hero__media figcaption{
  margin-top:10px;
  color:#9fbfbe;
  font-size:12px;
  line-height:1.6;
  letter-spacing:.01em;
}

/* ---- 底部行动区（可选） ---- */
.page-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

/* ---- 代理品牌徽标（应用领域 / 联系我们页使用） ----
 * flex:0 0 auto + align-self:flex-start 必须保留：__extra 是 column flex，
 * 默认 stretch / 可伸缩会让 badge 高度变成小数（实测 68.797px 而非 65px）。
 *
 * 配色分工（深色底上要「突出」，靠对比而不是靠花哨）：
 *   品牌名 DOMO / RadiciGroup  → 纯白 + 800 字重（最强）
 *   「与」                     → 半透明浅青 + 400 字重（最弱，仅做连接）
 *   金色竖线分隔               → --ph-accent
 *   「华南地区代理商」         → 金色 700（次强，点明身份）
 */
.page-hero .page-hero__badge{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  flex:0 0 auto;
  align-self:flex-start;
  margin:22px 0 0!important;
  padding:9px 16px 9px 14px;
  border:1px solid rgba(213,168,93,.55);
  border-left:3px solid var(--ph-accent);
  background:linear-gradient(90deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.05) 100%);
  color:#fff;
  font-size:13.5px;
  font-weight:700;
  line-height:1.5!important;
  letter-spacing:.01em;
}

/* 品牌名：纯白、加粗、轻微放宽字距，作为第一视觉落点 */
.page-hero .page-hero__badge-brand{
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
  font-style:normal;
  white-space:nowrap;
}

/* 连接词「与」：刻意压低，避免和品牌名抢注意力。
   用浅青 #acd3d6 而非半透明白 —— 半透明白叠在深青底上会发灰，
   与两侧纯白字对比生硬；浅青是本站已有的辅色，过渡更自然。 */
.page-hero .page-hero__badge-and{
  color:var(--ph-kicker);
  font-size:12px;
  font-weight:400;
  font-style:normal;
  letter-spacing:0;
  margin:0 -1px;
}

/* 身份说明：金色 + 前置金色竖线，与品牌名形成「白 / 金」两级对比 */
.page-hero .page-hero__badge-role{
  position:relative;
  margin-left:6px;
  padding-left:14px;
  color:var(--ph-accent);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}
.page-hero .page-hero__badge-role::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:15px;
  background:rgba(213,168,93,.6);
}

/* ---- 关键数据条（关于我们页使用） ---- */
.page-hero__facts{
  display:flex;
  flex-wrap:wrap;
  flex:0 0 auto;
  align-self:flex-start;
  gap:10px 28px;
  margin:24px 0 0;
  padding:0;
  list-style:none;
}
.page-hero__facts li{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-left:12px;
  border-left:2px solid var(--ph-accent);
}
.page-hero__facts strong{
  color:#fff;
  font-size:17px;
  font-weight:800;
  line-height:1.3;
  font-variant-numeric:tabular-nums;
}
.page-hero__facts span{
  color:#9dbdbd;
  font-size:12px;
  line-height:1.4;
}

/* ============ B 型装饰：右上同心圆 ============ */
.page-hero--text::after{
  content:'';
  position:absolute;
  width:300px;
  height:300px;
  right:7%;
  top:-60px;
  border:1px solid #6cb7b5;
  border-radius:50%;
  box-shadow:0 0 0 34px #ffffff08, 0 0 0 68px #ffffff08;
  pointer-events:none;
}

/* ============ 背景：两型统一深色 ============ */
/* B 型：纯文本，纯色渐变 */
.page-hero--text{
  background:linear-gradient(112deg,#0a2c3e 0%,#0c5261 100%);
}
/* A 型：左文右图，稍深一档，与配图不抢视线 */
.page-hero--media{
  background:linear-gradient(118deg,#082b3d 0%,#0d5a66 100%);
}

/* ============ 响应式 ============ */
@media (max-width:1100px){
  .page-hero__in{padding:56px 20px 60px}
  .page-hero--media .page-hero__in{gap:36px}
  .page-hero__media img{max-height:280px}
}

@media (max-width:900px){
  .page-hero__in{
    padding:48px 20px 52px;
    min-height:0;
  }
  /* A 型在窄屏改为上下堆叠 */
  .page-hero--media .page-hero__in{
    grid-template-columns:1fr;
    gap:28px;
  }
  /* 单列时配图必须复位：桌面端 .page-hero--media .page-hero__media 用了
   * justify-self:end + margin-right:2% 让它靠右贴边（A 型左文右图）。
   * 单列后这两条会把 330px 的图推到整行最右、再往左拉回 2%，
   * 表现为「图浮在右侧、左边空一大块」（768px 实测 x=403 w=330，容器宽 728）。
   * 窄屏配图应通栏左对齐。 */
  .page-hero--media .page-hero__media{
    justify-self:stretch;
    margin-right:0;
    max-width:none;
    width:100%;
  }
  .page-hero__media img{max-height:240px}
  .page-hero__title{font-size:clamp(30px,5.6vw,40px)}
  .page-hero__desc{font-size:15px;line-height:1.75}
}

@media (max-width:600px){
  .page-hero__in{padding:40px 20px 44px}
  .page-hero__title{font-size:28px;line-height:1.3;margin-bottom:14px}
  .page-hero__kicker{font-size:11px;letter-spacing:.12em;margin-bottom:12px}
  .page-hero__desc{font-size:14.5px}
  .page-hero--text::after{
    width:180px;height:180px;
    right:-46px;top:-46px;
    box-shadow:0 0 0 24px #ffffff08, 0 0 0 48px #ffffff08;
  }
  .page-hero__media figcaption{font-size:11.5px}
}

/* ============ 旧类名的兼容清理 ============ */
/* 下面这些旧 hero 类名在页面迁移后不再使用。
   若某页 CSS 残留导致重复背景/重复内边距，这里统一清掉。 */
.rgp-hero,
.fm-hero,
.af-hero{
  background:none !important;
  padding:0 !important;
  overflow:visible !important;
}
.rgp-hero::after,
.fm-hero::after,
.af-hero::after{
  content:none !important;
  display:none !important;
}