/* ============================================================
   SG Leather — 子頁「編輯式精選圖庫」樣式
   設計目標：非死板相簿、強調排版美感、引導聯絡
   照片填法：把 <figure class="shot"> 內的 .ph-fill 整段換成
            <img src="..." alt="..." loading="lazy"> 即可
   ============================================================ */

/* 圖庫網格（12 欄，可自由跨欄做出不對稱編排） */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.gallery.tight { gap: 10px; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* 單張作品 */
figure.shot {
  position: relative; margin: 0; overflow: hidden; border-radius: 2px;
  background: var(--bg); aspect-ratio: 4 / 3;
}
figure.shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
figure.shot:hover img { transform: scale(1.04); }

/* 佔位填充（之後換成 <img>） */
.ph-fill {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #e7e4dd 0 14px, #ded9d0 14px 28px);
}
.ph-fill span {
  font-family: monospace; font-size: 11px; line-height: 1.6; letter-spacing: .02em;
  color: #6f5a3e; background: rgba(245,245,240,.82); border: 1px solid rgba(167,128,90,.35);
  padding: 6px 12px; border-radius: 3px; text-align: center; max-width: 80%;
}

/* 圖說（疊在下方，編輯風） */
figure.shot .shot-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 28px 16px 12px; pointer-events: none;
  background: linear-gradient(to top, rgba(28,26,22,.62), rgba(28,26,22,0));
  font-family: 'Noto Sans TC', sans-serif; font-size: 12px; letter-spacing: .04em;
  color: #F5F5F0; opacity: 0; transition: opacity .3s;
}
figure.shot:hover .shot-cap { opacity: 1; }

/* 角標（編號 / 類別） */
figure.shot .shot-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #F5F5F0; background: rgba(54,61,55,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 5px 11px; border-radius: 2px;
}

/* before / after 對照 */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ba figure.shot { aspect-ratio: 4 / 3; }
.ba-label {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-family: 'Inter','Noto Sans TC',sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  padding: 5px 12px; border-radius: 2px;
}
.ba-label.before { background: rgba(76,54,45,.85); color: #F5F5F0; }
.ba-label.after  { background: rgba(77,80,56,.9); color: #F5F5F0; }
.ba-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.ba-row .ba-meta { align-self: center; }
.ba-row .ba-meta h4 { font-family: 'Noto Serif TC','Lora',serif; font-size: 19px; font-weight: 400; letter-spacing: .08em; color: var(--noir); margin-bottom: 8px; }
.ba-row .ba-meta p { font-size: 13px; line-height: 1.9; color: var(--fossil); opacity: .72; }

/* 圖庫區塊標題 + 引導句 */
.gal-intro { max-width: 640px; margin-bottom: 40px; }
.gal-intro .eyebrow { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--tan); display: block; margin-bottom: 14px; }
.gal-intro h2 { letter-spacing: .12em; margin-bottom: 14px; }
.gal-intro p { font-size: 14px; line-height: 2.0; color: var(--fossil); opacity: .76; }

/* 雙語雙欄圖說條（編輯風） */
.gal-cap-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 12px; }
.gal-cap-row .c-zh { font-family: 'Noto Sans TC', sans-serif; font-size: 13px; color: var(--fossil); opacity: .8; }
.gal-cap-row .c-en { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tan); }

/* 兩種合作 / 對象卡 */
.duo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.audience-card { padding: 32px 30px; background: var(--white); border: 1px solid rgba(167,128,90,.22); display: flex; flex-direction: column; gap: 12px; }
.audience-card.dark { background: var(--forest); border-color: transparent; }
.audience-card .ac-tag { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tan); }
.audience-card.dark .ac-tag { color: var(--gold); }
.audience-card h3 { font-family: 'Noto Serif TC','Lora',serif; font-size: 21px; font-weight: 400; letter-spacing: .08em; color: var(--noir); }
.audience-card.dark h3 { color: var(--white); }
.audience-card p { font-size: 13.5px; line-height: 1.95; color: var(--fossil); opacity: .76; }
.audience-card.dark p { color: var(--white); opacity: .72; }

/* lightbox（點圖放大；佔位框不觸發） */
#lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(28,26,22,.92); display: none; align-items: center; justify-content: center; padding: 4vw; cursor: zoom-out; }
#lightbox.open { display: flex; }
#lightbox img { max-width: 100%; max-height: 92vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
#lightbox .lb-close { position: absolute; top: 22px; right: 28px; color: #F5F5F0; font-family: 'Inter', sans-serif; font-size: 13px; letter-spacing: .14em; opacity: .7; background: none; border: none; cursor: pointer; }
#lightbox .lb-close:hover { opacity: 1; }

@media (max-width: 900px) {
  .col-3, .col-4, .col-5 { grid-column: span 6; }
  .col-7, .col-8, .col-9 { grid-column: span 12; }
  .duo-cards, .ba-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gallery { gap: 10px; }
  .col-3, .col-4, .col-5, .col-6 { grid-column: span 6; }
  .ba { gap: 8px; }
}