/* p3.38 阶段一:时间线文章列表页(archive.php,首页各"查看更多"最终
   落地的全部文章页)。风格上参照 Collin 现博客(iws.tw)那条竖线时间线
   的布局思路(左右交错卡片、节点圆点、分类色左边框)——不是照搬那边的
   配色/字体,用本主题自己的 --glass/--radius/--space 这套 token 和分
   类色相(appstore_category_colors() 同一套计算)重新演绎。

   桌面:一条竖线居中,卡片在竖线两侧交错(奇数在左、偶数在右)。
   手机(<700px):竖线靠左,卡片单列排在竖线右侧,不再交错——这是移动
   端"两侧交错"必然会导致卡片宽度腰斩到不可读的既有取舍(和 story-grid
   在窄屏收成单列同一个道理),不是偷懒退化。 */

.timeline {
  position: relative;
  padding: var(--space-section) var(--space-page) 60px;
}
@media (min-width: 700px) {
  .timeline {
    max-width: var(--container-desktop);
    margin-inline: auto;
    padding: var(--space-section) 24px 60px;
  }
}

.timeline__line {
  position: absolute;
  top: 4px;
  bottom: 24px;
  left: 20px;
  width: 2px;
  background: var(--separator);
}
@media (min-width: 700px) {
  .timeline__line { left: 50%; transform: translateX(-50%); }
}

.timeline__item {
  position: relative;
  display: flex;
  margin-bottom: 28px;
  padding-left: 44px;
}
.timeline__item:last-child { margin-bottom: 0; }

.timeline__node {
  position: absolute;
  top: 22px;
  left: 20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* box-shadow 的圈层用页面背景色打底,把节点从竖线上"抠"出一圈可见边
     界,不然纯色圆点和同色系竖线糊在一起分不清节点在哪。 */
  box-shadow: 0 0 0 4px var(--bg-page);
  z-index: 1;
}

.timeline__card {
  width: 100%;
  min-width: 0;
  border-radius: 16px;
  padding: 16px 18px;
  border-left: 4px solid transparent;
  display: block;
  color: inherit;
  text-decoration: none;
}

@media (min-width: 700px) {
  .timeline__item { padding-left: 0; width: 50%; }
  .timeline__item--left { justify-content: flex-end; padding-right: 44px; }
  .timeline__item--right { margin-left: 50%; justify-content: flex-start; padding-left: 44px; }
  .timeline__item--left .timeline__node { left: auto; right: -6px; transform: translateY(-50%); }
  .timeline__item--right .timeline__node { left: -6px; transform: translateY(-50%); }
  .timeline__card { width: 100%; }
}

.timeline__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.timeline__date { font-variant-numeric: tabular-nums; }
.timeline__cat {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.timeline__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.timeline__lock { flex: none; opacity: .55; font-size: 13px; }
.timeline__excerpt {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.timeline__excerpt--protected { color: var(--text-tertiary); font-style: italic; }

.timeline-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

/* p3.38 阶段二:all-posts.php 前端"显示更多"分页(timeline.js)——和
   P3.37⑤评论分页(.ask-review-card--paged-hidden/.ask-reviews__more-btn)
   同一个模式,只是换一批类名。 */
.timeline__item--paged-hidden { display: none; }
.timeline-more-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin: 4px 0 8px;
  padding: 10px 16px;
  font-size: 13px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.timeline-pagenav {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: var(--space-section) 0;
}
.timeline-pagenav a, .timeline-pagenav .prev, .timeline-pagenav .next {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  background: var(--bg-elevated);
}