/* ==========================================================================
   common/home-hero.css  —  首页 Hero 轮播（后台「模板控制器 → 首页轮播」驱动）
   --------------------------------------------------------------------------
   版式来源：www 的 .tpm-portal-hero（左侧标题列表 + 右侧文案 + 按钮 + 背景视频）。
   类名统一改成 hp-hero 前缀：www 的 web/home/hero.html 里已经有一套同名
   .tpm-portal-hero，而且带 max-width:1024px 的移动版规则，直接复名会被它覆盖。

   ★ 与 www 原版的关系：首页已启用 body.has-hero（导航透明浮在 Hero 上，
     与 www 原版一致），所以下面用 --navheight 给内容补了顶部避让，
     避免标题 / 左侧列表被导航条压住；其余尺寸完全照搬 www。

   ★ 所有文案、图片、视频、链接、角标都来自后台，本文件不含任何硬编码内容。
   ========================================================================== */

/* ---------- 容器 ---------- */
.hp-hero {
  background: #e0efff;
  height: 436px;
  position: relative;
  overflow: hidden;
}

.hp-hero__inner {
  height: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hp-hero__content {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ---------- 背景层（图 + 视频） ----------
   容器上不要加 isolation/transform：www 原文件里那条规则
   因为一个孤立的 "/" 字符从未生效过，贸然启用会改变已验证的渲染结果。 */
.hp-hero__bgs,
.hp-hero__bg,
.hp-hero__video {
  isolation: isolate;
  will-change: opacity;
}

.hp-hero__video {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hp-hero__bgs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-width: 2048px;
}

/* 左右边缘羽化遮罩：用 DOM 渐变代替 CSS mask，避免遮罩把 logo 洗白 */
.hp-hero__mask-left,
.hp-hero__mask-right {
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  width: 12%;
  pointer-events: none;
}

.hp-hero__mask-left {
  left: 0;
  background: linear-gradient(90deg, #e0efff, transparent);
}

.hp-hero__mask-right {
  right: 0;
  background: linear-gradient(-90deg, #e0efff, transparent);
}

.hp-hero__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* cover 铺满：原图 3840×1134（比 3.39:1），宽屏下按高度缩放会算不出足够宽度
     （1920 宽时只有 1693），左右各留 110px 空缺；cover 改为按宽度撑满、上下裁切。 */
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 1;
  transition: opacity .4s ease-in-out .4s;
}

.hp-hero__bg.active {
  opacity: 1;
  z-index: 2;
  transition: opacity .4s ease-in-out;
}

/* 视频默认隐藏（没有 has-video 的层里本来也不会出现 video 元素） */
.hp-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 同 background：铺满容器再裁切，宽高比不合时不留边 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 有视频的横幅：视频常驻渲染，显隐只交给父级 .hp-hero__bg 的 opacity。
   以前是「激活时把 video 从 visibility:hidden 切成 visible」，切过去的那一瞬间
   浏览器还没把第一帧画出来，底图就先露出来了 —— 也就是「闪一下图片再变视频」。
   模板里这类层的 background-image 已经置 none（见 index.html），所以不再垫图。 */
.hp-hero__bg.has-video .hp-hero__video {
  opacity: 1;
  visibility: visible;
  background-color: #e0efff;
}

/* ---------- 左侧标题列表 ---------- */
.hp-hero__ctrls-wrap {
  flex-shrink: 0;
  width: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  position: absolute;
  z-index: 11;
  left: 48px;
  top: 0;
  padding-top: 56px;
  box-sizing: border-box;
  align-items: center;
}

.hp-hero__ctrls {
  width: 100%;
  position: relative;
  border-right: 2px solid #fff;
}

.hp-hero__ctrl {
  position: relative;
  cursor: pointer;
  width: 100%;
  padding: 14px 12px 14px 0;
  text-align: right;
  box-sizing: border-box;
}

.hp-hero__ctrl + .hp-hero__ctrl {
  margin-top: 12px;
}

.hp-hero__ctrl-inner {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.hp-hero__ctrl-text {
  flex-grow: 1;
  width: fit-content;
  color: #181818;
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all .3s ease-in-out;
}

.hp-hero__ctrl.active .hp-hero__ctrl-text {
  color: #0f62ea;
}

.hp-hero__ctrl-tag {
  flex-shrink: 0;
  margin-right: 8px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  border-radius: 2px;
  background: linear-gradient(90deg, #08f -4.72%, #409cff 48.25%, #217dfd 103.3%);
}

.hp-hero__ctrl-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% + 2px);
  height: 50px;
  background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .4));
  border-right: 2px solid #0f62ea;
  pointer-events: none;
  transition: top .3s linear;
  box-sizing: border-box;
}

.hp-hero__ctrl-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(270deg, #fff, hsla(0, 0%, 100%, 0));
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---------- 右侧内容 ---------- */
.hp-hero__item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  padding: 96px 48px 40px;
  box-sizing: border-box;
  pointer-events: none;
  will-change: opacity, visibility;
  transition: opacity .4s ease-in-out, visibility 0s .4s;
}

.hp-hero__item.active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .4s ease-in-out;
}

