/* =============================================================================
   bug261021 官网前台修复（r32b）：首屏轮播 / 数字滚动 / 招聘页 / 简历上传

   为什么单独开一个文件：portal.css 与 portal-extra.css 是整站样式，多个分支同时在改，
   把本轮规则塞进去容易互相冲突；而本文件在 partials/head.html 里排在 r29/r30/r31 之后，
   天然后加载、可覆盖旧规则，又不动任何既有文件。

   作用域：全部规则前缀 `.pg-home` / `.pg-jobs`。body 的 class 由
   resource/template/portal/partials/body-open.html 输出 `pg-@{.Page.PageKey}`
   （首页 page_key=home、招聘页 page_key=jobs），所以这些规则只命中对应页面，
   不会把首页的轮播样式带到资讯详情页。
   ============================================================================= */

/* =============================================================================
   一、首页首屏轮播（index.html 的 .hero__slides + .hero__dots）
   ============================================================================= */

/* 整图可点击：有 href 的 slide 是 <a>，浏览器默认已是手型；这里显式声明，
   避免后续有人给 .hero__slide 加 cursor 值后整图失去可点击暗示。 */
.pg-home .hero__slide[href] { cursor: pointer; }

/* Ken Burns（缓慢推近）。
   为什么用「全体动画 + 播放/暂停」而不是给 .is-active 加 transition：
   轮播每 5s 换一张，若靠 .is-active 上的 transition 启动缩放，第一张图在首帧
   没有「上一帧」可比，只能直接以放大后的状态出现（看不到动效），且退场时
   移除 class 会把 transform 瞬间打回原值，在 0.9s 淡出里能看到一次「跳动」。
   改成所有 slide 都挂一个 alternate 无限循环的动画、非当前张 animation-play-state:
   paused：当前张恢复播放（从暂停处继续，既不跳、也不用重启），退场张就地暂停，
   动效可以无限次复用。 */
@keyframes r32b-kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.08); }
}
.pg-home .hero__slide {
  animation: r32b-kenburns 18s ease-in-out infinite alternate both;
  animation-play-state: paused;
  will-change: transform, opacity;
}
.pg-home .hero__slide.is-active { animation-play-state: running; }

/* 底部居中指示圆点。
   位置：hero 的 padding-bottom 是 96px，圆点固定在距底 22px 处，落在留白里，
   不会压到 .hero__facts 的数据。z-index 高于 .hero::after 的网格纹理与
   .hero__slides-mask 遮罩（二者都是普通叠层），pointer-events 只开在圆点上。 */
.pg-home .hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.pg-home .hero__dot {
  pointer-events: auto;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(255, 255, 255, .26);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: width .3s var(--ease), background-color .3s var(--ease),
              border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.pg-home .hero__dot:hover {
  background: rgba(255, 255, 255, .62);
  border-color: #fff;
}
/* 当前张：拉长成胶囊 + 金色，与首屏主按钮、案例头图的品牌色保持同一套 */
.pg-home .hero__dot.is-active {
  width: 26px;
  background: var(--gold-500);
  border-color: var(--gold-500);
  box-shadow: 0 0 12px rgba(250, 193, 0, .55);
}

/* 首屏按钮 hover：位移 + 轻微放大 + 发光。portal.css 里 .btn:hover 只有 1px 上移，
   .btn--gold:hover 只换阴影，观感偏弱；这里补上平滑过渡与更明确的反差。 */
.pg-home .hero .btn {
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              background-color .28s var(--ease), border-color .28s var(--ease),
              color .28s var(--ease);
}
.pg-home .hero .btn:hover { transform: translateY(-2px) scale(1.03); }
.pg-home .hero .btn--gold:hover { box-shadow: 0 16px 34px rgba(250, 193, 0, .48); }
/* 次要按钮：白底反转（portal.css 已做）+ 白光晕，两个按钮 hover 强度一致 */
.pg-home .hero .btn--outline:hover {
  background: #fff;
  color: var(--gold-600);
  border-color: #fff;
  box-shadow: 0 12px 26px rgba(255, 255, 255, .22);
}

/* =============================================================================
   二、首屏数字滚动 + 说明文字淡入上滑（index.html 的 .hero__facts）
   为什么由 JS 先加 .is-armed 再隐藏 label：JS 没加载或执行出错时容器不会带
   .is-armed，label 保持可见，不会出现「数字区只剩数字没有说明」的空白。
   ============================================================================= */
.pg-home .hero__facts.is-armed .fact__label {
  opacity: 0;
  transform: translateY(10px);
}
.pg-home .hero__facts.is-in .fact__label {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
/* 四条依次出现（60ms 递进），避免四个说明同时弹出显得生硬 */
.pg-home .hero__facts.is-in > div:nth-child(2) .fact__label { transition-delay: .06s; }
.pg-home .hero__facts.is-in > div:nth-child(3) .fact__label { transition-delay: .12s; }
.pg-home .hero__facts.is-in > div:nth-child(4) .fact__label { transition-delay: .18s; }

/* =============================================================================
   三、人才招聘页（jobs.html）
   ============================================================================= */

/* 标签页上方留白：页面头 h1 与胶囊按钮之间原来只有 8px（jobs.html 内联样式
   .jobs-tabs{margin:8px auto 28px}），视觉上贴着标题；加高到 26px，下方同步加宽到 34px。 */
.pg-jobs .jobs-tabs { margin: 26px auto 34px; }

/* 应聘方式信息区：
   根因是 .Block.jobs_apply 的明细行在模板里只渲染了 <dd>（没有 <dt>），而 portal.css
   的 .kv 是 `grid-template-columns:104px 1fr`——于是每个 dd 被塞进 104px 的第一列，
   「咨询电话 400-000-0000（09:00 - 18:30）」这类长文本被折成三四行。
   修法：给这段 dd 列表单独一个 .kv--stack（模板同步加 class），改成整行堆叠；
   同时把左栏从 1fr 放宽到 1.12fr、间距 52px 收到 40px，让邮箱/电话/时间段都能一行放下。 */
.pg-jobs .jobs-apply .two-col {
  grid-template-columns: 1.12fr .88fr;
  gap: 40px;
  align-items: start;
}
.pg-jobs .jobs-apply .kv.kv--stack { display: block; }
.pg-jobs .jobs-apply .kv.kv--stack dd {
  margin: 0;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-700);
  border-bottom: 1px dashed var(--line);
}
.pg-jobs .jobs-apply .kv.kv--stack dd:last-child { border-bottom: 0; }

/* 福利待遇胶囊：数据改成「一行记录 + items 六条」后仍要一行内自动换行、间距 10px。
   .chips 本身已是 flex-wrap:wrap + gap:10px，这里只把外边距归零并兜住换行。 */
.pg-jobs .benefit-wrap .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}

