/* ============================================================
   Passage Gallery — 照片隧道（原生 Canvas 版）
   配色 / 字体 / 圆角沿用站点 Design Token：黑底、品牌红、思源黑体。
   组件 CSS 在 style.css 之前加载，页面样式只负责区块外框与标题。
   ============================================================ */
.passage-gallery{
  position:relative;width:100%;height:clamp(380px,44vw,560px);
  overflow:hidden;isolation:isolate;
  background:#101012;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.pg-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;
  touch-action:pan-y;cursor:grab;background:#101012}
/* 四周压暗，让隧道中心更有纵深，也和上下深色区块自然接上 */
.pg-vignette{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse 68% 80% at 50% 50%,rgba(16,16,18,0) 38%,rgba(12,12,14,.26) 82%,rgba(10,10,12,.48) 100%),
    linear-gradient(180deg,rgba(23,23,25,.62) 0%,rgba(23,23,25,0) 14%,rgba(23,23,25,0) 86%,rgba(23,23,25,.62) 100%)}
.pg-hint{position:absolute;z-index:2;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:10.5px;letter-spacing:.14em;color:var(--fg-2);
  padding:7px 15px;border-radius:99px;
  background:rgba(16,16,18,.62);border:1px solid rgba(255,255,255,.09);
  pointer-events:none}
.pg-hint i{display:block;width:3px;height:3px;border-radius:50%;background:var(--accent)}

/* ---------------- 照片飞出放大 ---------------- */
.pg-focus{position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  background:rgba(9,9,11,.9);opacity:0;pointer-events:none;
  transition:opacity .34s var(--ease)}
.pg-focus.is-open{opacity:1;pointer-events:auto}
.pg-focus figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:15px;max-width:88vw}
.pg-focus img{display:block;width:min(70vw,760px);max-height:min(62vh,520px);
  object-fit:contain;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.65);
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pg-focus figcaption{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.pg-focus figcaption strong{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--fg)}
.pg-focus figcaption span{font-size:10.5px;letter-spacing:.16em;color:var(--accent)}
.pg-focus.pg-no-caption figcaption{display:none}
.pg-focus__close{position:absolute;top:22px;right:24px;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.1);color:var(--fg);font-size:15px;line-height:1;
  cursor:pointer;transition:.25s var(--ease)}
.pg-focus__close:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(90deg)}

/* 无障碍文本与无 Canvas 降级网格 */
.pg-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pg-fallback{position:absolute;inset:0;z-index:3;display:grid;
  grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:10px;padding:24px}
.pg-fallback img{width:100%;height:100%;object-fit:cover;border-radius:10px;opacity:.85}
.pg-no-canvas .pg-canvas,.pg-no-canvas .pg-vignette,.pg-no-canvas .pg-hint{display:none}

@media (max-width:620px){
  .passage-gallery{height:340px}
  .pg-hint{font-size:9.5px;letter-spacing:.08em;gap:6px;padding:6px 11px;bottom:12px}
  .pg-focus img{width:82vw;max-height:56vh}
  .pg-focus__close{top:14px;right:14px;width:34px;height:34px}
  .pg-fallback{grid-template-columns:repeat(3,1fr);padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .pg-focus,.pg-focus img,.pg-focus__close{transition:none}
}