.hp-hero__item-content {
  position: relative;
  height: 100%;
  padding-left: 268px;
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
}

.hp-hero__item-title {
  color: #181818;
  font-weight: 500;
  font-size: 36px;
  line-height: 48px;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.hp-hero__item-desc {
  margin-bottom: auto;
  margin-top: 12px;
  color: #253554;
  font-size: 14px;
  line-height: 22px;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.hp-hero__item-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  width: 300px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #0059eb, #2677ff);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #fff;
  box-sizing: border-box;
}

.hp-hero__item-btn,
.hp-hero__item-desc,
.hp-hero__item-title {
  max-width: 500px;
  position: relative;
  z-index: 1;
}

.hp-hero__item-btn-text {
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}

/* 「前往」箭头图标：官方 svg（assets/icon/go.svg）。
   原图是 1024×1024 画布、内容只占 x41.2→982.6 / y347.9→675.1，
   所以文件里 viewBox 已裁到内容边界（941.4×327.2，比例 2.877），
   SVG 自身 14.4×5，CSS 同尺寸 cover，不会变形。
   之前 www 原版引用的 tpm-portal-hero-btn-icon.svg 不存在（404），故改成自带文件。
   2026-10-20：22×8 → 14.4×5（用户反馈太大，按 1x 截图实测目标白形 13×5）。 */
.hp-hero__item-btn-icon {
  display: block;
  width: 14.4px;
  height: 5px;
  background-image: url("../assets/icon/go.svg");
  background-repeat: no-repeat;
  background-size: cover;
  visibility: visible;
  opacity: 1;
  transition: all .3s ease-in-out;
}

/* 按钮悬停高光 */
.hp-hero__item-btn {
  position: relative;
  overflow: hidden;
  --hero-btn-mx: 50%;
  --hero-btn-my: 50%;
}

.hp-hero__item-btn:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease;
  background: radial-gradient(200px circle at var(--hero-btn-mx) var(--hero-btn-my), hsla(0, 0%, 100%, .28), hsla(0, 0%, 100%, 0) 65%);
}

.hp-hero__item-btn:hover:before {
  opacity: 1;
}

.hp-hero__item-btn .hp-hero__item-btn-icon,
.hp-hero__item-btn .hp-hero__item-btn-text {
  position: relative;
  z-index: 2;
}

.hp-hero__item-btn:hover .hp-hero__item-btn-icon {
  transform: translateX(4px);
}

@media screen and (prefers-reduced-motion: reduce) {
  .hp-hero__item-btn:before { transition: none; }
}

