/* riman news.css —— 资讯频道：聚合首页 / 分类页 / 搜索页 / 详情页
 *
 * 配色沿用 base.css 的设计令牌（亮色 + 明黄 #FFD400，见 docs/adr/0026）。
 * 排版走「媒体列表」而非频道页的网格卡片：资讯要读标题，作品要看封面。
 * 网格把标题压成一两行截断，适合挑作品，不适合挑文章。
 *
 * 刻意不复用 duanju 的 qianyu.css —— 那套是 qy- 前缀且耦合 duanju 外壳的
 * 瀑布流容器 #dj-waterfall，复制过来会把两者一起带进 riman。
 *
 * 缩略图比例：资讯配图是横图，用 16/10；base.css 的 --rm-cover-ratio(3/4)
 * 是给漫画/番剧竖封面的，此处不复用。
 */

:root {
  --rm-news-ratio: 16 / 10;
  --rm-news-thumb-w: 168px;
  --rm-news-measure: 42em; /* 正文单行字数上限，中文约 40 字 */
}

/* ---- 页面头 ---- */

/* 分类页与搜索页用它承载 h1（分类名 / 搜索词）。聚合首页不出标题栏，h1 走
   base.css 的 .rm-sr-only。检索入口统一在顶栏搜索框，此处不再有页内表单。 */
.rm-news-head {
  margin-bottom: var(--rm-sp-4);
}

/* 与 base.css 的 .rm-crumb + .rm-page-head 同值：面包屑在前时由这条补出标题上间距
   （.rm-news-head 自身无 margin-top，否则 h1 会紧贴面包屑）。 */
.rm-crumb + .rm-news-head { margin-top: var(--rm-sp-3); }

.rm-news-head h1 {
  font-size: var(--rm-fs-22);
  font-weight: 700;
  color: var(--rm-ink);
}

/* ---- 头条 ---- */

.rm-news-lead {
  display: grid;
  gap: var(--rm-sp-4);
  margin-top: var(--rm-sp-5);
  margin-bottom: var(--rm-sp-5);
  padding-bottom: var(--rm-sp-5);
  border-bottom: 1px solid var(--rm-line);
}

.rm-news-lead-pic-link,
.rm-media-thumb-link,
.rm-culture-card-pic-link,
.rm-media-summary-link,
.rm-media-meta-link,
.rm-news-lead-summary-link,
.rm-news-lead-meta-link,
.rm-culture-card-summary-link,
.rm-culture-card-meta-link {
  display: block;
}

.rm-media-meta-link,
.rm-news-lead-meta-link,
.rm-culture-card-meta-link {
  align-items: center;
  display: flex;
}

.rm-news-lead-pic-link,
.rm-media-thumb-link,
.rm-culture-card-pic-link {
  color: inherit;
  height: 100%;
}

.rm-news-lead-pic {
  position: relative;
  aspect-ratio: var(--rm-news-ratio);
  border-radius: var(--rm-r-lg);
  overflow: hidden;
  background: var(--rm-line);
  box-shadow: var(--rm-shadow-1);
}

.rm-news-lead-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}

.rm-news-lead-pic img.is-loaded,
.rm-news-lead-pic img.no-lazy { opacity: 1; }

.rm-news-lead:hover .rm-news-lead-pic { box-shadow: var(--rm-shadow-2); }

.rm-news-lead-body { min-width: 0; }

/* 明黄眉标是头条唯一的强调色用法，避免与卡片角标语义冲突 */
.rm-news-lead-eyebrow {
  display: inline-block;
  margin-bottom: var(--rm-sp-2);
  padding: 2px 10px;
  border-radius: var(--rm-r-sm);
  background: var(--rm-accent);
  color: var(--rm-accent-ink);
  font-size: var(--rm-fs-11);
  font-weight: 700;
  letter-spacing: .08em;
}

.rm-news-lead-eyebrow-link { display: inline-block; }

.rm-news-lead-title {
  font-size: var(--rm-fs-22);
  font-weight: 700;
  line-height: 1.35;
  color: var(--rm-ink);
}

.rm-news-lead:hover .rm-news-lead-title { color: var(--rm-ink-2); }

.rm-news-manga-link,
.rm-news-article-link {
  color: inherit;
}

