/* ==========================================================================
   p-honor.css — 荣誉资质页专属（几何数值取自 04_荣誉资质.psd，1rem=100px）
   内容区 702-1843（高 11.41rem），证书 417x578，台子全宽横贯
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 外壳校正（与 download / join 一致的「关于我们」系列标准）
      banner：PSD 已把压暗层合进图里，去掉 CSS 叠加遮罩；标题 80px，红块压在字后
   -------------------------------------------------------------------------- */
/* banner 压暗交给 sub.css 的统一遮罩（30.2% 纯黑），素材本身不含压暗与文字 *//* banner 标题块（80px + 红斜块压在字后）统一由 sub.css 定义，本页不再覆写 */

/* banner 与二级导航之间 40px 留白（PSD 二级 641-702） */

.honor {
  position: relative;
  height: 11.43rem;
  background: #fff;
  overflow: hidden;
}
.honor .container {
  position: relative;
  height: 100%;
}

/* 区块标题：y821 */
.honor__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.18rem;
  text-align: center;
  font-size: 0.48rem;
  letter-spacing: 0.01rem;
  line-height: 1;
  font-weight: 400;
  color: var(--c-ink);
}

/* 三张证书（含亚克力框/投影/台面衔接）：x228/758/1288 y931，417x578
   边框为装饰层（窗口镂空），证书扫描件垫在下方，可整张替换 */
.honor__item {
  position: absolute;
  top: 2.30rem;
  width: 4.17rem;
}
.honor__item:nth-of-type(1) { left: 0.70rem; }
.honor__item:nth-of-type(2) { left: 6.00rem; }
.honor__item:nth-of-type(3) { left: 11.30rem; }
.honor__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 417 / 578;
}
/* 证书窗口：框内 (44,46) 起，313x459（占框宽 75.06%、高 79.4%） */
.honor__cert {
  position: absolute;
  left: 10.55%;
  top: 7.96%;
  width: 75.06%;
  height: auto;
  transition: opacity 0.22s ease;
}
.honor__deco {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* 换页时的淡入淡出 */
.honor__list.is-fading .honor__cert,
.honor__list.is-fading .honor__name { opacity: 0.2; }
.honor__name {
  display: block;
  margin-top: 0.59rem;
  text-align: center;
  font-size: 0.2rem;
  line-height: 1;
  color: var(--c-ink);
  transition: opacity 0.22s ease;
}
/* 文字中心与证书中心差 ~8px，按 PSD 左缘定位 */
.honor__item:nth-of-type(1) .honor__name { margin-left: -0.14rem; }
.honor__item:nth-of-type(2) .honor__name { margin-left: -0.125rem; }
.honor__item:nth-of-type(3) .honor__name { margin-left: -0.10rem; }

/* 展台：x72-1847 y1459 —— 相对整屏定位（放在 .container 之外，
   百分比才对得上 1920 稿的 3.75% / 92.45%） */
.honor__shelf {
  position: absolute;
  left: 3.75%;
  top: 7.58rem;
  width: 92.45%;
  height: auto;
}

/* 翻页控件：左侧上一组 / 中间 01/03 / 右侧下一组。
   常态白底 + 浅灰描边 + 浅灰箭头，hover / 键盘聚焦才变红实心。
   PSD 圆心 x822 / 1039 y1696，直径 58~60 */
.honor__btn {
  position: absolute;
  top: 9.65rem;
  display: grid;
  place-items: center;
  width: 0.58rem;
  height: 0.58rem;
  padding: 0;
  border: 1px solid #dcdcdc;
  border-radius: 50%;
  background: #fff;
  color: #b8b8b8;
  cursor: pointer;
  transition: background-color 0.22s ease, border-color 0.22s ease,
    color 0.22s ease, box-shadow 0.22s ease;
}
/* 箭头用边框画，靠 currentColor 跟着按钮颜色走 */
.honor__btn::before {
  content: "";
  width: 0.13rem;
  height: 0.13rem;
  border-left: 0.02rem solid currentColor;
  border-bottom: 0.02rem solid currentColor;
}
.honor__btn--prev {
  left: 6.93rem;
  transform: translateX(-50%);
}
.honor__btn--prev::before { transform: rotate(45deg) translate(0.02rem, -0.02rem); }
.honor__btn--next {
  left: 9.11rem;
  transform: translateX(-50%);
}
.honor__btn--next::before { transform: rotate(-135deg) translate(0.02rem, -0.02rem); }
.honor__btn:hover,
.honor__btn:focus-visible {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  box-shadow: 0 0.1rem 0.24rem rgba(216, 10, 16, 0.28);
}
.honor__count {
  position: absolute;
  left: 8.02rem;
  top: 9.86rem;
  transform: translateX(-50%);
  font-family: var(--ff-en);
  font-size: 0.24rem;
  line-height: 1;
  color: #666;
}
.honor__count b { color: var(--c-accent); font-weight: 400; }
.honor__btn:focus-visible {
  outline: 0.02rem solid var(--c-primary);
  outline-offset: 0.06rem;
}

/* ---- 证书放大（灯箱，节点由 p-honor.js 建在 body 末尾） ---- */
.honor__frame { cursor: zoom-in; }
.hlb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 12, 22, 0.84);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: hlb-in 0.2s ease both;
}
.hlb[hidden] { display: none; }
.hlb:focus { outline: none; }
@keyframes hlb-in { from { opacity: 0; } to { opacity: 1; } }
.hlb__fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.24rem;
  margin: 0;
  max-width: 86vw;
  max-height: 90vh;
}
/* 竖版证书受高度制约，放开上限、按 max-height 顶满，才叫「放大」 */
.hlb__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 86vw;
  max-height: calc(90vh - 0.6rem);
  background: #fff;
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.5);
}
.hlb__cap {
  font-size: 0.2rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
}
.hlb__nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 0.62rem;
  height: 0.62rem;
  margin-top: -0.31rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hlb__nav::before {
  content: "";
  width: 0.14rem;
  height: 0.14rem;
  border-left: 0.02rem solid currentColor;
  border-bottom: 0.02rem solid currentColor;
}
.hlb__prev { left: 3vw; }
.hlb__prev::before { transform: rotate(45deg) translate(0.02rem, -0.02rem); }
.hlb__next { right: 3vw; }
.hlb__next::before { transform: rotate(-135deg) translate(0.02rem, -0.02rem); }
.hlb__nav:hover { background: var(--c-accent); border-color: var(--c-accent); }
.hlb__close {
  position: absolute;
  top: 3vh;
  right: 3vw;
  width: 0.56rem;
  height: 0.56rem;
  color: #fff;
  font-size: 0.34rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}