/* ---------- 断点 ---------- */
@media screen and (min-width: 769px) {
  .hp-hero__ctrl:hover .hp-hero__ctrl-text { color: #0f62ea; }
}

@media screen and (min-width: 1400px) {
  .hp-hero { height: 461px; }
  .hp-hero__ctrls-wrap { left: 64px; }
  .hp-hero__item { padding: 104px 64px 48px; }
  .hp-hero__item-title { font-size: 40px; line-height: 52px; }
  .hp-hero__item-btn,
  .hp-hero__item-desc,
  .hp-hero__item-title { max-width: 540px; }
}

@media screen and (min-width: 1600px) {
  .hp-hero { height: 500px; }
  .hp-hero__ctrls-wrap { width: 240px; left: 64px; }
  .hp-hero__ctrl { padding: 18px 20px 18px 0; }
  .hp-hero__ctrl-text { font-size: 14px; line-height: 22px; }
  .hp-hero__ctrl-mask { height: 58px; }
  .hp-hero__item-content { padding-left: 288px; }
  .hp-hero__item-title { font-size: 42px; line-height: 56px; }
  .hp-hero__item-btn,
  .hp-hero__item-desc,
  .hp-hero__item-title { max-width: 600px; }
}

@media screen and (min-width: 1808px) {
  .hp-hero__ctrls-wrap { left: calc(50vw - 840px); }
}

@media screen and (min-width: 1920px) {
  .hp-hero__item { padding: 104px 120px 48px; }
  .hp-hero__item-title { font-size: 48px; line-height: 56px; }
  .hp-hero__item-btn,
  .hp-hero__item-desc,
  .hp-hero__item-title { max-width: 720px; }
  .hp-hero__item-btn { width: 340px; padding: 12px 16px; margin-top: 40px; }
}

/* ---------- 移动端：换成整屏滑动 + 底部页码条 ---------- */
.hp-mobile { display: none; }

@media screen and (max-width: 768px) {
  .hp-desktop { display: none; }
  /* touch-action 写在整块 Hero 上：页码条也算拖动区，横滑一律交给 JS，
     竖滑仍然滚页面（只写在 swiper 上的话，手指落在页码条附近会有盲区）。
     cursor 是给电脑上缩窗口/响应式模式用鼠标拖的提示。 */
  .hp-mobile { display: block; touch-action: pan-y; }
  .hp-mobile .hp-hero__swiper { cursor: grab; }
  .hp-mobile .hp-hero__swiper:active { cursor: grabbing; }

  /* 2026-10-19：250 → 300。手机端导航浮在 Hero 顶部，原来只露出 150px，
     标题又紧贴导航（12px），观感偏挤；拉高后标题上方留出 42px 呼吸位。 */
  .hp-hero { height: 300px; }
  /* touch-action:pan-y = 横滑交给 JS 跟手拖动，竖滑仍然滚动页面（不加的话
     浏览器会把横滑判成滚动手势，touchmove 中途被 cancel，手感像「划不动」） */
  .hp-hero__swiper {
    height: 100%; overflow: hidden; position: relative;
    touch-action: pan-y;
    -webkit-user-select: none; user-select: none;
  }
  .hp-hero__swiper .swiper-wrapper {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .hp-hero__swiper .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; }

  /* visibility:visible 必须显式写上：基础规则是 hidden，只有 .active 才恢复，
     而移动端这套 slide 里的 <a> 没有 .active，不写就整个 banner 空白。 */
  .hp-mobile .hp-hero__swiper .hp-hero__item {
    position: relative;
    opacity: 1;
    visibility: visible;
    display: block;
    height: 100%;
    padding: 32px 24px 44px;
    /* 后台传的横幅图尺寸并不固定（实测有 3840×960、2880×750、3840×1134）。
       以前写死 background-size:768px auto —— 宽度锁 768，高度按原图比例算，
       3840×960 的图只有 192px 高，剩下的 108px 只能是纯色底，
       换一张图比例一变，上下留白也跟着变，看起来就是「没按图片大小拉伸」。
       改成 cover：无论原图什么尺寸，都按 390×300 这个框铺满（等比放大 + 裁切，
       不拉伸变形），横竖都不会露底色。 */
    background-size: cover;
    background-position: 50% 50%;
    background-color: #e8eff9;
    background-repeat: no-repeat;
    transition: none;
    box-sizing: border-box;
    max-width: none;
    pointer-events: auto;
    /* iOS 长按链接会弹「拷贝/预览」菜单、打断跟手拖动 */
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
  }

  .hp-hero__item-title {
    color: #181818;
    font-size: 32px;
    line-height: 48px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
  }

  /* 描述文案：手机上没有横向空间，长文案要换行显示（原来是 nowrap + 省略号，
     长一点就整段被截掉）。最多 4 行兜底，防止超长文案压到下面的页码条
     （当前最长的一条 3 行，离页码条还有 50px）。 */
  .hp-mobile .hp-hero__item-desc {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    margin-top: 12px;
    margin-bottom: 0;
  }

  .hp-hero__pagination {
    z-index: 1;
    position: absolute;
    left: 24px;
    bottom: 18px;
    width: calc(100% - 48px);
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }

  .hp-hero__pagination-num {
    flex-shrink: 0;
    color: rgba(0, 0, 0, .35);
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
  }

  .hp-hero__pagination-current { color: #000; }
  .hp-hero__pagination-bullets { width: 0; flex-grow: 1; height: 12px; margin-left: 16px; display: flex; }
  .hp-hero__pagination-bullet {
    width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
  }
  .hp-hero__pagination-bullet:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    bottom: -8px;
  }
  .hp-hero__pagination-bullet:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(0, 0, 0, .1);
  }
  .hp-hero__pagination-bullet.is-active:after { background: #000; }

  /* 移动端不需要左右羽化（背景是整块铺的） */
  .hp-hero__mask-left,
  .hp-hero__mask-right { display: none; }
}

@media screen and (max-width: 600px) {
  .hp-mobile .hp-hero__item { padding: 32px 16px 44px; }
  .hp-mobile .hp-hero__item-title { color: #181818; font-size: 28px; line-height: 36px; }
  .hp-hero__pagination { left: 16px; bottom: 16px; width: calc(100% - 32px); }
}

/* ---------- 768px 以下左边列表消失，内容不再让位 ---------- */
@media screen and (max-width: 768px) {
  .hp-mobile .hp-hero__item-content { padding-left: 0; }
}

/* ==========================================================================
   导航浮层：Hero 内容避让
   --------------------------------------------------------------------------
   首页 body 带 has-hero 时，正文不再让出 --navheight，Hero 顶到 y=0，
   导航（fixed，62px，半透明白）压在 Hero 上面。

   ★ 桌面端不再在这里二次补偿。
     上一版是「item padding-top 56 + item-content padding-top 80」、
     列表 「padding-top 86」，看着也能用，但和源站对不上：
       源站 item padding-top 104 + content 24 = 128（标题墨迹 y=135）
       旧版 56 + 80 = 136                      （标题墨迹 y=143，低了 8px）
       源站 ctrls-wrap padding-top 56（列表中心比旧版 86 高 15px）
     2026-10-19 已按源站的比例改回（96/104 + 24 + 56），
     这层补偿就多余了，留空只给移动端用。
   ========================================================================== */
body.has-hero .hp-mobile .hp-hero__swiper .hp-hero__item,
body#index .hp-mobile .hp-hero__swiper .hp-hero__item {
  padding-top: calc(var(--wapnavheight, 50px) + 42px);
}