/* riman detail.css —— 漫画详情页：hero（模糊封面背景）+ 章节目录 + 猜你喜欢 */

.rm-detail { padding-bottom: var(--rm-sp-6); }

/* ---- Hero ---- */

.rm-hero {
  position: relative;
  overflow: hidden;
  background: var(--rm-topbar);
}

.rm-hero-bg {
  position: absolute;
  inset: -24px;                 /* 放大裁掉模糊边缘 */
  background-size: cover;
  background-position: center 25%;
  filter: blur(24px) brightness(.45);
}

/* 面包屑融入 hero 背景：位于模糊背景之上、内容区之前。
 * 移动端紧凑布局，桌面端保持与 hero-inner 的左右对齐。 */
.rm-hero-crumb {
  position: relative;
  max-width: var(--rm-container);
  margin: 0 auto;
  padding: var(--rm-sp-2) var(--rm-sp-4) 0;
}

.rm-hero-crumb .rm-crumb {
  margin-top: 0;
  gap: var(--rm-sp-1-5);
  font-size: var(--rm-fs-12);
  color: rgba(255, 255, 255, .65);
}

.rm-hero-crumb .rm-crumb a {
  color: rgba(255, 255, 255, .65);
  padding: var(--rm-sp-1) var(--rm-sp-1-5);
  border-radius: 4px;
  transition: all .2s;
}

.rm-hero-crumb .rm-crumb a:hover {
  color: rgba(255, 255, 255, .95);
  background: rgba(255, 255, 255, .08);
}

.rm-hero-crumb .rm-crumb [aria-current="page"] {
  color: rgba(255, 255, 255, .95);
  font-weight: 500;
}

.rm-hero-crumb .rm-crumb .rm-icon {
  font-size: var(--rm-fs-10);
  color: rgba(255, 255, 255, .4);
}

@media (min-width: 768px) {
  .rm-hero-crumb {
    padding-top: var(--rm-sp-3);
  }

  .rm-hero-crumb .rm-crumb {
    gap: var(--rm-sp-2);
    font-size: var(--rm-fs-13);
  }

  .rm-hero-crumb .rm-crumb .rm-icon {
    font-size: var(--rm-fs-11);
  }
}

.rm-hero-inner {
  position: relative;
  display: flex;
  gap: var(--rm-sp-5);
  max-width: var(--rm-container);
  margin: 0 auto;
  padding: var(--rm-sp-4) var(--rm-sp-4) var(--rm-sp-6);
  color: #FFFFFF;
}

.rm-hero-pic {
  flex: none;
  width: 168px;
  aspect-ratio: var(--rm-cover-ratio);
  border-radius: var(--rm-r);
  overflow: hidden;
  box-shadow: var(--rm-shadow-2);
  background: var(--rm-line);
}

.rm-hero-pic img { width: 100%; height: 100%; object-fit: cover; }

.rm-hero-meta { min-width: 0; }

.rm-hero-title {
  font-size: var(--rm-fs-28);
  font-weight: 800;
  line-height: 1.25;
}

.rm-hero-rows { margin-top: var(--rm-sp-3); display: grid; gap: var(--rm-sp-2); }

.rm-hero-row {
  display: flex;
  align-items: baseline;
  gap: var(--rm-sp-2);
  font-size: var(--rm-fs-13);
  color: rgba(255, 255, 255, .85);
}

.rm-hero-k { flex: none; color: rgba(255, 255, 255, .5); }

/* hero 里的题材 chip 走半透明白，而非亮色页面的白底 */
.rm-chips.is-inline { display: inline-flex; }

.rm-hero-row .rm-chip {
  background: rgba(255, 255, 255, .14);
  color: #FFFFFF;
  box-shadow: none;
}