.hlb__close:hover { color: var(--c-accent); }
.hlb__close::before,
.hlb__close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.26rem;
  height: 0.02rem;
  margin: -0.01rem 0 0 -0.13rem;
  background: currentColor;
}
.hlb__close::before { transform: rotate(45deg); }
.hlb__close::after { transform: rotate(-45deg); }
body.hlb-open { overflow: hidden; }

/* 响应式 */
@media (max-width: 1024px) {
  .honor {
    display: flex;
    flex-direction: column;
    height: auto;
    padding-block: 0.6rem 0.8rem;
  }
  .honor .container { order: 1; height: auto; }
  .honor__title,
  .honor__item,
  .honor__btn,
  .honor__count { position: static; transform: none; }
  .honor__title { font-size: 0.36rem; }
  .honor__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem 0.24rem;
    margin-top: 0.5rem;
  }
  .honor__item { width: auto; }
  .honor__name { margin-top: 0.2rem; }
  .honor__shelf {
    position: static;
    order: 2;
    width: 92.45%;
    margin: 0.4rem auto 0;
  }
  .honor__ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.24rem;
    margin-top: 0.5rem;
  }
  .honor__btn { width: 0.5rem; height: 0.5rem; }
}

@media (max-width: 768px) {
  .honor { padding-block: 0.5rem 0.7rem; }
  .honor__title { font-size: 0.32rem; }
  .honor__list { grid-template-columns: 1fr; }
  .honor__name { font-size: 0.24rem; }
  /* 翻页按钮与灯箱控件用 px：窄屏根字号随视口变，rem 会把触控区算得忽大忽小 */
  .honor__ctrl { gap: 18px; }
  .honor__btn { width: 44px; height: 44px; }
  .honor__btn::before { width: 10px; height: 10px; }
  .honor__count { font-size: 16px; }
  /* 窄屏：箭头从两侧挪到下方居中——侧边会压在白色证书上，白描边看不见 */
  .hlb { padding-bottom: 74px; }
  .hlb__nav {
    top: auto;
    bottom: 20px;
    width: 42px;
    height: 42px;
    margin-top: 0;
  }
  .hlb__nav::before { width: 10px; height: 10px; }
  .hlb__prev { left: calc(50% - 50px); }
  .hlb__next { right: auto; left: calc(50% + 8px); }
  .hlb__close { top: 10px; right: 10px; width: 40px; height: 40px; }
  .hlb__img { max-width: 88vw; max-height: calc(88vh - 140px); }
  .hlb__fig { gap: 14px; }
  .hlb__cap { font-size: 13px; }
}