/* ================================================================
   HERO-IMAGE — 内页固定高度 hero
   结构和首页 hero-video 一致：背景媒介 + 暗化 + slogan + CTA + V mask
   差异：媒介用 <img> 替代 <video>，容器高度固定（不是 100vh）。
   类名独立成 .page-hero 体系，避免与首页 .hero 冲突。
   ================================================================ */

.page-hero {
  position: relative;
  height: 540px;
  min-height: 440px;
  overflow: hidden;
  background-color: #000;
}

/* 背景图（替代首页的 video 媒介） */
.page-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 顶部黑色渐隐遮罩（保证白色 nav 在亮图上可读） */
.page-hero__shade {
  position: absolute; left: 0; right: 0; top: 0;
  height: 33.33%;
  background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 3;
}

/* 整体暗化 overlay（同首页 hero__overlay 配方） */
.page-hero__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(0,20,30,0) 40%, rgba(0,12,20,.45) 100%),
    linear-gradient(180deg, rgba(0,15,25,.3) 0%, rgba(0,15,25,0) 30%, rgba(0,15,25,.45) 100%);
  z-index: 1;
}

/* slogan + sub + CTA 内容居中 */
.page-hero__content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff; text-align: center;
  padding: 0 24px;
  padding-bottom: 4vh;  /* 略偏上，给 V mask 留视觉空间 */
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.1vw, 50px);
  font-weight: 900;
  letter-spacing: .15em;
  text-shadow: 0 4px 24px rgba(0,0,0,.45);
  padding: .12em 0;
  /* 内页 hero 标题竖向偏移：默认下移 30px；后台「页面 Hero」可按页覆盖 --zz-hero-title-dy（functions.php 注入） */
  transform: translateY(var(--zz-hero-title-dy, 30px));
}
/* 英文页头标题（WPML /en）：拉丁字体 + 收紧字距 + 允许换行。
   html[lang^="en"] 兜底：输出层翻译不加 --en class 时也生效。 */
.page-hero__title--en,
html[lang^="en"] .page-hero__title {
  font-family: var(--font-en);
  letter-spacing: .02em;
  line-height: 1.1;
  text-transform: none;
}

.page-hero__sub {
  margin-top: 4px;
  font-family: var(--font-en);
  font-size: clamp(10px, .9vw, 16px);
  font-weight: 500;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  /* 副标题竖向偏移：默认下移 30px（与标题同步下移，保持间距）；后台可按页覆盖 --zz-hero-sub-dy */
  transform: translateY(var(--zz-hero-sub-dy, 30px));
}

/* 隐藏所有 hero 的「了解更多」CTA：内页静态 + Hero 轮播渲染的 .page-hero__cta，以及首页 KV 的 .hero__cta。 */
.page-hero__cta,
.hero__cta { display: none !important; }

/* V mask 切口（与首页 hero 同款，视觉延续） */
.page-hero__mask {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 180px;
  display: flex;
  pointer-events: none;
  z-index: 3;
}
.page-hero__mask span {
  flex: 1; position: relative; height: 100%;
}
.page-hero__mask span::before {
  content: ""; position: absolute; inset: -1px;
  background: #fff;
}
.page-hero__mask .left::before  { clip-path: polygon(0 0,   100% 100%, 0 100%); }
.page-hero__mask .right::before { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* V mask 入场动画（与首页 hero 同款）：loading 完成（.page-hero.is-ready）后，
   两半从左右滑入合成 V，呈现「V 型升起/出现」。仅真前台（.zz-js）生效；
   构建器（无 .zz-js）里 mask 默认静态可见。.page-hero 已 overflow:hidden，滑出部分被裁，无横向滚动。 */
.zz-js .page-hero__mask .left  { transform: translateX(-110%); transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.zz-js .page-hero__mask .right { transform: translateX(110%);  transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.zz-js .page-hero.is-ready .page-hero__mask .left,
.zz-js .page-hero.is-ready .page-hero__mask .right { transform: translateX(0); }
/* 注：is-ready 由 hero 加载脚本可靠设置（图片 onload + 9s 多重超时兜底），故无需 CSS animation 安全网
   （0s时长+forwards 的 animation 在 Chrome 下会提前锁定终值，反而使 mask 不滑入）。 */

@media (max-width: 980px) {
  .page-hero { height: 480px; }
  /* V 高度改用与首页 hero 同一公式（20.8vw 等比），使移动端斜角 ~23° 与首页一致，
     不再因固定 120px 在窄屏变陡。 */
  .page-hero__mask { height: clamp(56px, 20.8vw, 300px); }
}