/* ============================================================
   Steed · Certificate carousel (docflow)
   浅灰画布 + 白纸卡；橙只做点线（与全站 V5 语言一致）
   ============================================================ */

.docs{position:relative;overflow:hidden}

.df-flow{
  --df-h:clamp(300px,32vw,468px);
  position:relative;margin-top:8px;
}

/* 舞台 */
.df-view{
  overflow:hidden;position:relative;
  touch-action:pan-y;cursor:grab;
  padding:22px 0 30px;
  -webkit-user-select:none;user-select:none;
}
.df-view.is-dragging{cursor:grabbing}
.df-view.is-dragging .df-slide{transition:none}

.df-track{
  display:flex;align-items:center;
  gap:clamp(16px,2.4vw,34px);
  position:relative;
  will-change:transform;
}

/* 单张 */
.df-slide{
  flex:0 0 auto;margin:0;height:var(--df-h);
  opacity:.42;transform:scale(.9);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  cursor:pointer;
}
.df-slide.is-wide{height:calc(var(--df-h) * .68)}
.df-slide.is-active{opacity:1;transform:scale(1)}

.df-paper{
  position:relative;height:100%;
  background:#fff;border-radius:14px;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 22px 48px -24px rgba(0,0,0,.42);
  padding:9px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* ⚠️ picture 必须显式给高度：它是 flex item 且默认 display:inline，
   不给高度时里面的 img 百分比高度会退化成原始尺寸、把纸卡撑破 */
.df-paper picture{
  height:100%;display:flex;align-items:center;justify-content:center;
}
.df-paper img{
  height:100%;width:auto;max-height:100%;display:block;
  border-radius:8px;
}

/* 失效期徽标（只给在有效期内的证挂） */
.df-badge{
  position:absolute;left:14px;top:14px;z-index:2;
  padding:5px 10px;border-radius:100px;
  background:rgba(255,87,34,.10);
  border:1px solid rgba(255,87,34,.28);
  color:var(--orange-d,#E64A19);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* 全屏提示（只在当前页出现） */
.df-zoom{
  position:absolute;right:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:100px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.07);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:11px;font-weight:600;color:var(--ink);
  opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.df-slide.is-active .df-zoom{opacity:1;transform:none}
.df-zoom svg{width:13px;height:13px}
@media (max-width:760px){.df-zoom{display:none}}

/* 卡片标题仅给读屏用（视觉版在下方信息板） */
.df-slide-cap{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.df-kind{display:none}

/* 灯箱自带的放大徽标在这个组件里不显示（我们自己有提示） */
.df-slide .ph-hint{display:none!important}

/* 左右翻页 */
.df-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:52px;height:52px;border-radius:50%;border:none;padding:0;
  background:rgba(255,255,255,.92);color:var(--ink);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 8px 26px -10px rgba(0,0,0,.38),0 1px 0 rgba(0,0,0,.04);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:0;
  transition:transform .25s var(--ease),background .25s var(--ease),opacity .25s var(--ease);
}
.df-nav svg{width:19px;height:19px}
.df-nav:hover{transform:translateY(-50%) scale(1.07);background:#fff}
.df-nav:active{transform:translateY(-50%) scale(.96)}
.df-nav.is-prev{left:clamp(2px,1.4vw,20px)}
.df-nav.is-next{right:clamp(2px,1.4vw,20px)}
.df-nav:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* 圆点 */
.df-dots{
  display:flex;justify-content:center;align-items:center;gap:8px;
  flex-wrap:wrap;margin-top:6px;
}
.df-dot{
  width:7px;height:7px;padding:0;border:none;border-radius:50%;
  background:rgba(0,0,0,.16);cursor:pointer;
  transition:all .32s var(--ease);
}
.df-dot:hover{background:rgba(0,0,0,.32)}
.df-dot.is-on{width:24px;border-radius:100px;background:var(--orange)}
.df-dot:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* 当前证书信息板 */
.df-meta{
  max-width:720px;margin:30px auto 0;text-align:center;
  padding:24px 26px 22px;border-radius:20px;
  background:var(--surface,#fff);
  border:1px solid var(--line,rgba(0,0,0,.08));
  box-shadow:0 18px 44px -30px rgba(0,0,0,.3);
}
.df-meta-kind{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray-2,#86868b);margin-bottom:10px;
}
.df-meta-title{
  font-size:17.5px;font-weight:700;line-height:1.35;color:var(--ink);
  letter-spacing:-.015em;margin-bottom:9px;
}
.df-meta-issuer{font-size:13px;line-height:1.5;color:var(--gray,#6e6e73)}
.df-meta-num{
  font-size:12.5px;line-height:1.5;color:var(--gray-2,#86868b);
  margin-top:8px;font-variant-numeric:tabular-nums;
}
.df-meta-count{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line,rgba(0,0,0,.08));
  font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--gray-3,#a1a1a6);
}
.df-meta-count b{color:var(--ink);font-weight:700}

/* 提示行 */
.df-foot{
  max-width:720px;margin:22px auto 0;text-align:center;
  font-size:12.5px;line-height:1.65;color:var(--gray-2,#86868b);
}
.df-foot b{color:var(--ink-2,#424245);font-weight:600}

/* 响应式 */
@media (max-width:1180px){
  .df-flow{--df-h:clamp(280px,40vw,420px)}
  .df-nav{width:46px;height:46px}
}
@media (max-width:900px){
  .df-flow{--df-h:clamp(250px,52vw,340px)}
  .df-track{gap:14px}
  .df-view{padding:16px 0 22px}
  .df-nav{width:40px;height:40px}
  .df-nav svg{width:16px;height:16px}
  .df-nav.is-prev{left:0}
  .df-nav.is-next{right:0}
  .df-meta{padding:20px 18px;margin-top:24px}
  .df-meta-title{font-size:15.5px}
}
@media (max-width:520px){
  .df-flow{--df-h:min(74vw,300px)}
  .df-track{gap:11px}
  .df-dot{width:6px;height:6px}
  .df-badge{left:9px;top:9px;font-size:9.5px;padding:4px 8px}
}

@media (prefers-reduced-motion:reduce){
  .df-slide,.df-zoom,.df-dot,.df-nav{transition:none}
}