/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES.hk — Lightbox 樣式
   手機優先：圖片盡量大、caption 喺下面、導航掣大粒易撳
   ═══════════════════════════════════════════════════════════════ */
.kf-lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 8, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0;
}
.kf-lb.open { display: flex; }
html.kf-lb-on, html.kf-lb-on body { overflow: hidden; }

.kf-lb-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 58px 16px 16px;
}

.kf-lb-img {
  max-width: 100%;
  max-height: calc(100% - 96px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  opacity: 1;
  transition: opacity 0.25s ease;
  background: #161616;
}
.kf-lb-img.loading { opacity: 0.25; }

/* 底部資訊列 */
.kf-lb-bar {
  width: 100%;
  max-width: 900px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.kf-lb-cap {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.5px;
  line-height: 1.5;
}
.kf-lb-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 30px;
  background: var(--c-gold, #B68C52);
  color: #0e0d0b;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.kf-lb-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* 關閉 / 上／下一張 */
.kf-lb-close,
.kf-lb-nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.kf-lb-close:hover,
.kf-lb-nav:hover { background: rgba(255, 255, 255, 0.2); }

.kf-lb-close {
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  padding: 0;
}
.kf-lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
  padding: 0 0 4px;
}
.kf-lb-prev { left: 12px; }
.kf-lb-next { right: 12px; }

/* 手機 */
@media (max-width: 600px) {
  .kf-lb-stage { padding: 54px 10px 14px; }
  .kf-lb-nav { width: 42px; height: 42px; font-size: 26px; }
  .kf-lb-prev { left: 6px; }
  .kf-lb-next { right: 6px; }
  .kf-lb-img { max-height: calc(100% - 110px); }
  .kf-lb-cap { font-size: 0.84rem; }
  .kf-lb-cta { padding: 9px 18px; font-size: 0.82rem; }
}

/* gallery item 加個「放大」提示，等訪客知道撳到 */
.gallery-item { position: relative; }
.gallery-item::after {
  content: '⤢';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 15px;
  line-height: 30px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.gallery-item:hover::after { opacity: 1; }
@media (hover: none) {
  .gallery-item::after { opacity: 0.65; }
}
/* ═══════════════════════════════════════════════════════════════
   可撳元素明確化（affordance）
   ───────────────────────────────────────────────────────────────
   原則：讀者一眼睇得出「呢樣嘢撳得」。
     - 所有 <a> 都有 hover 效果（底線／移位移／變色）
     - 所有按鈕有 hover + active 下沉
     - 圖片卡片有 `⤢` 提示
     - 外部連結加 → 箭咀
   ═══════════════════════════════════════════════════════════════ */

/* 一般連結 */
a{transition:color .25s var(--ease,cubic-bezier(.22,1,.36,1)),opacity .25s}
.article-body a, .faq-a a, .svc-card p a, .quote-note a{
  color:var(--c-gold,#B68C52);text-decoration:underline;text-underline-offset:3px;
}
.article-body a:hover, .faq-a a:hover{color:#8f6d3d}

/* 所有按鈕：hover 移少少 + active 下沉 */
.btn, .pc-cta, .wa-cta, .pkg-cta, .aud-card, .svc-card{
  transition:transform .3s var(--ease,cubic-bezier(.22,1,.36,1)),box-shadow .3s,background .3s,color .3s,border-color .3s;
}
.btn:active, .pc-cta:active, .wa-cta:active{transform:translateY(1px)}

/* 服務卡成張可撳 */
.svc-card{display:block;text-decoration:none;color:inherit}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.08)}

/* 外部連結／新視窗：加箭咀提示 */
a[target="_blank"]:not(.btn):not(.pc-cta):not(.wa-cta)::after{
  content:" ↗";font-size:.85em;opacity:.6;
}

/* 作品卡片：成張可撳 + 放大提示 */
.gallery-item, .cs-img, .rel-card, .pf-vis{
  cursor:pointer;
  transition:transform .4s var(--ease,cubic-bezier(.22,1,.36,1)),box-shadow .4s;
}
.gallery-item:hover, .cs-img:hover{
  transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.13);
}

/* 圖片一律可撳（除非刻意標記）—— 用 JS 逐張包 */
img:not(.no-click){cursor:zoom-in}

/* 無障礙：focus 都要見到 */
a:focus-visible, button:focus-visible, .gallery-item:focus-visible{
  outline:2px solid var(--c-gold,#B68C52);outline-offset:3px;border-radius:4px;
}

/* 手機：撳擊反馈 */
@media(hover:none){
  .btn:active, .pc-cta:active, .wa-cta:active, .svc-card:active, .gallery-item:active{
    transform:scale(.985);
  }
}

/* 服務卡「睇詳情」提示 */
.svc-go{
  margin-top:12px;font-size:.78rem;font-weight:600;
  color:var(--c-gold,#B68C52);letter-spacing:.6px;
  opacity:0;transform:translateX(-4px);
  transition:opacity .3s var(--ease,cubic-bezier(.22,1,.36,1)),transform .3s;
}
.svc-card:hover .svc-go, .film-card:hover .svc-go,
.loc-card:hover .svc-go, .lab-card:hover .svc-go{opacity:1;transform:translateX(0)}
@media(hover:none){ .svc-go{opacity:1;transform:none} }