.rm-hero-row .rm-chip:hover { background: rgba(255, 255, 255, .24); color: #FFFFFF; }

.rm-hero-blurb {
  margin-top: var(--rm-sp-3);
  font-size: var(--rm-fs-13);
  line-height: 1.7;
  color: rgba(255, 255, 255, .75);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rm-hero-acts { margin-top: var(--rm-sp-4); }

/* ---- 章节目录 ---- */

.rm-detail .rm-sec {
  max-width: var(--rm-container);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--rm-sp-4);
}

.rm-chips.is-src { margin-bottom: var(--rm-sp-3); }

/* 选集板块右上角：集数 + 排序开关。
   .rm-sec-head 是 baseline 对齐，胶囊按钮在其中会被文字基线拉偏，故本行改 center。 */
.rm-detail .rm-sec-head { align-items: center; }

.rm-sec-tools {
  display: flex;
  align-items: center;
  gap: var(--rm-sp-3);
}

.rm-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow-1);
  color: var(--rm-ink-2);
  font-size: var(--rm-fs-13);
  font-family: inherit;
  cursor: pointer;
}

.rm-sort .rm-i {
  width: 14px;
  height: 14px;
}

.rm-sort:hover { color: var(--rm-ink); }

.rm-sort[aria-pressed="true"] {
  background: var(--rm-accent);
  color: var(--rm-accent-ink);
  font-weight: 600;
}

/* 选项卡（.rm-tabs/.rm-tab）与选集目录（.rm-toc/.rm-toc-i）已提到 base.css，
   与播放页共用；此处只保留详情页独有的面板内布局。 */

/* ---- 「点击播放/阅读」提示（番剧选集与漫画章节）----
 * 适用于选项卡面板内的番剧选集和漫画章节目录。
 * :first-child 让提示随排序自动跟到当前首项，无需 JS 介入。 */

.rm-tabpanel .rm-toc-i,
.rm-detail .rm-toc .rm-toc-i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rm-sp-2);
}

.rm-tabpanel .rm-toc-name,
.rm-detail .rm-toc .rm-toc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rm-toc-hint { display: none; }

.rm-tabpanel .rm-toc-i:first-child .rm-toc-hint,
.rm-detail .rm-toc .rm-toc-i:first-child .rm-toc-hint {
  display: inline-block;
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--rm-accent);
  color: var(--rm-accent-ink);
  font-size: var(--rm-fs-11);
  font-weight: 600;
  /* 明黄做文字色在白卡上只有约 1.6:1，读不清，故按 docs/adr/0026
     的「黄底配深字」约定，改由背景承载强调色。 */
}

/* ---- 章节折叠（漫画详情，>32 话）----
 * .rm-toc--collapsible 由服务端在超阈值时渲染；.is-collapsed 由 detail-mobile.js
 * 在有 JS 时追加，故无 JS 时列表始终全量可见、按钮保持 hidden（渐进增强）。
 * 用 :nth-child(n+33) 按“当前 DOM 顺序”的位置隐藏第 33 项起，才能与
 * RM.epSort 的 appendChild 倒序重排协同——倒序后隐藏的仍是列表末尾的项。 */
.rm-toc--collapsible.is-collapsed .rm-toc-i:nth-child(n+33) {
  display: none;
}

.rm-toc-more {
  margin-top: var(--rm-sp-3);
  text-align: center;
}

