/* ==========================================================================
   RIZHEN · rz-refine.css
   最终打磨：块级修正 / 移动端溢出治理 / 节奏收敛
   （加载顺序最后，用于覆盖前面文件中的少量默认值）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. anchor 内嵌套 span 的块级化（列表行 / 卡片）
   -------------------------------------------------------------------------- */
.prow > span { display: block; }
.prow > span > span { display: block; }
.prow__title { line-height: 1.4; }
.list-row > span, .list-row > span > span { display: block; }
.dl-item > span { display: block; }
.dl-item__icon, .dl-item__go { display: inline-flex !important; align-items: center; gap: 6px; }

/* --------------------------------------------------------------------------
   2. 概述折叠面板：作为独立面板阅读
   -------------------------------------------------------------------------- */
.acc--panel {
  background: var(--c-white);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r);
  padding: var(--s-5);
}
.acc--panel .acc__item:last-child { border-bottom: 0; }
.acc--panel .acc__panel > div { padding-bottom: var(--s-4); }

/* --------------------------------------------------------------------------
   3. 纵向节奏：相邻同为白底区块之间不叠加双倍留白
   白底区块（如 about 的企业文化/资质与专利、校招流程、产品规格）padding-top
   被清零，小标题与上一模块贴死。现改为「前一区块也是白底」才收拢。
   -------------------------------------------------------------------------- */
.section:not([class*="--surface"]):not([class*="--dark"]):not([class*="--white"])
  + .section:not([class*="--surface"]):not([class*="--dark"]):not([class*="--white"]) { padding-top: 0; }
.chain { padding-bottom: var(--s-2); }
.chain__step { padding-bottom: var(--s-4); }

/* 首页节奏微调：灰/深色区块底部收窄避免过度留白，
   后续区块小标题上方增加内距保持呼吸感 */
#machines, #numbers, #resources { padding-bottom: var(--section-py-sm); }
#manufacturing { padding-top: calc(var(--section-py) + var(--s-4)); }
#resources { padding-top: calc(var(--section-py) + var(--s-4)); }

/* --------------------------------------------------------------------------
   4. 文本换行与溢出治理
   -------------------------------------------------------------------------- */
.trust__badge span:last-child { white-space: normal; }
.trust__badges { gap: var(--s-4) var(--s-5); }
.matrix__spec dd, .spec-row dd, .app-block__cap dd, .contact-list__row dd { overflow-wrap: anywhere; }
.mcard__title, .prow__title, .list-row__title, .rcard h3 { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   5. 移动端（≤ 760px）
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .matrix__spec { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 11px 0; }
  .matrix__nav { gap: var(--s-2); }
  .matrix__tab { padding: 10px 14px 12px 0; }
  .matrix__tab .t { font-size: var(--fs-data); }

  .hero__readout div { padding-right: var(--s-4); margin-right: var(--s-4); }
  .hero__readout dd { font-size: 16px; }
  .hero__visual { min-height: 300px; }
  .hero__dots { left: 16px; }

  .trust__stat { padding-left: var(--s-4); margin-left: var(--s-4); }
  .trust__stat b { font-size: 22px; }
  .trust__badge span:last-child { font-size: var(--fs-micro); }

  .board__value { font-size: 40px; }
  .board__item { padding: var(--s-5) var(--s-4) var(--s-4) 0; }

  .prow { grid-template-columns: 64px minmax(0, 1fr) 22px; gap: var(--s-3); }
  .prow__media { aspect-ratio: 1 / 1; }

  .phead__inner { gap: var(--s-6); }
  .phead__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }

  .zig__stat { padding-right: var(--s-4); margin-right: var(--s-4); }
  .zig__stat b { font-size: 24px; }

  .metrics__item { padding: var(--s-4) var(--s-3) var(--s-4) 0; }
  .metrics__item b { font-size: 24px; }

  .rail__track { grid-auto-columns: minmax(252px, 1fr); }

  .footer__statement h2 { font-size: 30px; }
  .cta h2 { font-size: 28px; }

  .breadcrumb ol { gap: 6px; }
  .breadcrumb li:not(:last-child) { display: none; }
  .breadcrumb li:last-child { display: inline-flex; }
}

@media (max-width: 520px) {
  .hero__readout { gap: var(--s-3); }
  .hero__readout div { border-right: 0; padding-right: 0; margin-right: var(--s-5); }
  .pd-hero__ctas .btn, .hero__ctas .btn { flex: 1 1 100%; }
  .trust__stats { width: 100%; }
  .spec-tabs { gap: 6px; }
  .spec-tab { padding: 8px 12px; font-size: var(--fs-micro); }
}