.rm-news-manga-link {
  color: var(--rm-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--rm-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.rm-news-manga-link:hover,
.rm-news-manga-link:focus-visible {
  color: var(--rm-ink);
  text-decoration-color: var(--rm-ink);
}

.rm-news-article-link:hover,
.rm-news-article-link:focus-visible {
  color: var(--rm-ink-2);
}

.rm-news-lead-sum {
  margin-top: var(--rm-sp-3);
  font-size: var(--rm-fs-14);
  line-height: 1.7;
  color: var(--rm-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- 媒体列表 ---- */

/* 板块容器（动漫资讯、周边文化等板块）*/
.rm-news-section {
  margin-top: var(--rm-sp-6);
  padding-top: var(--rm-sp-5);
  border-top: 1px solid var(--rm-line);
}

/* 紧跟头条的第一个板块不需要上边距和分割线（头条自带底部分割线）*/
.rm-news-lead + .rm-news-section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.rm-news-section:first-of-type {
  margin-top: var(--rm-sp-5);
}

.rm-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rm-sp-3);
  margin-bottom: var(--rm-sp-4);
}

.rm-section-title {
  font-size: var(--rm-fs-22);
  font-weight: 700;
  color: var(--rm-ink);
}

.rm-section-more {
  display: inline-flex;
  align-items: center;
  gap: var(--rm-sp-1);
  font-size: var(--rm-fs-14);
  font-weight: 600;
  color: var(--rm-ink-2);
  transition: color .2s ease;
}

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

.rm-section-more .rm-icon {
  font-size: var(--rm-fs-12);
}

.rm-media-list {
  display: flex;
  flex-direction: column;
}

/* 左缩略图 + 右文字，移动端保持同一结构（只缩小缩略图），
   不改为上下堆叠 —— 一屏能扫到的条数是资讯列表的核心价值。 */
.rm-media-item {
  display: grid;
  grid-template-columns: var(--rm-news-thumb-w) minmax(0, 1fr);
  gap: var(--rm-sp-4);
  padding: var(--rm-sp-4) 0;
  border-bottom: 1px solid var(--rm-line);
}

.rm-media-item:first-child { padding-top: 0; }

.rm-media-item:last-child { border-bottom: 0; }

.rm-media-item.is-flat { grid-template-columns: minmax(0, 1fr); }

.rm-media-thumb {
  position: relative;
  aspect-ratio: var(--rm-news-ratio);
  border-radius: var(--rm-r);
  overflow: hidden;
  background: var(--rm-line);
}

.rm-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.rm-media-thumb img.is-loaded,
.rm-media-thumb img.no-lazy { opacity: 1; }

.rm-media-item:hover .rm-media-thumb img { transform: scale(1.03); }

.rm-media-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rm-media-title {
  font-size: var(--rm-fs-16);
  font-weight: 600;
  line-height: 1.45;
  color: var(--rm-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rm-media-item:hover .rm-media-title { color: var(--rm-ink-2); }

.rm-media-sum {
  margin-top: var(--rm-sp-2);
  font-size: var(--rm-fs-13);
  line-height: 1.65;
  color: var(--rm-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rm-media-meta {
  display: flex;
  align-items: center;
  gap: var(--rm-sp-2);
  margin-top: auto;
  padding-top: var(--rm-sp-3);
  font-size: var(--rm-fs-12);
  color: var(--rm-ink-3);
}

.rm-media-meta .rm-media-cat { color: var(--rm-ink-2); font-weight: 600; }

.rm-media-meta .rm-media-dot { color: var(--rm-line); }

/* ---- 详情页 ---- */

/* 周边文化卡片网格 */
.rm-culture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--rm-sp-4);
}

.rm-culture-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--rm-r-lg);
  overflow: hidden;
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow-1);
  transition: box-shadow .25s ease, transform .25s ease;
}

.rm-culture-card:hover {
  box-shadow: var(--rm-shadow-2);
  transform: translateY(-2px);
}

.rm-culture-card-pic {
  position: relative;
  aspect-ratio: var(--rm-news-ratio);
  background: var(--rm-line);
  overflow: hidden;
}

.rm-culture-card-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.rm-culture-card-pic img.is-loaded,
.rm-culture-card-pic img.no-lazy {
  opacity: 1;
}

.rm-culture-card:hover .rm-culture-card-pic img {
  transform: scale(1.05);
}

.rm-culture-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--rm-sp-4);
  min-height: 0;
}

