/* ===== 荣誉与资质墙（晾衣绳）· about 页专用 =====
 * 绳静止、卡片沿绳滑动并各自轻摆；纯展示，不响应鼠标事件
 * 本文件独立，不覆盖任何共享基础样式；放在 about.css 之后加载
 */

/* —— 模块文案 —— */
.ab-honors-lead{
  margin-top:14px; font-size:16px; line-height:1.65; color:var(--muted,#7a7a7a);
  max-width:720px;
}

/* —— 舞台 —— */
.hw-wall{position:relative; margin-top:34px}
/* 宽屏时由 js/honors-wall.js 精确计算：把绳的可视两端对齐到导语那一行 */
.hw-stage{position:relative; margin-top:14px; overflow:hidden}
.hw-stage + .hw-stage{margin-top:-130px}   /* 两绳更近 */
.hw-rope{position:relative}
.hw-rope svg.wire{position:absolute; inset:0; width:100%; height:100%; overflow:visible}

/* 卡片层：两端淡出遮住循环接缝；整体不吃鼠标事件 */
.hw-cards{
  position:absolute; inset:0; pointer-events:none; user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
}

/* 滑动体：沿绳路径运动，自动贴合绳的切线 */
.hw-runner{
  position:absolute; left:0; top:0; width:0; height:0;
  offset-rotate:auto;
  animation:hw-travel var(--travel,58s) linear infinite;
}
@keyframes hw-travel{from{offset-distance:0%} to{offset-distance:100%}}
.hw-stage.rev .hw-runner{animation-direction:reverse}   /* 下排反向 */

/* 卡片：以夹点为轴摆动 */
.hw-card{
  position:absolute; left:calc(var(--cw) / -2); top:-16px; width:var(--cw);
  transform-origin:50% 16px; rotate:var(--r,0deg);
  animation:hw-sway var(--dur,3.8s) ease-in-out var(--delay,0s) infinite alternate;
}
@keyframes hw-sway{
  from{rotate:calc(var(--r,0deg) - var(--amp,2.2deg))}
  to  {rotate:calc(var(--r,0deg) + var(--amp,2.2deg))}
}

/* 夹子 */
.hw-pin{
  position:absolute; left:50%; top:2px; width:26px; height:38px; margin-left:-13px;
  border-radius:7px;
  background:linear-gradient(180deg,#3E9FB5 0%,#5BB98E 55%,#7FC862 100%);
  box-shadow:0 3px 6px rgba(29,29,31,.20),
             inset -2px -3px 0 rgba(0,0,0,.10),
             inset 2px 2px 0 rgba(255,255,255,.18);
}
.hw-pin::before{
  content:""; position:absolute; left:50%; top:9px; width:13px; height:13px; margin-left:-6.5px;
  border:3px solid #fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.14);
}

/* 卡片本体：定高，保证整排齐平 */
.hw-body{
  margin-top:34px; background:#fff; border:1px solid #e0e0e0; border-radius:18px;
  padding:18px 18px 16px; height:176px; overflow:hidden;
  box-shadow:0 10px 28px rgba(29,29,31,.10), 0 2px 6px rgba(29,29,31,.06);
  display:flex; flex-direction:column; gap:10px;
}
.hw-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.hw-ico{flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center}
.hw-ico svg{width:20px; height:20px; display:block}
.hw-badge{font-size:11px; letter-spacing:.04em; padding:3px 10px; border-radius:999px; white-space:nowrap}
.hw-name{
  font-size:16px; font-weight:600; line-height:1.42; letter-spacing:-.2px; color:#1d1d1f;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hw-org{font-size:12.5px; color:#7a7a7a; margin-top:auto}

/* 级别配色：描边 / 胶囊 / 图标 三处一致 */
.hw-body.l1{border-color:rgba(0,102,204,.32)}
.hw-body.l2{border-color:rgba(52,199,89,.45)}
.hw-body.l3{border-color:rgba(217,59,43,.40)}
.hw-body.l4{border-color:rgba(0,102,204,.32)}
.hw-body.l1 .hw-ico{color:#0066CC}
.hw-body.l2 .hw-ico{color:#1D7A3D}
.hw-body.l3 .hw-ico{color:#D93B2B}
.hw-body.l4 .hw-ico{color:#0066CC}
.hw-badge.n1{color:#0066CC; background:rgba(0,102,204,.08); border:1px solid rgba(0,102,204,.22)}
.hw-badge.n2{color:#1D7A3D; background:rgba(52,199,89,.10); border:1px solid rgba(52,199,89,.28)}
.hw-badge.n3{color:#D93B2B; background:rgba(217,59,43,.09); border:1px solid rgba(217,59,43,.26)}
.hw-badge.n4{color:#0066CC; background:rgba(0,102,204,.09); border:1px solid rgba(0,102,204,.22)}

/* 不支持 offset-path 时的静态兜底 */
.hw-fallback .hw-runner{position:absolute; animation:none;
  transform:translate(var(--fx), var(--fy)) rotate(var(--fr))}

/* —— 知识产权数据条 —— */
.ab-ip{
  margin-top:38px; display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
  background:#fff; border:1px solid #e0e0e0; border-radius:18px; padding:24px 26px;
}
.ab-ip-item{border-left:1px solid #f5f5f7; padding-left:18px}
.ab-ip-item:first-child{border-left:none; padding-left:0}
.ab-ip-item b{display:block; font-size:30px; font-weight:600; letter-spacing:-.5px; color:#1d1d1f; font-variant-numeric:tabular-nums}
.ab-ip-item span{display:block; font-size:13px; color:#7a7a7a; margin-top:4px}

/* count-up 进入动效（仅 JS 就绪时隐藏，无 JS / 旧浏览器仍显示最终值） */
.ab-ip.js-count .ab-ip-item{opacity:0; transform:translateY(14px); transition:opacity .6s cubic-bezier(0.16,1,0.3,1), transform .6s cubic-bezier(0.16,1,0.3,1); transition-delay:calc(var(--i,0)*90ms)}
.ab-ip.js-count.is-in .ab-ip-item{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .ab-ip.js-count .ab-ip-item{opacity:1; transform:none; transition:none}
}

.ab-honors-note{margin-top:16px; font-size:13px; line-height:1.7; color:#7a7a7a}

/* —— 窄屏降级：绳墙 → 单列网格 —— */
.hw-grid{display:none}
@media (max-width: 760px){
  .hw-stage{display:none}
  .hw-grid{display:grid; grid-template-columns:1fr; gap:12px; max-width:560px; margin:0 auto}
  .ab-ip{grid-template-columns:repeat(2,1fr)}
  .ab-ip-item{border-left:none; padding-left:0}
}

/* —— 无障碍：减淡动效 —— */
@media (prefers-reduced-motion: reduce){
  .hw-runner,.hw-card{animation:none !important}
}