/* ===== 巨匠详情页样式 ===== */

/* 详情页白底（其余页面为全站米黄 --color-bg）*/
/* 详情页白底（其余页面为全站米黄 --color-bg）*/
body.renwuzhi-detail-page { background: #fff; }

.master-profile {
  display: grid;
  grid-template-columns: 349px 1fr;
  gap: 36px;
  padding-block: 80px 56px;   /* 左右间距由 .container-w 提供，勿用 padding 简写 */
}
.master-profile__photo img {
  width: 349px; height: 465px;
  object-fit: contain;
  object-position: top center;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}
.master-profile__info { padding-top: 10px; }
.master-profile__name {
  font-family: var(--font-sans);
  font-size: 46px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 26px;
}
.master-profile__tag {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 20px;
}
.master-profile__date {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.master-profile__sub {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 37px;
}
.master-profile__bio {
  font-size: 14px;
  line-height: 28px;
  color: var(--color-text-secondary);
  text-align: left;
  text-indent: 0;
}

/* 内容区块标题 */
.block-title {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 800;
  color: #333;
  padding: 40px 0 20px;
}

/* 图书行（8 列等分，封面 #f6f6f6 + 标题 18/30 PingFang；设计稿样本只画了 5 本，实际 8 列）*/
/* 设计稿：单卡 304×422，4 列，列间距 20px，卡背景 #f6f6f6 圆角 8。
   ≥1680 居中容器 1600 时能容 4 列 304 + 3×20 = 1276；窄屏 grid 弹性缩比例。*/
.book-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-bottom: 16px;
}
.book-item {
  cursor: pointer;
  background: #f6f6f6;
  border-radius: 8px;
  overflow: hidden;
  padding-bottom: 24px;            /* 卡底统一留 24px（设计稿量取）；作者/出版社任一缺失都保持底距 */
}
/* 封面区：卡内顶部 1:1 正方（设计稿 304×304，占卡宽满），下方留文字区 */
.book-item__cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-item__cover img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
/* 卡内文字块：左右 18px 内边距（设计稿 x=18） */
.book-item__title,
.book-item__author,
.book-item__publisher { padding-left: 18px; padding-right: 18px; }

.book-item__title {
  font-family: var(--font-sans);
  font-size: 16px;                 /* 设计稿 16px */
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-secondary);  /* #2E2E2E */
  margin-top: 20px;                /* 距封面底 20px（设计稿 y=324-304） */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 作者 / 出版社（设计稿：14px，作者 #6e6e6e / 出版社 #a0a0a0；空字段自动收起）*/
.book-item__author,
.book-item__publisher {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  margin: 4px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-item__author { color: var(--color-text-muted); }
.book-item__publisher { color: var(--color-text-tertiary); }
.book-item__author:empty,
.book-item__publisher:empty { display: none; }

/* 百年巨匠纪录片：2 大卡，标题在卡片下方 */
.video-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-bottom: 16px;
}
.video-card { cursor: pointer; }
.video-card__thumb {
  position: relative;
  aspect-ratio: 789 / 444;
  background: #1a1a1a;
  border-radius: 8px;
  overflow: hidden;
}
.video-card__thumb .cover { width: 100%; height: 100%; object-fit: cover; }
.video-card__thumb .play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100px; height: 100px;
}
.video-card__title {
  font-size: 20px;
  line-height: 20px;
  color: var(--color-text-secondary);
  margin-top: 22px;
}

/* 珍贵文献：画廊模式。每件 = 图 + 下方标题。
   全画廊统一行高（.detail-doc__img 的 height），图宽随各图真实宽高比 auto，绝不拉伸变形。
   JS（initPacked）负责分行装箱：塞不下时窄图上提补位、行内余量摊进间距，尽量贴满整行；
   JS 未跑时退化为下面的 flex-wrap 左对齐（同样等高），不塌不变形。 */