.rm-culture-card-title {
  font-size: var(--rm-fs-16);
  font-weight: 600;
  line-height: 1.45;
  color: var(--rm-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rm-culture-card:hover .rm-culture-card-title {
  color: var(--rm-ink-2);
}

.rm-culture-card-sum {
  margin-top: var(--rm-sp-2);
  font-size: var(--rm-fs-13);
  line-height: 1.65;
  color: var(--rm-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rm-culture-card .rm-media-meta {
  margin-top: auto;
  padding-top: var(--rm-sp-3);
}

/* ---- 详情页 ---- */

/* PC 端两栏：正文 + sticky 侧栏。窄屏（< 1024px）保持单栏、侧栏落到正文之后，
   media query 在文件末尾统一开栏，此处先给单栏形态。
   刻意不让正文卡片在两栏下再 margin:auto —— 那会让它在自己的栏里再居中一次，
   与侧栏之间出现一条无意义的缝。 */
.rm-article-layout {
  display: grid;
  gap: var(--rm-sp-5);
  align-items: start;
}

.rm-article {
  min-width: 0;
  max-width: var(--rm-news-measure);
  margin: 0 auto;
  padding: var(--rm-sp-5);
  border-radius: var(--rm-r-lg);
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow-1);
}

.rm-article-crumb {
  display: flex;
  align-items: center;
  gap: var(--rm-sp-2);
  margin-bottom: var(--rm-sp-3);
  font-size: var(--rm-fs-12);
  color: var(--rm-ink-3);
}

.rm-article-crumb a { color: var(--rm-ink-2); }

.rm-article-crumb a:hover { color: var(--rm-ink); }

.rm-article-crumb .rm-icon { font-size: var(--rm-fs-11); color: var(--rm-ink-3); }

.rm-article-title {
  font-size: var(--rm-fs-28);
  font-weight: 700;
  line-height: 1.35;
  color: var(--rm-ink);
}

.rm-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rm-sp-2);
  margin-top: var(--rm-sp-3);
  padding-bottom: var(--rm-sp-4);
  border-bottom: 1px solid var(--rm-line);
  font-size: var(--rm-fs-12);
  color: var(--rm-ink-3);
}

/* 分类回链做成明黄胶囊：元信息行里唯一可点的东西，需要与纯文本区分开 */
.rm-article-cat {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--rm-accent);
  color: var(--rm-accent-ink);
  font-weight: 600;
}

.rm-article-cat:hover { background: var(--rm-accent-press); }

/* 标签并入元信息行（原先独占一行，PC 端白占一整行的高度） */
.rm-article-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--rm-sp-2);
}

.rm-article-tags span {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--rm-surface-2);
  color: var(--rm-ink-2);
  font-size: var(--rm-fs-12);
}

/* 封面限高：资讯配图常是大横图，不限高会把正文整段推到首屏之外 */
.rm-article-cover {
  margin: var(--rm-sp-4) 0 0;
  border-radius: var(--rm-r);
  overflow: hidden;
  background: var(--rm-line);
}

.rm-article-cover img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

/* 正文来自上游同步（已清洗），内层标签形态不可控，故按元素兜底排版 */
.rm-article-content {
  margin-top: var(--rm-sp-4);
  font-size: var(--rm-fs-16);
  line-height: 1.9;
  color: var(--rm-ink);
  overflow-wrap: break-word;
}

.rm-article-content p { margin: 0 0 1.1em; }

.rm-article-content h2,
.rm-article-content h3,
.rm-article-content h4 {
  margin: 1.6em 0 .6em;
  font-weight: 700;
  line-height: 1.4;
}

.rm-article-content h2 { font-size: var(--rm-fs-22); }

.rm-article-content h3 { font-size: var(--rm-fs-18); }

.rm-article-content h4 { font-size: var(--rm-fs-16); }

.rm-article-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--rm-sp-4) auto;
  border-radius: var(--rm-r);
}

.rm-article-content a { color: var(--rm-ink); text-decoration: underline; }

.rm-article-content ul,
.rm-article-content ol { margin: 0 0 1.1em; padding-left: 1.5em; }

.rm-article-content li { margin-bottom: .4em; }

.rm-article-content blockquote {
  margin: 0 0 1.1em;
  padding: var(--rm-sp-2) var(--rm-sp-4);
  border-left: 3px solid var(--rm-accent);
  background: var(--rm-surface-2);
  color: var(--rm-ink-2);
}

.rm-article-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.1em; }

.rm-article-content th,
.rm-article-content td {
  padding: var(--rm-sp-2);
  border: 1px solid var(--rm-line);
  font-size: var(--rm-fs-14);
}

.rm-article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rm-sp-3);
  margin-top: var(--rm-sp-5);
  padding-top: var(--rm-sp-4);
  border-top: 1px solid var(--rm-line);
  font-size: var(--rm-fs-13);
  color: var(--rm-ink-3);
}

.rm-article-foot a { color: var(--rm-ink-2); font-weight: 600; }

.rm-article-foot a:hover { color: var(--rm-ink); }

/* ---- 相关阅读 ---- */