/* --------------------------------------------------------------------------
   6. 打印（工程采购常打印规格页）
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .site-header, .stationbar, .anchorbar, .drawer, .drawer-overlay,
  .modal-overlay, .cta, .marquee, .hero__nav, .hero__dots { display: none !important; }
  body { background: #fff; }
  .section { padding-block: 18px; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .pd-hero, .phead, .section--dark { background: #fff !important; color: #12161A !important; }
  .pd-hero h1, .phead h1, .pd-hero__spec dd, .board__value { color: #12161A !important; }
}

/* --------------------------------------------------------------------------
   7. EV 橙标签：仅用于新能源领域标签（V3 §4.3 用法一），不拉伸
   -------------------------------------------------------------------------- */
.ev-tag { align-self: flex-start; width: fit-content; }
.app-block__tag:empty { display: none; }

/* --------------------------------------------------------------------------
   7.1 图片类展示 15px 圆角（覆盖 --r 默认值）
   组合块（文字卡 + 图片）整体视作一块：容器 15px + overflow hidden，
   文字半边自然获得左角、图片半边自然获得右角
   -------------------------------------------------------------------------- */
.mcard, .pd-hero__visual,
.pcard, .case-card,
.zig__visual, .app-block__visual,
.gallery a, .gallery figure,
.gallery-rail__item img,
.prow__media,
.wide-card,
.rz-video { border-radius: 15px; }
.mcard__tag { border-radius: 2px; }

/* --------------------------------------------------------------------------
   8. Hero 标题两行硬约束（V3 §6.1：Headline 最多 2 行，EN 46–56px / ZH 40–48px）
   -------------------------------------------------------------------------- */
.hero h1 { font-size: clamp(34px, 3.4vw, 46px); }
.hero__grid { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); }
@media (max-width: 1080px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   9. 产品/案例/资源图：向右展开 (wipe::after 缩放) 改为渐显
   -------------------------------------------------------------------------- */
/* 隐藏原 ::after 幕布（保留类以兼容旧引用） */
.wipe::after { display: none; content: none; }
/* 元素自身做渐显：默认透明，is-in 时显示；与 [data-reveal] 共存无冲突 */
.wipe {
  opacity: 0;
  transform: none;
  transition: opacity 0.7s var(--ease);
}
.wipe.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .wipe, .wipe.is-in { opacity: 1 !important; transition: none !important; }
}
body.rz-static .wipe { opacity: 1; }

/* --------------------------------------------------------------------------
   10. 内页首屏 phead--hero：复用首页 Hero 高度与遮罩，单张背景图，无轮播
   -------------------------------------------------------------------------- */
.phead--hero {
  position: relative;
  height: calc(100vh - 142px);
  min-height: 520px;
  max-height: 860px;
  background: var(--c-obsidian);
  color: #fff;
  overflow: hidden;
  display: flex;
  /* 纵向两端分布：面包屑顶行贴顶，内容区沉底（新增 phead__top 后不能再横向 flex） */
  flex-direction: column; justify-content: space-between; align-items: stretch;
  padding: 0;
}
.phead--hero .phead__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.8s var(--ease), transform 1.2s var(--ease);
}
.phead--hero.is-in .phead__bg,
.phead--hero [data-reveal].is-in.phead__bg { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .phead--hero .phead__bg { transform: none; transition: none; opacity: 1; }
}
.phead--hero .phead__top { padding-top: clamp(18px, 2.5vw, 30px); }
.phead--hero .phead__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: end;
}
.phead--hero.on-dark .phead__crumb a,
.phead--hero.on-dark .phead__crumb span { color: rgba(255,255,255,0.78); }
.phead--hero.on-dark .phead__kicker { color: rgba(255,255,255,0.78); }
.phead--hero.on-dark h1 { color: #fff; max-width: 22em; }
.phead--hero.on-dark .phead__lead { color: rgba(255,255,255,0.85); }
/* 右侧数据卡：半透明炭黑小卡，照片亮部上保证白字可读（与 hero__eyebrow 同语言） */
.phead--hero.on-dark .phead__fact {
  border-top-color: rgba(255,255,255,0.18);
  background: rgba(18,22,26,0.42);
  border-radius: var(--r);
  padding: var(--s-3) var(--s-4);
}
.phead--hero.on-dark .phead__fact b { color: #fff; }
.phead--hero.on-dark .phead__fact span { color: rgba(255,255,255,0.65); }
.phead--hero .phead__scrim,
.phead--hero .phead__grid {
  position: absolute; inset: 0; pointer-events: none;
}
.phead--hero .phead__scrim {
  background:
    radial-gradient(115% 100% at 0% 100%, rgba(31,37,43,0.74) 0%, rgba(31,37,43,0.48) 28%, rgba(31,37,43,0.14) 54%, rgba(31,37,43,0) 74%);
  z-index: 1;
}
.phead--hero .phead__grid {
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 25% 33%;
  background-position: 0 0;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.0));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.0));
}
@media (max-width: 900px) {
  .phead--hero .phead__inner { grid-template-columns: minmax(0, 1fr); }
  .phead--hero { min-height: 460px; }
}