/* =============================================================================
   四、招聘页简历附件上传组件（partials/apply-form.html）
   原来是 .photo 占位框（124px 高的灰块 + 「请发送至招聘邮箱」），现在换成真正的
   文件选择：可见的 label 包住隐藏的原生 input，点击/拖拽都触发系统文件选择器。
   ============================================================================= */
.pg-jobs .upload { position: relative; }
/* 原生 file input 不能用 display:none——那样键盘 Tab 和 label 关联在部分浏览器会失效；
   保留 1px 尺寸 + opacity:0，既不可见也仍可聚焦。 */
.pg-jobs .upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.pg-jobs .upload__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 124px;
  padding: 18px 20px;
  border: 1.5px dashed #D8C7A4;
  border-radius: 12px;
  background: #FCF8EF;
  color: var(--ink-500);
  text-align: center;
  cursor: pointer;
  transition: border-color .22s var(--ease), background-color .22s var(--ease),
              box-shadow .22s var(--ease);
}
.pg-jobs .upload__box:hover,
.pg-jobs .upload__box.is-drag {
  border-color: var(--gold-500);
  background: #FFF9E8;
  box-shadow: 0 8px 22px rgba(176, 123, 44, .12);
}
.pg-jobs .upload__box.is-filled {
  border-style: solid;
  border-color: var(--gold-500);
  background: #FFF9E8;
}
.pg-jobs .upload__ico {
  width: 26px;
  height: 26px;
  color: var(--gold-600);
}
.pg-jobs .upload__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-800);
  line-height: 1.5;
  word-break: break-all;
}
.pg-jobs .upload__hint {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-400);
}
/* 上传成功后显示在文件名下面的「重新选择」暗示，不额外占一行高度 */
.pg-jobs .upload__box.is-filled .upload__hint { color: var(--ink-500); }

/* =============================================================================
   五、动效降级：prefers-reduced-motion 下关掉所有位移与缩放
   （数字滚动由 portal-r32d.js 判断后直接跳过，这里只管 CSS 动效）
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .pg-home .hero__slide,
  .pg-home .hero__slide.is-active {
    animation: none;
    transform: none;
  }
  .pg-home .hero .btn,
  .pg-home .hero .btn:hover { transition: none; transform: none; }
  .pg-home .hero__dot { transition: none; }
  .pg-home .hero__facts.is-armed .fact__label {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pg-jobs .upload__box { transition: none; }
}

/* 窄屏：圆点抬高一点避免贴边；信息区回归单列（portal.css 在 900px 已有 .two-col 单列规则，
   这里显式声明只是为了让 1.12fr/.88fr 的覆盖不跟窄屏规则打架）。 */
@media (max-width: 900px) {
  .pg-jobs .jobs-apply .two-col { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .pg-home .hero__dots { bottom: 14px; }
}