
#cfh-hero-block{
  /* ✅ 内容区最大宽度（背景仍全宽） */
  --cfh-max: clamp(1240px, 78vw, 1600px);

  --cfh-font: Inter, "Segoe UI", Arial, sans-serif;
  --cfh-brand: #7a4a2e;

  /* ✅ 关键：整体内容往中间收的“左右呼吸感” */
  --cfh-pad: 14px;
  --cfh-pad-pc: clamp(28px, 4.2vw, 88px);

  /* 桌面：更接近你原本的大气字号，但不裁切 */
  --cfh-h1: clamp(42px, 3.4vw, 62px);
  --cfh-h1-line2: clamp(38px, 3.0vw, 60px);

  --cfh-proof: clamp(30px, 2.6vw, 52px);
  --cfh-body: 16px;

  --cfh-h1-weight: 650;
  --cfh-h1-lh: 1.10;
  --cfh-h1-ls: -0.018em;

  /* ✅ 中间空的核心：gap 更合理 */
  --cfh-gap: clamp(14px, 1.6vw, 24px);

  --cfh-left-shift-pc: 0px;

  --cfh-vgap: 18px;
  --cfh-radius: 14px;
  --cfh-shadow: 0 14px 34px rgba(0,0,0,.10);

  --cfh-cta-radius: 999px;
  --cfh-cta-pad-y: 12px;
  --cfh-cta-pad-x: 16px;

  --cfh-modal-bg: rgba(10,14,18,.62);
  --cfh-modal-radius: 14px;
  --cfh-modal-shadow: 0 22px 70px rgba(0,0,0,.35);
}

#cfh-hero-block, #cfh-hero-block *{ box-sizing:border-box; }

#cfh-hero-block{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* ✅ 外层容器：全宽 + 左右内边距（让内容内收） */
#cfh-hero-block .cfh-container{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: var(--cfh-pad);
  padding-right: var(--cfh-pad);
  font-family: var(--cfh-font);
}

/* ✅ 内层内容宽度：控制内容最大宽度，但不影响区块全宽 */
#cfh-hero-block .cfh-inner{
  max-width: var(--cfh-max);
  margin: 0 auto;
}

@media (min-width: 981px){
  #cfh-hero-block{
    position: relative;
    background: linear-gradient(180deg, #f6f7f8 0%, #ffffff 65%);
  }
  #cfh-hero-block::before{
    content:"";
    position:absolute;
    top:-120px;
    left:50%;
    transform: translateX(-58%);
    width: min(760px, 56vw);
    height: 520px;
    border-radius: 999px;
    background:
      radial-gradient(closest-side,
        rgba(122,74,46,.10),
        rgba(122,74,46,.06) 45%,
        rgba(122,74,46,0) 72%
      );
    pointer-events:none;
    z-index:0;
  }
  #cfh-hero-block .cfh-container{
    position:relative;
    z-index:1;
    padding-top:72px;
    padding-bottom:54px;

    /* ✅ PC 端左右呼吸感：内容整体内收 */
    padding-left: var(--cfh-pad-pc);
    padding-right: var(--cfh-pad-pc);
  }
}

/* Layout */
#cfh-hero-block .cfh-layout{
  display:grid;
  gap: var(--cfh-gap);
  align-items: center;
  grid-template-columns: 1fr;
}

#cfh-hero-block .cfh-container,
#cfh-hero-block .cfh-inner,
#cfh-hero-block .cfh-layout,
#cfh-hero-block .cfh-left,
#cfh-hero-block .cfh-right,
#cfh-hero-block .cfh-showcase,
#cfh-hero-block .cfh-videos,
#cfh-hero-block .cfh-vcard{ min-width:0; }

@media (min-width: 981px){
  /* ✅ 右侧视频稍微更大：列比例给右侧更多空间（不缩放） */
  #cfh-hero-block .cfh-layout{
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  }
  #cfh-hero-block .cfh-left{ transform: translateX(var(--cfh-left-shift-pc)); }
}

/* Title */
#cfh-hero-block .cfh-title{
  margin: 0 0 12px;
  color:#1a2530;
  letter-spacing: var(--cfh-h1-ls);
  font-size: var(--cfh-h1);
  font-weight: var(--cfh-h1-weight);
  line-height: var(--cfh-h1-lh);
  overflow-wrap:anywhere;
  word-break: break-word;
}

