/* ============================================================
   East Saibo · ds-home.css — Wave 1 首页域（步骤 01 收尾 + 步骤 05）
   范围：聚一聚 Tab（状态带 / 轮播 / 筛选行 / 分组行 / 卡片节奏 / 空·错态）
        + 历史归档页（renderArchive）+ 触底加载提示 + 加载骨架
   约束：只做视觉；基础卡片样式在 styles.css step01 段（977-1012 行），
        本文件在其之后叠加，不重复定义同一属性的不同值域。
   引入：index.html 需在 styles.css 之后加 <link rel="stylesheet" href="./ds-home.css">（单一写者维护）。
   ============================================================ */

/* ---------- 1. 页面标题（归档页）与节奏 ---------- */
.page-head h1 {
  font-family: var(--ds-font-display, "Songti SC", SimSun, serif);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ds-ink, #1a1a1a);
}
.page-head .eyebrow {
  color: var(--ds-brand, #9a2a2a);
  letter-spacing: 3px;
}
.page-head .subtitle {
  color: var(--ds-text-secondary, #6e6e73);
}

/* 内容主轴 16–24px */
#home-feed .status-strip { margin-bottom: var(--ds-space-4, 16px); }
#home-feed .banner-wrap { margin-bottom: var(--ds-space-5, 20px); }
#home-feed .banner-empty { margin-bottom: var(--ds-space-5, 20px); }
#home-feed .filters { margin-bottom: var(--ds-space-3, 12px); }
#home-feed .cards,
.page-head + .cards { gap: var(--ds-space-5, 20px); }
.page-head + .cards { margin-top: var(--ds-space-2, 8px); }

/* ---------- 2. 分组行（正在进行 / 接下来 / 已结束·N）视觉统一 ---------- */
.group-head {
  margin: var(--ds-space-5, 20px) 0 var(--ds-space-3, 12px);
  align-items: center;
}
.group-head h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ds-ink, #1a1a1a);
}
.group-head .count {
  font-size: 12px;
  color: var(--ds-text-tertiary, #a1a1a6);
}
.group-head .line {
  height: 1px;
  background: var(--ds-border, rgba(26, 26, 26, .08));
}

/* ---------- 3. 状态带：白卡浮起，朱砂只落在状态点与关键 CTA ---------- */
.status-strip {
  padding: 10px 14px;
  background: var(--ds-surface, #fff);
  border: 1px solid var(--ds-border, rgba(26, 26, 26, .08));
  border-radius: var(--ds-radius-field, 14px);
  box-shadow: var(--ds-shadow-card, 0 4px 12px rgba(0, 0, 0, .05));
  color: var(--ds-ink, #1a1a1a);
  font-size: 13px;
}
.status-strip .dot { background: var(--ds-brand, #9a2a2a); }
.status-strip .go { color: var(--ds-brand, #9a2a2a); font-weight: 650; }
.status-strip.idle {
  background: var(--ds-surface-soft, #fafafb);
  border: 1px dashed var(--ds-border, rgba(26, 26, 26, .08));
  box-shadow: none;
  color: var(--ds-text-secondary, #6e6e73);
}
.status-strip .auto { color: var(--ds-text-tertiary, #a1a1a6); }

/* ---------- 4. 轮播：圆角统一、文字不遮封面关键区、管理键可辨 ---------- */
.banner-wrap { border-radius: var(--ds-radius-card, 20px); }
.banner-text {
  padding: 46px 18px 14px;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
.banner-dots { bottom: 10px; gap: 7px; }
.banner-dot { width: 7px; height: 7px; background: rgba(255, 255, 255, .55); }
.banner-dot.active { background: #fff; width: 18px; border-radius: 4px; }
.banner-manage {
  top: 10px;
  right: 10px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(26, 26, 26, .45);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
}
.banner-manage:hover { background: rgba(26, 26, 26, .62); }
.banner-empty {
  padding: var(--ds-space-4, 16px);
  border: 1px dashed var(--ds-border, rgba(26, 26, 26, .08));
  border-radius: var(--ds-radius-card, 20px);
  background: var(--ds-surface-soft, #fafafb);
  text-align: center;
}
.banner-empty .btn.tiny { color: var(--ds-brand, #9a2a2a); }

/* ---------- 5. 筛选行与筛选结果条 ---------- */
#home-feed .filters .search {
  background: var(--ds-surface, #fff);
  border: 1px solid var(--ds-border, rgba(26, 26, 26, .08));
  border-radius: var(--ds-radius-field, 14px);
}
#home-feed .filters .filter {
  background: var(--ds-surface, #fff);
  border: 1px solid var(--ds-border, rgba(26, 26, 26, .08));
  border-radius: var(--ds-radius-field, 14px);
}
.filter-clear {
  background: var(--ds-brand-soft, #f7ebeb);
  color: var(--ds-brand, #9a2a2a);
  border-radius: var(--ds-radius-field, 14px);
}
.filter-result {
  background: var(--ds-bronze-soft, #edf1ed);
  border: 1px solid rgba(74, 93, 78, .16);
  color: var(--ds-bronze, #4a5d4e);
}
.filter-result b { color: var(--ds-ink, #1a1a1a); }
.filter-result .link { color: var(--ds-bronze, #4a5d4e); }

/* ---------- 6. 卡片节奏（叠加 step01，不重复基础定义） ---------- */
.memory-card .memory-copy { padding: var(--ds-space-3, 12px) var(--ds-space-4, 16px); }
.memory-card .memory-copy h3 { line-height: 1.4; }
.memory-note {
  font-size: 12px;
  color: var(--ds-text-secondary, #6e6e73);
  margin-top: 3px;
}
.memory-go {
  margin-left: auto;
  font-size: 11px;
  font-weight: 650;
  color: var(--ds-brand, #9a2a2a);
  opacity: .8;
  transition: opacity .2s ease;
}
.memory-card:hover .memory-go { opacity: 1; }
.memory-card .memory-art .card-date {
  box-shadow: 0 2px 6px rgba(154, 42, 42, .14);
}

/* 进行中主卡：视觉锚点 = 留白 + 层级，不大红铺底 */
.gather-hero .hero-copy { padding: var(--ds-space-6, 24px); }
.gather-hero .hero-stats { gap: var(--ds-space-4, 16px); }
.gather-hero .hero-footer { gap: var(--ds-space-3, 12px); }
.gather-hero .btn.primary:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring, 0 0 0 3px rgba(154, 42, 42, .22));
}

/* ---------- 7. 空态：无聚会（朱砂点缀）与筛选无结果（青铜绿）各自可辨 ---------- */
.cards .empty,
#home-feed .empty {
  grid-column: 1 / -1;
  padding: var(--ds-space-12, 48px) var(--ds-space-5, 20px);
  background: var(--ds-surface, #fff);
  border: 1px dashed rgba(26, 26, 26, .14);
  border-radius: var(--ds-radius-card, 20px);
  color: var(--ds-text-secondary, #6e6e73);
  font-size: 13px;
}
.cards .empty .empty-art,
#home-feed .empty .empty-art {
  background: var(--ds-brand-soft, #f7ebeb);
  color: var(--ds-brand, #9a2a2a);
}
.cards .empty:has([data-action="filter-clear"]),
#home-feed .empty:has([data-action="filter-clear"]) {
  background: var(--ds-bronze-soft, #edf1ed);
  border-color: rgba(74, 93, 78, .22);
}
.cards .empty:has([data-action="filter-clear"]) .empty-art,
#home-feed .empty:has([data-action="filter-clear"]) .empty-art {
  background: rgba(74, 93, 78, .12);
  color: var(--ds-bronze, #4a5d4e);
}

/* ---------- 8. 分页提示三态：进度 / 加载中 / 失败可重试 ---------- */
#home-feed .load-more { color: var(--ds-text-tertiary, #a1a1a6); }
#home-feed .load-more.loading { color: var(--ds-bronze, #4a5d4e); }
#home-feed .load-more:has(.retry) {
  padding: 10px 14px;
  background: var(--ds-brand-soft, #f7ebeb);
  border-radius: var(--ds-radius-field, 14px);
  color: var(--ds-brand, #9a2a2a);
}
#home-feed .load-more .retry {
  background: var(--ds-brand, #9a2a2a);
  color: var(--on-brand, #fff);
  border-radius: var(--ds-radius-button, 999px);
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
}
#home-feed .load-more .retry:hover { background: var(--ds-brand-hover, #802323); }

/* ---------- 9. 加载骨架 ---------- */
.skeleton .sk-line {
  background: linear-gradient(90deg, #ececf0 25%, #f6f6f9 37%, #ececf0 63%);
  background-size: 400% 100%;
}
.skeleton .sk-card {
  border-radius: var(--ds-radius-card, 20px);
  background: #eef0ee;
}

/* ---------- 10. 移动端与动效弱化 ---------- */
html.force-mobile #home-feed .cards,
html.force-mobile .page-head + .cards { gap: 14px; }
html.force-mobile .group-head { margin: var(--ds-space-4, 16px) 0 10px; }
html.force-mobile .memory-card .memory-copy { padding: 10px 12px; }
@media (prefers-reduced-motion: reduce) {
  .banner-slide { transition: none; }
  .memory-go { transition: none; }
}