/* ============================================================
   影像家 · 作品展示页（gallery.html）
   滚动叙事 + 照片网格 + 全平台灯箱
   只消费 style.css 的设计令牌，不覆盖全站样式
   ============================================================ */

/* ---------- Hero ---------- */
.wk-hero{position:relative;margin-top:var(--header-h);min-height:clamp(420px,62vh,660px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--bg-deep)}
.wk-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.52) saturate(.92) contrast(1.03)}
.wk-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.62) 0%,rgba(10,10,10,.18) 40%,rgba(10,10,10,.92) 100%)}
.wk-hero-in{position:relative;z-index:2;width:100%;max-width:var(--container-max);
  margin:0 auto;padding:0 20px clamp(44px,7vh,86px)}
.wk-hero-kicker{font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:16px}
.wk-hero h1{font-family:var(--font-serif);font-weight:700;line-height:1.14;
  font-size:clamp(2.1rem,6.4vw,3.6rem);margin-bottom:14px}
.wk-hero p{max-width:560px;color:var(--text-secondary);font-size:clamp(.95rem,2.4vw,1.06rem);line-height:1.85}
.wk-hero-cue{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;z-index:2;
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-muted)}
.wk-hero-cue i{display:block;width:1px;height:38px;margin:8px auto 0;
  background:linear-gradient(var(--gold-light),transparent)}

/* ---------- 序 ---------- */
.wk-prologue{padding:clamp(56px,9vw,104px) 20px;text-align:center}
.wk-prologue-in{max-width:760px;margin:0 auto}
.wk-prologue .wk-mark{font-family:var(--font-serif);font-size:clamp(1.15rem,3.4vw,1.6rem);
  color:var(--gold-light);line-height:1.9;margin-bottom:18px}
.wk-prologue p{color:var(--text-secondary);line-height:2;font-size:1rem}
.wk-prologue .wk-sign{margin-top:22px;font-size:.82rem;color:var(--text-muted);letter-spacing:.16em}

/* ---------- 叙事章节 ---------- */
.wk-chapter{padding:clamp(48px,7vw,88px) 20px;border-top:1px solid var(--border-subtle)}
.wk-chapter:nth-of-type(even){background:linear-gradient(180deg,rgba(24,24,28,.55),transparent)}
.wk-chapter-in{max-width:var(--container-max);margin:0 auto;display:grid;gap:clamp(28px,4vw,56px)}
.wk-copy{align-self:start}
.wk-num{display:inline-block;font-family:var(--font-serif);font-size:.8rem;letter-spacing:.28em;
  color:var(--gold-mid);margin-bottom:12px}
.wk-title{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.6rem,4.2vw,2.3rem);
  line-height:1.25;margin-bottom:6px}
.wk-title small{display:block;font-family:var(--font-sans);font-weight:400;
  font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-muted);margin-top:10px}
.wk-lede{margin-top:18px;color:var(--text-secondary);line-height:2;font-size:.97rem}
.wk-meta{margin-top:16px;font-size:.78rem;color:var(--text-muted);letter-spacing:.1em}

/* 照片网格：默认单列，≥620px 双列 */
.wk-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.wk-shot{position:relative;margin:0;border-radius:var(--radius-sm);overflow:hidden;
  background:#131316;border:1px solid var(--border-subtle);cursor:zoom-in;
  box-shadow:var(--shadow-card);aspect-ratio:4/3}
.wk-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease-out-expo)}
.wk-shot:hover img{transform:scale(1.06)}
.wk-shot-tall{aspect-ratio:3/4}
.wk-shot-wide{grid-column:1 / -1;aspect-ratio:16/9}
.wk-shot figcaption{position:absolute;inset:auto 0 0 0;padding:34px 14px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.82),transparent);
  opacity:0;transform:translateY(8px);
  transition:opacity var(--transition-med),transform var(--transition-med)}
.wk-shot:hover figcaption,.wk-shot:focus-within figcaption{opacity:1;transform:none}
.wk-shot b{display:block;color:#FFF;font-family:var(--font-serif);font-size:.88rem;font-weight:600}
.wk-shot span{display:block;color:rgba(255,255,255,.72);font-size:.74rem;margin-top:2px}

/* 入场（JS 加 .is-in；无 JS 时靠下面的 no-js 兜底直接显示） */
.wk-reveal{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo)}
.wk-reveal.is-in{opacity:1;transform:none}
html.no-js .wk-reveal{opacity:1;transform:none}

