/* ============================================================
   cap-hero.css — 产品四页 Hero 文字化 + Hero CTA + 底部浮动咨询按钮
   引用页：capabilities / manufacturing / rnd / quality（独立 ?v 版本控制）。
   背景：
   - 2026-09-10 capabilities Hero 由纯图片带改为内嵌文字 + 左白渐变蒙版
     （scoped .page-hero--cap，当时仅 capabilities 引用）。
   - 2026-09-10 同日 manufacturing / rnd / quality 三页 Hero 也升级为文字 Hero，
     复用同一套蒙版/排版 -> 新增 .page-hero--flow 作用域，样式共享。
   为什么不写进 hero-reflow.css：brands 也引用该文件，改它会扩大影响面；
   本文件只在上述四页引入，影响面可控。
   ============================================================ */

/* ---------- Hero 文字区（capabilities 用 --cap，三页用 --flow） ---------- */
.page-hero--cap,
.page-hero--flow {
  display: flex;
  align-items: center;
}

.page-hero--cap .page-hero__inner,
.page-hero--flow .page-hero__inner {
  max-width: 640px;
  /* 覆盖 .container 的 margin auto：文字列靠左落位（对齐站点栅格），不居中 */
  margin-left: max(0px, calc((100% - 1200px) / 2));
  margin-right: auto;
}

.page-hero--cap h1,
.page-hero--flow h1 {
  font-family: var(--font-display);
  font-weight: 700;
  /* 主标按 <br>/标点断行，最长行 8 个汉字 ≈ 352px，640px 列内余量充足 */
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
}
.page-hero--cap h1 .accent,
.page-hero--flow h1 .accent { color: var(--brand); }

.page-hero--cap p,
.page-hero--flow p {
  margin-top: 18px;
  font-size: var(--fs-lg);
  max-width: 560px;
  line-height: 1.75;
  /* 不用 var(--slate) #6e6e73：部分 Hero 背景图整体偏暗，
     slate 在白蒙版上对比度不足（contact 页实测 3.59:1 < AA 4.5:1）。
     用加深色 #55555d，每次换图后仍需实测复核。 */
  color: #55555d;
}

/* ---------- Hero CTA 按钮行 ---------- */
.page-hero--cap .hero-cta,
.page-hero--flow .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
/* 次按钮：洋红描边（全站 ghost 是深色描边，Hero 亮场里用品牌色更醒目） */
.page-hero--cap .hero-cta .btn--ghost,
.page-hero--flow .hero-cta .btn--ghost {
  color: var(--brand);
  border-color: rgba(221, 19, 123, 0.45);
  background: rgba(255, 255, 255, 0.55);
}
.page-hero--cap .hero-cta .btn--ghost:hover,
.page-hero--flow .hero-cta .btn--ghost:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ---------- 左侧亮场蒙版：白区贴合文字，右侧露图 ----------
   渐变终点按「文字实际墨迹右缘」设定，不拍脑袋。
   实测方法：Range 量墨迹 -> 见 .workbuddy/memory 记录。
   各页副标行数不同，55% 终点为四页共用兜底值，换图/改文案后复测。 */
.page-hero--cap .zone__bg::after,
.page-hero--flow .zone__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.84) 26%,
    rgba(255, 255, 255, 0.66) 42%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}

/* ---------- 底部居中浮动咨询按钮（微微浮动动画） ---------- */
.float-cta {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(221, 19, 123, 0.38);
  animation: float-cta-bob 2.8s ease-in-out infinite;
  transition: filter var(--t-fast, 0.15s);
}
.float-cta:hover { filter: brightness(1.07); color: #fff; }
@keyframes float-cta-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .float-cta { animation: none; }
}

/* ---------- 响应式：平板 761-1023px ----------
   原 hero-reflow 在 ≥768px 固定 600px 高，真机反馈占屏过多；
   改为随内容自适应（2026-09-15），文字列/蒙版保持桌面横向布局。 */
@media (max-width: 1023px) and (min-width: 761px) {
  .page-hero--cap,
  .page-hero--flow {
    height: auto;
    min-height: 0;
    padding-block: 72px 64px;
  }
}

/* ---------- 响应式：≤760px ---------- */
@media (max-width: 760px) {
  .page-hero--cap .page-hero__inner,
  .page-hero--flow .page-hero__inner {
    max-width: 100%;
    margin-left: 0;
  }
  /* 加了 CTA 按钮后文字更高：移动端放开固定高度，防裁切；
     高度随内容自适应 + padding 收紧（2026-09-15：44/48 -> 30/34），
     目标整屏占比 ≤ 57%（390×844 实测 ≤ 480px） */
  .page-hero--cap,
  .page-hero--flow {
    height: auto;
    min-height: 0;
    padding-block: 30px 34px;
  }
  .page-hero--cap h1,
  .page-hero--flow h1 { font-size: clamp(1.7rem, 7.2vw, 2rem); }
  .page-hero--cap p,
  .page-hero--flow p { margin-top: 12px; font-size: 0.95rem; }
  /* 移动端按钮改垂直排列，整行可点 */
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    margin-top: 18px;
    gap: 10px;
  }
  .hero-cta .btn { justify-content: center; }
  /* 移动端隐藏底部浮动咨询按钮：Hero 内已有「在线咨询」入口（清理重复按钮），
     且折叠侧栏拉手常驻可唤起二维码 */
  .float-cta { display: none; }
  /* 移动端改上下渐变：上方文字区保持干净，底部让图透出 */
  .page-hero--cap .zone__bg::after,
  .page-hero--flow .zone__bg::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.82) 40%,
      rgba(255, 255, 255, 0) 76%);
  }
}

/* ============================================================
   2026-09-11 Hero → rf-5050 交界过渡（四页共用）
   manufacturing / rnd / quality / capabilities

   组合（用户确认版）：
     ① 20px 纯白留白带
     ② Hero 底部 120px「透明→白」羽化（元素级 mask，非白雾覆盖，不发灰）
     ③ 留白带正中一条 3px #E3E3E8 中性细线，左右两端各 18% 渐隐
   深色科技图顶边按要求保持原样（不羽化）。

   ⚠ 坑：.rf-5050 自带 overflow:hidden（见 hero-reflow.css），
      留白带若用 margin-top 承载，位于 margin 区的 ::before 细线会被裁掉看不见；
      故留白带用 padding-top 承载（padding 区属于盒内，伪元素可正常渲染）。
   ============================================================ */
.page-hero--slim .zone__bg {
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0, #000 calc(100% - 120px), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom,
    #000 0, #000 calc(100% - 120px), rgba(0, 0, 0, 0) 100%);
}
.rf-5050 { padding-top: 20px; }
.rf-5050::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 8.5px;
  height: 3px;
  z-index: 3;
  pointer-events: none;
  background: #E3E3E8;
  -webkit-mask-image: linear-gradient(to right,
    rgba(0, 0, 0, 0) 0, #000 18%, #000 82%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right,
    rgba(0, 0, 0, 0) 0, #000 18%, #000 82%, rgba(0, 0, 0, 0) 100%);
}
@media (max-width: 760px) {
  /* 移动端 Hero 更矮（自适应），羽化带收到 100px */
  .page-hero--slim .zone__bg {
    -webkit-mask-image: linear-gradient(to bottom,
      #000 0, #000 calc(100% - 100px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
      #000 0, #000 calc(100% - 100px), rgba(0, 0, 0, 0) 100%);
  }
}