/* 客户案例页页头：较其他内页降低约 200px */
body.post-type-archive-case .phead--hero { height: calc(100vh - 342px); min-height: 460px; max-height: 660px; }
@media (max-width: 900px) {
  body.post-type-archive-case .phead--hero { min-height: 420px; }
}

/* --------------------------------------------------------------------------
 * -------------------------------------------------------------------------- */
/* 移动端：微信咨询悬浮钮压缩为纯图标，首屏 hero 控制行上移让位（避免遮挡 01/03 计数与翻页箭头） */
@media (max-width: 640px) {
  .wx-fab { bottom: 12px; right: 12px; }
  .wx-fab__btn { padding: 14px; }
  .wx-fab__label { display: none; }
  .hero__bar { margin-bottom: 58px; }
}
/* 表单行内错误提示（rz.js 模块 11 注入） */
.form .error { display: block; margin-top: 6px; min-height: 0; }
/* 页脚语言切换 */
.footer__lang { display: flex; align-items: center; gap: var(--s-3); }
.footer__lang a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.footer__lang a:hover, .footer__lang a.is-active { color: #fff; }
.footer__lang .sep { color: rgba(255, 255, 255, 0.3); }
/* 桌面端：右下角咨询悬浮钮与 hero 控制行（计数/翻页/进度环）重叠，控制行整体右让位 */
@media (min-width: 641px) {
  .hero__bar { padding-right: 168px; }
}

/* ==========================================================================
   策略：白底画布 + 浅灰蓝面；obsidian 降级为纯文字墨色，不再做任何大面积
   背景；品牌双蓝保留但只作文字/按钮/下划线（小面积）。
   深色区块（topbar/stationbar/hero遮罩/工艺链面板/数字看板/预约band/页脚/
   内页页头）全部原地翻转为浅色——类名不改，仅换肤。
   回退方式：整段删除本层即可恢复 V3 深色规范（原值见各处注释）。
   ========================================================================== */
:root {
  --c-canvas: #FFFFFF;        /* 原 #F7F8FA */
  --c-surface: #F4F6F9;       /* 原 #ECEEF2 */
  --c-hairline: #E3E7ED;      /* 原 #D8DCE3 */
  --c-hairline-2: #EEF1F5;    /* 原 #E7EAEF */
  /* 语义反转：原深色强调区块转浅后的正文色 / 细线色 */
  --c-on-dark: rgba(20, 26, 32, 0.72);
  --c-hairline-dark: rgba(20, 26, 32, 0.12);
  /* Hero/页头遮罩色（RGB，供 rgba(var(--scrim-rgb),a) 使用），可一键换色：
     纯白 255,255,255 ｜ 品牌浅蓝 219,233,247（当前） ｜ 雾灰蓝 238,243,248 ｜ 暖灰 246,245,242 */
  --scrim-rgb: 219, 233, 247;
}

/* ---- 实心主按钮全局统一品牌蓝（原墨黑 btn--primary / btn--invert） ---- */
.btn--primary { background: var(--c-precision); }
.btn--primary:hover { background: var(--c-precision-2); }
.btn--invert { background: var(--c-precision); color: #fff; }
.btn--invert:hover { background: var(--c-precision-2); }

/* ---- 强调区块（原深色）通用翻转 ---- */
.section--dark { background: var(--c-white); color: var(--c-obsidian); }
.section--dark .section-index { color: var(--c-slate); }
.section--dark .tlink { color: var(--c-obsidian); }
.section--dark .tlink:hover { color: var(--c-precision); }
.on-dark .overline, .overline--dark { color: var(--c-slate); }
.on-dark .breadcrumb, .breadcrumb--dark { color: var(--c-slate); }
.breadcrumb--dark a:hover { color: var(--c-precision); }
.on-dark .brand__sub { color: var(--c-slate); }

/* ---- 顶栏：黑底 → 白底细线 ---- */
.topbar { background: var(--c-white); color: var(--c-slate); border-bottom: 1px solid var(--c-hairline-2); }
.topbar__meta a:hover { color: var(--c-obsidian); }
.topbar__lang a.is-active { color: var(--c-obsidian); }

/* ---- 主导航当前页：实心蓝块 → 蓝字 + 蓝色下划线 ---- */
.nav__item.is-current > .nav__link { background: transparent; color: var(--c-precision); }
.nav__item.is-current > .nav__link::after { left: 12px; right: 12px; bottom: 0; background: var(--c-precision); }
.nav__panel a:hover { background: var(--c-surface); }

/* ---- 工位条 / 锚点条：黑底 → 白底，激活蓝块 → 蓝字 + 下划线 ---- */
.stationbar { background: var(--c-white); color: var(--c-slate); border-bottom: 1px solid var(--c-hairline); }
.stationbar__readout { color: rgba(20, 26, 32, 0.5); }
.stationbar__readout b { color: var(--c-obsidian); }
.stationbar__step { color: rgba(20, 26, 32, 0.5); }
.stationbar__step:hover { color: var(--c-obsidian); background: var(--c-surface); }
.stationbar__step.is-done { color: var(--c-slate); }
.stationbar__step.is-active { background: transparent; color: var(--c-precision); box-shadow: inset 0 -2px 0 var(--c-precision); }
.anchorbar a.is-active, .anchorbar a.is-active:hover { background: transparent; color: var(--c-precision); box-shadow: inset 0 -2px 0 var(--c-precision); }


/* ---- 工艺链面板：深蓝渐变实心 → 白卡 + 蓝侧条 ---- */
.matrix__copy {
  background: var(--c-white);
  color: var(--c-obsidian);
  box-shadow: inset 3px 0 0 var(--c-precision);
}
.matrix__copy h3 { color: var(--c-obsidian); }
.matrix__copy p { color: var(--c-slate); }
.matrix__specs { border-top-color: var(--c-hairline); }
.matrix__spec { border-bottom-color: var(--c-hairline-2); }
.matrix__spec dt { color: var(--c-slate); }
.matrix__spec dd { color: var(--c-obsidian); }
.matrix__copy .btn--outline-invert { color: var(--c-obsidian); border-color: rgba(20,26,32,0.35); }
.matrix__copy .btn--outline-invert:hover { border-color: var(--c-obsidian); background: rgba(20,26,32,0.05); }

/* ---- 客户条 Marquee 渐隐边：跟随新的 surface 色 ---- */
.marquee::before { background: linear-gradient(90deg, var(--c-surface), rgba(244, 246, 249, 0)); }
.marquee::after { background: linear-gradient(270deg, var(--c-surface), rgba(244, 246, 249, 0)); }

/* ---- 数字看板：黑底 → 白底，数值墨色 ---- */
.board__value { color: var(--c-obsidian); }
.board__unit { color: var(--c-slate); }
.board__label { color: var(--c-slate); }
.board__bar { background: var(--c-hairline-2); }

/* ---- 预约咨询 band：黑底 → 浅灰面（主按钮已全局品牌蓝） ---- */
.cta { background: var(--c-surface); color: var(--c-obsidian); }
.cta h2 { color: var(--c-obsidian); }
.cta h2 em { color: rgba(20, 26, 32, 0.45); }
.cta__meta { color: rgba(20, 26, 32, 0.6); }
.cta__meta b { color: var(--c-obsidian); }
.cta__meta a:hover { color: var(--c-precision); }
.cta .btn--outline-invert { color: var(--c-obsidian); border-color: rgba(20, 26, 32, 0.35); }
.cta .btn--outline-invert:hover { border-color: var(--c-obsidian); background: rgba(20, 26, 32, 0.05); }

/* ---- 页脚：黑底 → 白底 ---- */
.site-footer { background: var(--c-white); color: var(--c-slate); border-top: 1px solid var(--c-hairline); }
.footer__statement h2 { color: var(--c-obsidian); }
.footer__statement .meta { color: var(--c-slate); }
.footer__brand .brand__name, .footer__brand .brand { color: var(--c-obsidian); }
.footer__brand .brand__mark img { filter: none; }
.footer__col h4 { color: rgba(20, 26, 32, 0.5); }
.footer__col a:hover { color: var(--c-precision); }
.footer__col strong { color: var(--c-obsidian); }
.footer__bottom { color: rgba(20, 26, 32, 0.5); }
.footer__bottom a:hover { color: var(--c-precision); }
.footer__lang a { color: var(--c-slate); }
.footer__lang a:hover, .footer__lang a.is-active { color: var(--c-obsidian); }
.footer__lang .sep { color: var(--c-hairline); }

/* ---- 内页页头（标准深色带）：黑底 → 白底 ---- */
/* 浅色皮肤仅作用于无照片的素色页头；照片型 phead--hero 走炭黑遮罩 + 白字 */
.phead:not(.phead--hero) { background: var(--c-white); color: var(--c-obsidian); border-bottom: 1px solid var(--c-hairline); }
.phead:not(.phead--hero) h1 { color: var(--c-obsidian); }
.phead:not(.phead--hero) h1 em { color: rgba(20, 26, 32, 0.45); }
.phead:not(.phead--hero) .phead__kicker { color: var(--c-slate); }
.phead:not(.phead--hero) .phead__fact b { color: var(--c-obsidian); }
.phead:not(.phead--hero) .phead__fact span { color: var(--c-slate); }


/* ---- 小控件 hover 底色修正（canvas 已转白，白上白失去反馈） ---- */
.btn--secondary:hover { background: var(--c-surface); }
.modal__close:hover { background: var(--c-surface); }

/* ==========================================================================
   15. FLUENT FORMS 接入态（短代码让位后与主题表单语言归一）
   作用域 .contact-panel / .modal：FF 自带皮肤（大圆角/默认按钮）按 V3 Token 归一，
   仅覆盖观感，不改 FF 结构与其校验行为。
   ========================================================================== */
.contact-panel .ff-el-group,
.modal .ff-el-group { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--s-4); }
.contact-panel .ff-el-input--label label,
.modal .ff-el-input--label label {
  font-family: var(--ff-mono); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--c-slate);
}
.contact-panel .ff-required,
.modal .ff-required { color: var(--c-destructive); }
.contact-panel .ff-el-form-control,
.modal .ff-el-form-control {
  width: 100%; padding: 11px 13px;
  background: var(--c-white);
  border: 1px solid var(--c-hairline); border-radius: var(--r);
  font-family: var(--ff-sans); font-size: var(--fs-data); color: var(--c-obsidian);
  transition: border-color var(--dur-micro) var(--ease-io), box-shadow var(--dur-micro) var(--ease-io);
}
.contact-panel select.ff-el-form-control,
.modal select.ff-el-form-control { height: auto; }
.contact-panel textarea.ff-el-form-control,
.modal textarea.ff-el-form-control { resize: vertical; min-height: 84px; }
.contact-panel .ff-el-form-control:focus,
.modal .ff-el-form-control:focus {
  outline: none; border-color: var(--c-precision);
  box-shadow: 0 0 0 3px rgba(0, 75, 150, 0.12);
}
.contact-panel .ff-el-form-help-text,
.modal .ff-el-form-help-text { font-size: var(--fs-micro); color: var(--c-slate); }
.contact-panel .ff-el-is-error .ff-el-form-control,
.modal .ff-el-is-error .ff-el-form-control { border-color: var(--c-destructive); }
.contact-panel .ff-el-form--error,
.modal .ff-el-form--error { font-size: var(--fs-micro); color: var(--c-destructive); }
.contact-panel .ff-el-group.ff-submit-group,
.modal .ff-el-group.ff-submit-group { margin: 0; }
.contact-panel .ff-btn-submit,
.modal .ff-btn-submit {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  padding: 13px 22px; background: var(--c-precision); color: var(--c-white);
  border: 0; border-radius: var(--r); cursor: pointer;
  font-family: var(--ff-sans); font-size: var(--fs-data); font-weight: 600;
  transition: background var(--dur-micro) var(--ease-io), transform var(--dur-micro) var(--ease-io);
}
.contact-panel .ff-btn-submit:hover,
.modal .ff-btn-submit:hover { background: var(--c-precision-2); }
.contact-panel .ff-form-success, .contact-panel .ff_success_form,
.modal .ff-form-success, .modal .ff_success_form {
  font-size: var(--fs-meta); color: var(--c-precision); font-weight: 600;
  border: 1px solid var(--c-precision); border-radius: var(--r);
  padding: 12px 14px; background: rgba(0, 75, 150, 0.05);
}