/* ✅ 桌面端第二行不换行 + 单独字号 */
#cfh-hero-block .cfh-title .cfh-no-break{
  white-space: nowrap;      /* 不允许 Manufacturing Process 换行 */
  display:inline-block;
  font-size: var(--cfh-h1-line2);
  line-height: var(--cfh-h1-lh);
}

#cfh-hero-block .cfh-lead{
  margin: 0 0 14px;
  font-size: var(--cfh-body);
  line-height: 1.6;
  color:#495057;
  max-width: 72ch;
  overflow-wrap:anywhere;
}

/* Proof */
#cfh-hero-block .cfh-proof{ margin: 0 0 10px; }
#cfh-hero-block .cfh-proof-line{
  font-size: var(--cfh-proof);
  font-weight: 650;
  line-height: 1.10;
  letter-spacing: var(--cfh-h1-ls);
  color:#1a2530;
  overflow-wrap:anywhere;
  word-break: break-word;
  margin:0;
}
#cfh-hero-block .cfh-proof-desktop{ display:block; }
#cfh-hero-block .cfh-proof-mobile{ display:none; }

#cfh-hero-block .cfh-proof-sub{
  margin: 0;
  font-size: var(--cfh-body);
  line-height: 1.6;
  color:#6c757d;
  overflow-wrap:anywhere;
}
@media (min-width: 981px){
  #cfh-hero-block .cfh-proof-sub::after{
    content:" \2192";
    font-weight: 650;
    color: rgba(122,74,46,.9);
  }
}

/* CTA */
#cfh-hero-block .cfh-cta{
  margin-top: 22px;
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}
#cfh-hero-block .cfh-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-decoration:none;
  font-weight: 650;
  font-size: 16px;
  line-height: 1;
  padding: var(--cfh-cta-pad-y) var(--cfh-cta-pad-x);
  border-radius: var(--cfh-cta-radius);
  border: 1px solid rgba(0,0,0,.12);
  min-width: 240px;
  max-width: 100%;
  white-space: nowrap;
  transition: transform .18s ease, filter .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
#cfh-hero-block .cfh-cta a.cfh-btn-primary{
  color:#fff;
  background: var(--cfh-brand);
  box-shadow: 0 10px 22px rgba(122,74,46,.28);
}
#cfh-hero-block .cfh-cta a.cfh-btn-secondary{
  color: var(--cfh-brand);
  background:#f8f4f1;
  border-color: rgba(122,74,46,.35);
  box-shadow: 0 10px 22px rgba(122,74,46,.12);
}
#cfh-hero-block .cfh-cta a.cfh-btn-primary:hover{ transform: translateY(-1px); filter: brightness(.98); }
#cfh-hero-block .cfh-cta a.cfh-btn-secondary:hover{ transform: translateY(-1px); background: rgba(122,74,46,.10); }

/* RIGHT videos */
#cfh-hero-block .cfh-showcase{ width:100%; } /* ✅ 不做任何缩放 */
#cfh-hero-block .cfh-videos{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cfh-vgap);
  align-content:start;
}
#cfh-hero-block .cfh-vcard{
  position:relative;
  border-radius: var(--cfh-radius);
  overflow:hidden;
  box-shadow: var(--cfh-shadow);
  background:#0b0f14;
}
#cfh-hero-block .cfh-vcard::before{ content:""; display:block; aspect-ratio:16/9; }