.detail-doc {
  display: flex;
  flex-wrap: wrap;         /* 图多时换行，避免全挤在一行被压窄 */
  align-items: flex-start;
  justify-content: flex-start;   /* 左对齐：图从左往右排、最后一行也靠左 */
  gap: 24px;
  padding-bottom: 16px;
  margin-bottom: 40px;
}
.detail-doc__item {
  flex: 0 0 auto;          /* 按图的真实宽度占位、不缩放，宽度靠 __img 的 width:auto 决定 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.detail-doc__img {
  height: 260px;           /* 统一等高（横图约 340 宽，一行可排 3 张）；宽度随宽高比自适应 */
  width: auto;
  max-width: 100%;
  display: block;
}
/* 画廊模式运行时布局：JS 把 figure 按行装箱（窄图上提补位、余量摊进间距），挂 .is-packed
   后容器改为逐行块级。所有行统一高（__img 的 height 恒 260），不裁剪、不变形。
   JS 未跑（或失败）时退回上面的 flex-wrap 左对齐兜底，同样等高，不会塌。 */
.detail-doc.is-packed {
  display: block;
}
.detail-doc__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;                        /* 默认间距；JS 会把行内余量摊进来微调（16~28 封顶），整行更贴满 */
  margin-bottom: 24px;
  justify-content: flex-start;
}
.detail-doc__row:last-child {
  margin-bottom: 0;                 /* 末行不放大、左对齐，图间保持 16 */
}
/* 标题最多 3 行，超出省略号；截断时（JS 加 --clamped）hover 冒泡显示全文。
   width:0 + min-width:100%：标题不撑宽 item（item 宽由图决定），再拉伸到图宽内换行，
   避免长标题把 item 撑得比图宽很多、导致图之间大片空白。 */
.detail-doc__caption {
  width: 0;
  min-width: 100%;
  margin-top: 16px;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-muted);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.detail-doc__caption--clamped { cursor: help; }

/* 全文气泡：挂在 body 上（position:fixed），不受画廊裁切影响 */
.detail-doc__tip {
  position: fixed;
  z-index: 1000;
  max-width: 320px;
  padding: 10px 14px;
  background: rgba(44, 37, 33, .96);   /* 深棕，同 --color-bg-dark 系 */
  color: #F8F3E7;
  font-size: 14px;
  line-height: 22px;
  text-align: left;
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}
.detail-doc__tip.is-visible { opacity: 1; }

/* 巨匠文摘：文本列表 */
.digest-list {
  padding-bottom: 48px;
}
.digest-list li {
  font-size: 20px;
  line-height: 36px;
  color: #333;
}
.digest-list li a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}
.digest-list li a:hover { color: var(--color-brand); }
.digest-list li a:hover time { color: var(--color-brand); }
.digest-list__title {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .25s ease;
  padding-bottom: 2px;
}
.digest-list li a:hover .digest-list__title {
  background-size: 100% 1px;   /* 悬停时下划线仅在标题文字下从左往右展开 */
}
.digest-list li time {
  font-family: var(--font-num);
  color: var(--color-text-muted);
  margin-right: 16px;
}
.digest-list a:hover { color: var(--color-brand); }

/* 老照片：黑底等高铺满（justified）。JS 按各图宽高比分配 flex-grow，
   同一行照片等高、紧凑铺满整条黑底，横竖混排也贴合，不再有分散的黑格。
   图多时换行，每行各自铺满。JS 未跑时退化为等高居中。 */
.photo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  background: #000;
  padding: 20px;
  margin-bottom: 54px;
}
.photo-strip img {
  flex: 0 1 auto;              /* JS 会写成 flex: <ratio> 1 0 铺满 */
  min-width: 0;
  height: 200px;              /* JS 未跑时的兜底高度 */
  width: auto;
  max-width: 100%;
  display: block;
}
/* JS 标记铺满后：图宽由 flex 撑满、高按比例自适应等高 */
.photo-strip.is-justified img {
  width: 100%;
  height: auto;
}