/* ---------- 全部作品（网格 + 筛选） ---------- */
.wk-all{padding:clamp(48px,7vw,88px) 20px;border-top:1px solid var(--border-subtle)}
.wk-all-in{max-width:var(--container-max);margin:0 auto}
.wk-all-head{text-align:center;margin-bottom:30px}
.wk-all-head h2{font-family:var(--font-serif);font-size:clamp(1.5rem,3.8vw,2rem);margin-bottom:8px}
.wk-all-head p{color:var(--text-muted);font-size:.9rem}
.wk-filter{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:32px}
.wk-filter .filter-btn{min-height:40px}
.wk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.wk-grid .wk-shot[hidden]{display:none}

/* ---------- 活动精选 / 点评 ---------- */
.wk-extra{padding:clamp(48px,7vw,80px) 20px;border-top:1px solid var(--border-subtle)}
.wk-extra-in{max-width:1100px;margin:0 auto}
.wk-extra h2{font-family:var(--font-serif);font-size:clamp(1.3rem,3.4vw,1.7rem);text-align:center;margin-bottom:6px}
.wk-extra .wk-sub{text-align:center;color:var(--text-muted);font-size:.9rem;margin-bottom:26px}
.wk-act{display:grid;gap:12px;grid-template-columns:1fr}
.wk-act a{display:block;overflow:hidden;border-radius:var(--radius-md);border:1px solid var(--border-subtle)}
.wk-act img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease-out-expo)}
.wk-act a:hover img{transform:scale(1.05)}
.wk-reviews{display:grid;gap:16px;grid-template-columns:1fr;margin-top:44px}
.wk-reviews .review-card{border-radius:var(--radius-md);overflow:hidden;cursor:zoom-in}
.wk-center{text-align:center;margin-top:26px}

/* ---------- 灯箱（全平台：点击 / 键盘 / 触屏滑动） ---------- */
.wk-lb{position:fixed;inset:0;z-index:9999;background:rgba(6,6,7,.96);
  display:none;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);
  opacity:0;transition:opacity .28s ease}
.wk-lb.active{display:flex;opacity:1}
.wk-lb-fig{margin:0;max-width:min(1180px,94vw);text-align:center;cursor:default}
.wk-lb-fig img{max-width:94vw;max-height:78vh;object-fit:contain;border-radius:4px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);background:#0c0c0e}
.wk-lb-fig figcaption{margin-top:16px;color:var(--text-secondary);font-size:.86rem;line-height:1.7}
.wk-lb-fig figcaption b{display:block;color:var(--text-primary);font-family:var(--font-serif);
  font-size:1.02rem;font-weight:600;margin-bottom:3px}
.wk-lb-close,.wk-lb-nav{position:absolute;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(24,24,28,.72);
  color:var(--text-primary);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background var(--transition-fast),transform var(--transition-fast)}
.wk-lb-close:hover,.wk-lb-nav:hover{background:rgba(212,165,116,.24)}
.wk-lb-close{top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));
  width:46px;height:46px;font-size:19px}
.wk-lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:26px}
.wk-lb-prev{left:max(10px,env(safe-area-inset-left))}
.wk-lb-next{right:max(10px,env(safe-area-inset-right))}
.wk-lb-count{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:0;right:0;
  text-align:center;color:var(--text-muted);font-size:.78rem;letter-spacing:.16em}

/* ---------- 响应式 ---------- */
@media (min-width:620px){
  .wk-shots{gap:16px}
  .wk-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .wk-act{grid-template-columns:2fr 1fr}
  .wk-reviews{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .wk-chapter-in{grid-template-columns:340px 1fr;gap:clamp(36px,5vw,64px)}
  .wk-shots{grid-template-columns:repeat(2,1fr)}
  .wk-grid{grid-template-columns:repeat(4,1fr)}
}
@supports (position:sticky){
  @media (min-width:900px){
    .wk-copy{position:sticky;top:calc(var(--header-h) + 36px)}
  }
}
@media (max-width:399px){
  .wk-shots{grid-template-columns:1fr}
  .wk-shot-wide{aspect-ratio:4/3}
}

/* 触屏：说明文字常显（没有 hover 可用） */
@media (hover:none){
  .wk-shot figcaption{opacity:1;transform:none}
  .wk-shot:hover img{transform:none}
}

/* 减少动效 */
@media (prefers-reduced-motion:reduce){
  .wk-reveal{opacity:1;transform:none;transition:none}
  .wk-shot img,.wk-act img{transition:none}
  .wk-shot:hover img,.wk-act a:hover img{transform:none}
  .wk-lb{transition:none}
}