#cfh-hero-block .cfh-vcover{ position:absolute; inset:0; cursor:pointer; outline:none; }
#cfh-hero-block .cfh-vcover img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.01);
  transition: transform .25s ease;
}
#cfh-hero-block .cfh-vcover::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.12), rgba(0,0,0,0));
  opacity: .55;
  transition: opacity .25s ease, background .25s ease;
}
#cfh-hero-block .cfh-play{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:64px;height:64px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.28);
  display:grid; place-items:center;
  z-index:2;
  transition: transform .22s ease, background .22s ease;
}
#cfh-hero-block .cfh-play svg{ width:22px;height:22px; margin-left:2px; fill:#fff; }
#cfh-hero-block .cfh-ytchip{
  position:absolute; right:12px; bottom:12px;
  font-size:12px; font-weight:650; color:#fff;
  background: rgba(0,0,0,.30);
  padding: 8px 10px;
  border-radius:999px;
  z-index:2;
}
@media (hover:hover){
  #cfh-hero-block .cfh-vcover:hover img{ transform: scale(1.05); }
  #cfh-hero-block .cfh-vcover:hover::after{
    opacity: .70;
    background: linear-gradient(to top, rgba(0,0,0,.18), rgba(0,0,0,0));
  }
  #cfh-hero-block .cfh-vcover:hover .cfh-play{
    transform: translate(-50%,-50%) scale(1.06);
    background: rgba(122,74,46,.45);
  }
}

/* Mobile（保持你原逻辑） */
@media (max-width: 980px){
  #cfh-hero-block .cfh-container{
    padding-top: 18px;
    padding-bottom: 0;
    padding-left: var(--cfh-pad);
    padding-right: var(--cfh-pad);
  }

  #cfh-hero-block .cfh-layout{
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
  }
  #cfh-hero-block .cfh-left{ text-align:center; }

  #cfh-hero-block .cfh-title{
    font-size: clamp(16px, 4.4vw, 22px);
    line-height: 1.15;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
  }
  #cfh-hero-block .cfh-title br{ display:none; }
  #cfh-hero-block .cfh-title .cfh-no-break{ white-space: nowrap; display:inline; font-size: inherit; }

  #cfh-hero-block .cfh-lead{
    font-size: clamp(12px, 3.7vw, 13px);
    line-height: 1.45;
    margin: 0 0 10px;
  }

  #cfh-hero-block .cfh-proof-desktop{ display:none; }
  #cfh-hero-block .cfh-proof-mobile{ display:block; }

  #cfh-hero-block .cfh-proof-mobile .cfh-proof-line{
    font-size: clamp(12.5px, 3.6vw, 18px);
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #cfh-hero-block .cfh-proof-sub{
    font-size: clamp(12px, 3.7vw, 13px);
    line-height: 1.45;
  }

  #cfh-hero-block .cfh-cta{
    margin-top: 12px;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
  }
  #cfh-hero-block .cfh-cta a{
    min-width: 0;
    width: 50%;
    max-width: 220px;
    font-size: 12.5px;
    padding: 9px 10px;
  }
  @media (max-width: 360px){
    #cfh-hero-block .cfh-cta a{ font-size: 12px; padding: 8px 9px; max-width: 200px; }
  }

  #cfh-hero-block .cfh-videos{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  #cfh-hero-block .cfh-vcard::before{ aspect-ratio: 16/11; }
  #cfh-hero-block .cfh-play{ width:56px;height:56px; }
}

/* Modal（保持你原本） */
#cfh-hero-block .cfh-modal{ position: fixed; inset: 0; display:none; z-index: 9999; }
#cfh-hero-block .cfh-modal.is-open{ display:block; }
#cfh-hero-block .cfh-modal__overlay{ position:absolute; inset:0; background: var(--cfh-modal-bg); }
#cfh-hero-block .cfh-modal__panel{
  position: relative;
  width: min(980px, calc(100vw - 36px));
  margin: 7vh auto 0;
  border-radius: var(--cfh-modal-radius);
  overflow:hidden;
  background:#0b0f14;
  box-shadow: var(--cfh-modal-shadow);
}
#cfh-hero-block .cfh-modal__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px; padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
#cfh-hero-block .cfh-modal__title{
  font-size:14px; font-weight:650; color: rgba(255,255,255,.92);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#cfh-hero-block .cfh-modal__actions{ display:flex; align-items:center; gap: 10px; }
#cfh-hero-block .cfh-modal__yt{
  font-size: 13px; font-weight:650; color: rgba(255,255,255,.90);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.20);
  padding: 8px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.20);
}
#cfh-hero-block .cfh-modal__close{
  width:36px;height:36px;
  border-radius:10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
#cfh-hero-block .cfh-modal__media{ position: relative; width:100%; aspect-ratio:16/9; background:#000; }
#cfh-hero-block .cfh-modal__media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width: 768px){ #cfh-hero-block .cfh-modal__title{ display:none; } }