.rm-toc-more-btn .rm-i {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

/* 展开后按钮变“收起”，箭头翻转 */
.rm-toc-more-btn[aria-expanded="true"] .rm-i {
  transform: rotate(180deg);
}

/* ---- 移动端 ---- */

@media (max-width: 640px) {
  /* Hero 区域优化 */
  .rm-hero-inner {
    flex-direction: column;
    gap: var(--rm-sp-4);
    padding: var(--rm-sp-5) var(--rm-sp-4);
    text-align: center;
  }

  /* 封面居中且增大尺寸以提升视觉冲击力 */
  .rm-hero-pic {
    width: 90%;
    max-width: 280px;
    margin: 0 auto;
  }

  /* 标题优化：保持可读性 */
  .rm-hero-title {
    font-size: var(--rm-fs-22);
    line-height: 1.3;
  }

  /* 元数据行居中对齐 */
  .rm-hero-rows {
    justify-items: center;
  }

  .rm-hero-row {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* 简介保留 3 行以提供足够上下文 */
  .rm-hero-blurb {
    -webkit-line-clamp: 3;
    text-align: left;
  }

  /* CTA 按钮固定在底部导航栏上方 */
  .rm-hero-acts {
    position: fixed;
    bottom: 60px; /* 底部导航栏高度 */
    left: 0;
    right: 0;
    z-index: 40;
    padding: var(--rm-sp-3) var(--rm-sp-4);
    background: transparent;
    /* 适配 iPhone 底部安全区域 */
    padding-bottom: calc(var(--rm-sp-3) + env(safe-area-inset-bottom));
    /* 调整 bottom 以适配安全区域 */
    bottom: calc(60px + env(safe-area-inset-bottom));
  }

  .rm-hero-acts .rm-btn.is-lg {
    width: 100%;
    min-height: 48px;
    /* 移除 tap 延迟 */
    touch-action: manipulation;
    /* 添加 active 状态视觉反馈 */
    transition: transform 0.1s ease, background-color 0.15s ease;
  }

  .rm-hero-acts .rm-btn.is-lg:active {
    transform: scale(0.98);
  }

  /* 章节目录区域优化 */
  .rm-sec-head {
    flex-wrap: nowrap;
    gap: var(--rm-sp-2);
  }

  .rm-sec-title {
    flex: 0 0 auto;
  }

  .rm-sec-tools {
    flex: 0 0 auto;
    gap: var(--rm-sp-2);
  }

  .rm-sec-note {
    font-size: var(--rm-fs-12);
  }

  /* 排序按钮触摸优化并缩小尺寸 */
  .rm-sort {
    min-height: 32px;
    padding: 4px 10px;
    font-size: var(--rm-fs-12);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .rm-sort .rm-i {
    width: 12px;
    height: 12px;
  }

  /* 章节列表项触摸优化 */
  .rm-detail .rm-toc .rm-toc-i {
    min-height: 48px;
    padding: 12px var(--rm-sp-3);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* 添加 active 状态反馈 */
    transition: transform 0.1s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }

  .rm-detail .rm-toc .rm-toc-i:active {
    transform: scale(0.98);
    background-color: var(--rm-surface-2);
  }

  /* 题材 chip 触摸优化 */
  .rm-hero-row .rm-chip,
  .rm-chips.is-src .rm-chip {
    min-height: 32px;
    padding: 6px 14px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* 底部留白适配固定按钮 + 底部导航 */
  .rm-detail {
    /* 60px (底部导航) + 48px (按钮高度) + padding + 额外间距 */
    padding-bottom: calc(120px + var(--rm-sp-6) + env(safe-area-inset-bottom));
  }
}

/* ---- AI SEO 优化样式 ---- */

/* 作品简介提炼 */
.rm-hero-summary {
  margin: 16px 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--rm-accent);
  border-radius: 4px;
  line-height: 1.6;
}

.rm-hero-summary-label {
  font-weight: 600;
  color: var(--rm-text-1);
}

.rm-hero-summary-text {
  color: var(--rm-text-2);
}

/* 章节统计卡片 */
.rm-toc-stats {
  display: flex;
  gap: 24px;
  margin: 16px 0 24px;
  padding: 16px;
  background: var(--rm-surface-2);
  border-radius: 8px;
  flex-wrap: wrap;
}

.rm-toc-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rm-toc-stat-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--rm-accent);
}

.rm-toc-stat-label {
  font-size: 13px;
  color: var(--rm-text-3);
}

/* FAQ 区块 */
.rm-faq {
  margin-top: 48px;
}

.rm-faq-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rm-faq-item {
  padding: 20px;
  background: var(--rm-surface-2);
  border-radius: 8px;
}

.rm-faq-q {
  font-size: 16px;
  font-weight: 600;
  color: var(--rm-text-1);
  margin: 0 0 12px 0;
}

.rm-faq-a {
  font-size: 14px;
  line-height: 1.6;
  color: var(--rm-text-2);
  margin: 0;
}

@media (max-width: 768px) {
  .rm-hero-summary {
    margin: 12px 0;
    padding: 12px;
  }

  .rm-toc-stats {
    gap: 16px;
    padding: 12px;
  }

  .rm-toc-stat-value {
    font-size: 18px;
  }

  .rm-faq-item {
    padding: 16px;
  }

  .rm-faq-q {
    font-size: 15px;
  }

  .rm-faq-a {
    font-size: 13px;
  }
}