/* 金瓶梅宇宙・寫真館（/jinpingmei/photobook/）專屬樣式
   概念：暗房裡的相冊——象牙紙裱框的照片一輯一輯攤在墨色檯面上。
   共用語彙（act-*／jpu-hero／paiji／reveal）在 jinpingmei.css，本檔只放 pb-*。 */

/* ── 開卷：館名＋寫真目次 ── */
.pb-hero { padding-bottom: clamp(24px, 4vw, 40px); }
/* 目次要撐得起門面：與主標同一視覺量級，縱向拉滿右欄（每條＝人名＋題名） */
.pb-hero .jpu-hero { align-items: stretch; }
.pb-hero .jpu-vquote { justify-content: flex-start; padding-top: .4em; font-size: clamp(1.25rem, 2.1vw, 1.7rem); gap: clamp(.8em, 1.4vw, 1.3em); color: #e2d8bf; }
.pb-hero .jpu-vquote span small { display: block; margin-bottom: .55em; font-size: .58em; letter-spacing: .3em; color: var(--jpm-gold); }
.pb-hero .jpu-vquote footer { margin-top: auto; }
.pb-count { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.pb-count li { border: 1px solid var(--jpm-line); padding: .24em .85em; font-family: var(--jpm-kai); font-size: .8rem; letter-spacing: .18em; color: var(--jpm-muted); }
.pb-count b { color: var(--jpm-gold-bright); font-weight: 700; }

/* ── 相冊（輯） ── */
.pb-albums { display: grid; gap: clamp(56px, 8vw, 104px); }
.pb-album { position: relative; }
.pb-album + .pb-album { padding-top: clamp(56px, 8vw, 96px); }
/* 輯與輯之間：金線上壓一枚小菱花 */
.pb-album + .pb-album::before {
  content: "◆"; position: absolute; top: -.55em; left: 50%; transform: translateX(-50%);
  color: var(--jpm-gold); font-size: .6rem; opacity: .75;
}
.pb-album + .pb-album::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(360px, 44vw); height: 1px;
  background: linear-gradient(90deg, transparent, var(--jpm-line) 30%, var(--jpm-line) 70%, transparent);
}

/* 輯號：直排小牌 */
.pb-vol {
  flex: 0 0 auto; align-self: flex-start;
  writing-mode: vertical-rl; padding: .5em .34em;
  border: 1px solid var(--jpm-gold); background: rgba(14, 13, 11, .72);
  color: var(--jpm-gold-bright); font-family: var(--jpm-serif); font-size: .74rem; letter-spacing: .3em;
}

/* 相冊文案 */
.pb-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.pb-head { display: flex; gap: 1.1rem; align-items: flex-start; }
.pb-head h2 { margin: 0; font-family: var(--jpm-serif); font-weight: 900; font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.25; letter-spacing: .06em; }
.pb-head .pb-alias { margin: .35rem 0 0; font-family: var(--jpm-kai); font-size: .85rem; letter-spacing: .1em; color: var(--jpm-gold); }
.pb-quote { margin: 0; padding: .6rem 1.1rem .7rem; border-left: 3px solid var(--jpm-red); background: var(--jpm-panel); }
.pb-quote p { margin: 0; font-family: var(--jpm-kai); font-size: 1.02rem; letter-spacing: .08em; color: #e2d8bf; }
.pb-quote footer { margin-top: .3rem; font-size: .66rem; letter-spacing: .26em; color: var(--jpm-muted); }
.pb-note { margin: 0; max-width: 30em; color: var(--jpm-muted); font-size: .95rem; line-height: 2.05; }
.pb-cta { display: inline-block; padding-bottom: .12em; border-bottom: 1px solid var(--jpm-gold); color: var(--jpm-gold-bright); font-size: .88rem; letter-spacing: .1em; }
.pb-cta:hover { color: #f0dda0; }

/* 照片：象牙紙裱框（含框號與楷體題名），墨化顯影 hover 與角色卡同語彙 */
.pb-print {
  margin: 0;
  background:
    repeating-linear-gradient(93deg, rgba(120, 88, 34, .045) 0 1px, transparent 1px 3px),
    linear-gradient(168deg, #f3ecdb, #e6dabf);
  padding: clamp(10px, 1.3vw, 15px) clamp(10px, 1.3vw, 15px) 0;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5), 0 3px 8px rgba(0, 0, 0, .38);
}
.pb-print .jpm-zoom { display: block; }
.pb-print img { display: block; width: 100%; height: auto; filter: grayscale(.38) sepia(.09) brightness(.9); transition: filter .8s ease; }
.pb-print:hover img, .pb-print:focus-within img { filter: none; }
.pb-print figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .5rem .1rem .55rem; }
.pb-print .fno { font-family: var(--jpm-serif); font-size: .66rem; font-weight: 700; letter-spacing: .2em; color: #8a6b32; }
.pb-print .fcap { font-family: var(--jpm-kai); font-weight: 700; font-size: .98rem; letter-spacing: .34em; text-indent: .34em; color: #2f2617; }

/* 多幀輯（潘金蓮）：全寬。文案雙欄＝名字｜（引文＋導語＋連結）同一疊，
   與單幀輯同一套容器語彙，避免導語懸浮在墨底上。 */
.pb-album--multi .pb-meta {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem clamp(32px, 5vw, 72px); align-items: start;
  margin-bottom: clamp(28px, 4.5vw, 48px);
}
.pb-album--multi .pb-meta .pb-head { grid-row: span 3; }
.pb-album--multi .pb-meta > :not(.pb-head) { grid-column: 2; }
.pb-album--multi .pb-cta { justify-self: start; }
/* 三幀攤在檯面上：各有角度、位移不等距，不是排版階梯 */
.pb-prints { position: relative; }
.pb-album--multi .pb-prints {
  display: grid; grid-template-columns: 1.12fr 1fr 1fr;
  gap: clamp(16px, 2.6vw, 30px); align-items: start;
  padding-bottom: 96px; /* 容納下錯位移 */
}
.pb-album--multi .pb-print:nth-child(1) { transform: rotate(-1.1deg); }
.pb-album--multi .pb-print:nth-child(2) { transform: translateY(46px) rotate(1.5deg); }
.pb-album--multi .pb-print:nth-child(3) { transform: translateY(88px) rotate(-1.9deg); }

/* 單幀輯：文案與照片兩欄，逐輯換邊；第二軸＝尺幅、擱放角度、紙色都不同 */
.pb-album--solo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 76px); align-items: center; }
.pb-album--solo .pb-prints { justify-self: center; width: min(100%, 430px); }
.pb-album--flip .pb-meta { order: 2; }
.pb-album--flip .pb-prints { order: 1; }
.pb-album--lipinger .pb-prints { width: min(100%, 448px); transform: rotate(-1.2deg); }
.pb-album--chunmei .pb-prints { width: min(100%, 468px); transform: rotate(.9deg); }
/* 輯肆刻意收小、斜得多、紙色偏舊——跟輯貳同構圖同色系，得靠裱框本身拉開差異 */
.pb-album--songhuilian .pb-prints { width: min(100%, 336px); transform: rotate(2.1deg) translateY(18px); }
.pb-album--songhuilian .pb-print {
  background:
    repeating-linear-gradient(93deg, rgba(104, 74, 26, .06) 0 1px, transparent 1px 3px),
    linear-gradient(168deg, #ecdfc0, #d9c69d);
}

/* ── 下一輯・拍攝中（空框） ── */
.pb-teaser {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  margin-top: clamp(56px, 8vw, 104px); padding: clamp(44px, 6vw, 72px) 1.5rem;
  border: 1px dashed rgba(201, 164, 97, .45); text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(201, 164, 97, .028) 0 10px, transparent 10px 20px),
    var(--jpm-panel);
}
.pb-teaser b { font-family: var(--jpm-kai); font-weight: 700; font-size: 1.25rem; letter-spacing: .42em; text-indent: .42em; color: var(--jpm-gold); }
.pb-teaser p { margin: 0; max-width: 34em; font-size: .9rem; line-height: 2; color: var(--jpm-muted); }

/* ── 響應式 ── */
@media (max-width: 900px) {
  .pb-album--multi .pb-meta { grid-template-columns: auto minmax(0, 1fr); }
  .pb-album--multi .pb-meta .pb-quote { grid-column: 2; }
  .pb-album--multi .pb-meta .pb-note { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  /* 全部輯統一：先認人（題記），再看照片 */
  .pb-album--solo { grid-template-columns: 1fr; gap: 26px; }
  .pb-album--solo .pb-meta { order: 1; }
  .pb-album--solo .pb-prints { order: 2; width: min(100%, 420px); }
  /* 手機保留擱放角度，收掉縱向位移 */
  .pb-album--lipinger .pb-prints { transform: rotate(-1deg); }
  .pb-album--chunmei .pb-prints { transform: rotate(.9deg); }
  .pb-album--songhuilian .pb-prints { width: min(100%, 360px); transform: rotate(1.8deg); }
  /* 多幀輯直排也要有「攤開」感：輪流小角度＋左右錯位，不變成呆直列表 */
  .pb-album--multi .pb-prints { grid-template-columns: 1fr; justify-items: center; padding-bottom: 0; gap: 30px; }
  .pb-album--multi .pb-print { width: min(100%, 420px); }
  .pb-album--multi .pb-print:nth-child(1) { transform: rotate(-1.1deg) translateX(-2.5%); }
  .pb-album--multi .pb-print:nth-child(2) { transform: rotate(1.5deg) translateX(3.5%); }
  .pb-album--multi .pb-print:nth-child(3) { transform: rotate(-1.4deg) translateX(-2%); }
  .pb-album--multi .pb-meta { display: flex; flex-direction: column; align-items: flex-start; }
  .pb-head h2 { font-size: 1.7rem; }
  /* 目次直排在窄幅要縮回，否則七欄撐爆版心 */
  .pb-hero .jpu-vquote { font-size: 1rem; gap: .7em; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-print img { transition: none; }
}