/* 单栏形态下与正文卡片同宽同居中；两栏由末尾的 media query 接管 */
.rm-article-side {
  min-width: 0;
  max-width: var(--rm-news-measure);
  margin: 0 auto;
}

.rm-related {
  margin: 0;
}

.rm-related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rm-sp-3);
  margin-bottom: var(--rm-sp-3);
}

.rm-related-head h2 { font-size: var(--rm-fs-18); font-weight: 700; color: var(--rm-ink); }

.rm-related-head a { font-size: var(--rm-fs-13); color: var(--rm-ink-3); }

.rm-related-head a:hover { color: var(--rm-ink-2); }

.rm-related .rm-media-list {
  padding: var(--rm-sp-4) var(--rm-sp-5);
  border-radius: var(--rm-r-lg);
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow-1);
}

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

@media (max-width: 767px) {
  :root { --rm-news-thumb-w: 116px; }

  .rm-news-head h1 { font-size: var(--rm-fs-18); }

  .rm-news-lead {
    margin-bottom: var(--rm-sp-4);
    padding-bottom: var(--rm-sp-4);
  }

  .rm-news-lead-title { font-size: var(--rm-fs-18); }

  .rm-news-section {
    margin-top: var(--rm-sp-5);
    padding-top: var(--rm-sp-4);
  }

  .rm-section-title { font-size: var(--rm-fs-18); }

  .rm-section-more { font-size: var(--rm-fs-13); }

  .rm-media-item { gap: var(--rm-sp-3); padding: var(--rm-sp-3) 0; }

  .rm-media-title { font-size: var(--rm-fs-14); }

  /* 窄屏下摘要挤掉了扫读的行数，元信息更有用 */
  .rm-media-sum { display: none; }

  .rm-media-meta { padding-top: var(--rm-sp-2); }

  /* 周边文化卡片在移动端改为单列 */
  .rm-culture-grid {
    grid-template-columns: 1fr;
    gap: var(--rm-sp-3);
  }

  .rm-culture-card-body { padding: var(--rm-sp-3); }

  .rm-culture-card-title { font-size: var(--rm-fs-14); }

  .rm-culture-card-sum { font-size: var(--rm-fs-12); }

  .rm-article,
  .rm-related .rm-media-list { padding: var(--rm-sp-4); }

  .rm-article-title { font-size: var(--rm-fs-22); }

  .rm-article-cover img { max-height: 240px; }

  .rm-article-content { font-size: var(--rm-fs-14); line-height: 1.85; }
}

/* 头条在宽屏改为左右结构，图占 7 列 */
@media (min-width: 768px) {
  .rm-news-lead {
    grid-template-columns: 7fr 5fr;
    align-items: center;
  }

  /* 周边文化卡片在平板端显示 2 列 */
  .rm-culture-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 平板端优化（768px-1279px）*/
@media (min-width: 768px) and (max-width: 1279px) {
  /* 平板上放宽正文最大宽度，更好地利用屏幕空间 */
  .rm-article {
    max-width: 54em; /* 约 864px，比默认的 42em 更宽 */
  }

  /* 继续阅读板块与文章板块保持相同宽度 */
  .rm-article-side {
    max-width: 54em;
    width: 100%;
  }
}

/* 桌面端优化 */
@media (min-width: 1024px) {
  /* 周边文化卡片在桌面端显示 3 列 */
  .rm-culture-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- 详情页 PC 两栏 ----
 *
 * 1280px 起开栏（从 1024px 提高，让平板保持单栏）：正文与侧栏分配容器宽度。
 * 正文列用 minmax(0, 1fr) 而非固定值，避免长 URL / 宽表格把栏撑破。
 * 侧栏 sticky 顶到 topbar 之下；--rm-topbar-h 由 base.css 定义。
 */
@media (min-width: 1280px) {
  .rm-article-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--rm-sp-6);
  }

  /* 无相关资讯时收回单栏，正文继续居中 */
  .rm-article-layout.is-solo {
    grid-template-columns: minmax(0, var(--rm-news-measure));
    justify-content: center;
  }

  .rm-article { max-width: none; margin: 0; padding: var(--rm-sp-6); }

  .rm-article-side {
    max-width: none;
    margin: 0;
    position: sticky;
    top: calc(var(--rm-topbar-h) + var(--rm-sp-4));
  }

  /* 侧栏窄，媒体项收掉摘要、缩略图改小，只留标题 + 元信息 */
  .rm-article-side { --rm-news-thumb-w: 104px; }

  .rm-article-side .rm-media-sum { display: none; }

  .rm-article-side .rm-media-list { padding: var(--rm-sp-4); }

  .rm-article-side .rm-media-title { font-size: var(--rm-fs-14); }
}