/* ═══════════════════════════════════════════════════════════════════
   fabao — 法寶館（/fabao/）專屬樣式
   -------------------------------------------------------------------
   磁貼牆沿用 v3-base.css 的 .classic-grid/.classic-card 與 cms.css 的
   三視圖切換；此處只補「書封」視覺：CSS 生成的直排封面（免圖檔）、
   分類色帶、類型徽章。清單檢視時封面自動收起，維持原版型行為。
   新增一本書：複製一個 .classic-card.fabao-card，換分類 class 與文字。
   ═══════════════════════════════════════════════════════════════════ */

.fabao-card { padding-top: 14px; }

/* 書封：3:4 直式，紙感底 + 左側書脊色帶 + 直排書名 */
.fabao-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  margin: 0 auto 14px;
  max-width: 150px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    var(--cream, #F2EDE4);
  border: 1px solid var(--line, rgba(42,38,32,.12));
  border-radius: 4px 8px 8px 4px;
  box-shadow: 2px 3px 10px rgba(42,38,32,.10);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fabao-cover::before { /* 書脊色帶 */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  background: var(--spine, var(--teal, #B8956A));
}
.fabao-cover-title {
  writing-mode: vertical-rl;
  font-family: var(--font-display, 'Noto Serif TC', serif);
  font-size: calc(19px * var(--font-scale, 1));
  font-weight: 700; letter-spacing: .35em;
  color: var(--text, #2A2620);
  padding-left: 6px; /* 視覺置中補書脊寬 */
  padding-bottom: 24px; /* 預留右下徽章帶，六字題名（彌勒救苦真經）末字不被壓到；書名略高於中線也合古籍題簽習慣 */
}

/* 分類書脊色：儒 金棕 / 佛 黛藍 / 道 松綠 / 一貫道·寶光紹興 硃紅 */
.fabao-cover.spine-ikuan     { --spine: var(--coral, #1E3A5F); }
.fabao-cover.spine-confucian { --spine: var(--teal, #B8956A); }
.fabao-cover.spine-buddhist  { --spine: #3D5A80; }
.fabao-cover.spine-taoist    { --spine: #5F7A61; }

/* 類型徽章（線上研讀 / 電子書） */
.fabao-badge {
  position: absolute; right: 8px; bottom: 8px;
  font-family: var(--font-body, 'Nunito', sans-serif);
  font-size: calc(12px * var(--font-scale, 1)); font-weight: 700; /* ≥12px 長者可讀性下限 */
  color: var(--text-mid, #5A4E42);
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line, rgba(42,38,32,.12));
  border-radius: 999px; padding: 2px 8px;
}

/* 清單檢視：封面收起，回到原版橫幅列 */
.classic-grid.view-list .fabao-cover { display: none; }

/* 手機直向：磁貼牆固定 2 欄書牆。cms.css 的 auto-fill minmax(190px,1fr)
   在 375px 只排得下 1 欄，10 張 3:4 書封各佔整行會拉出近十屏的長捲動；
   書封 150px 寬本就放得下 2 欄。欄寬縮小後，張張相同的「線上研讀」徽章
   會擠壓直排書名（六字題名如彌勒救苦真經），行動版改為收起。 */
@media (max-width: 640px) {
  /* minmax(0,1fr)：書封 aspect-ratio 撐出的 min-content 會讓 1fr 拒縮而橫向溢出 */
  .classic-grid:not(.view-list):not(.view-scroll) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .classic-grid:not(.view-list):not(.view-scroll) .classic-card { padding-left: 10px; padding-right: 10px; }
  .fabao-badge { display: none; }
  .fabao-cover-title { padding-bottom: 0; } /* 徽章已收起；縮小的書封放不下預留帶 */
}

/* 即將上架佔位磚：虛線框、不可點 */
.fabao-card.coming {
  border-style: dashed; opacity: .75; cursor: default;
}
.fabao-card.coming .fabao-cover {
  background: transparent; border-style: dashed; box-shadow: none;
}
.fabao-card.coming .fabao-cover::before { display: none; }
.fabao-card.coming:hover { transform: none; }
.fabao-card.coming:hover .name { color: var(--text, #2A2620); }