/* ============================================================
  home.css —— 首页（index.html）专属样式
  · 动态卡结构复用 moments.css（.feed/.moment/…），此处不重复
  · 只放首页独有：站长徽章 / 三列统计 / 标签云 / 归档 chips /
    右栏文章卡（r-card + rank 序号列表）/ 更多链接
  · 颜色一律走 tokens.css 变量，禁止硬编码色值
============================================================ */

/* ── 站长徽章（昵称旁，设计稿 .m-badge）── */
.m-badge {
  font-size: 11px; line-height: 1; padding: 3px 6px;
  border-radius: var(--r-mini);
  background: var(--brand-soft); color: var(--brand); font-weight: 500;
}

/* ── 个人卡：三列统计（动态 / 文章 / 标签，全部真实可算）── */
.stats3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 14px; padding: 12px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-align: center;
}
.stats3 b { display: block; font-size: 17px; font-weight: 500; color: var(--brand); }
.stats3 span { display: block; margin-top: 3px; font-size: var(--fs-meta); color: var(--text-3); }

/* ── 左栏小节标题（「我的圈子」「归档」）── */
.sec-title {
  margin: 14px 0 8px;
  font-size: 12px; color: var(--text-3); letter-spacing: .05em;
}

/* ── chips：标签云 + 归档胶囊（设计稿 .chip + .num）── */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--bg-chip); color: var(--text-2);
  font-size: var(--fs-meta);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.chip:hover { background: var(--brand-soft); color: var(--brand); }
.chip .num { font-size: 11px; font-weight: 500; color: var(--text-3); }
.chip:hover .num { color: var(--brand); }

/* ── 右栏文章卡 ── */
.r-card { padding: 16px; }
.r-title {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
  font-size: 14px; font-weight: 500; color: var(--text-1);
}
.r-title .more { font-size: var(--fs-meta); font-weight: 400; color: var(--text-3); }
.r-title .more:hover { color: var(--brand); }

/* 序号列表（最近文章 / 随便看看） */
.rank { display: grid; gap: 10px; }
.rank li { display: flex; gap: 10px; align-items: flex-start; }
.rank .no {
  flex-shrink: 0; width: 20px; height: 20px;
  border-radius: var(--r-mini);
  background: var(--bg-chip); color: var(--text-3);
  font-size: 12px; font-style: normal;
  display: grid; place-items: center;
}
.rank li:nth-child(-n+3) .no { background: var(--brand-soft); color: var(--brand); }
.rank .tt {
  display: block; font-size: 13.5px; line-height: 1.5; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.rank li a:hover .tt { color: var(--brand); }
.rank .ct { margin-top: 2px; font-size: var(--fs-meta); color: var(--text-time); }

/* ── 动态流底部「进入朋友圈」── */
.home-more { margin-top: 4px; text-align: center; }
.home-more a { font-size: var(--fs-meta); color: var(--text-3); }
.home-more a:hover { color: var(--brand); }

/* ── 门户封面（幻灯片，V3.5 子比风视觉升级 2026-09-18）：跨三栏横幅轮播 ──
   结构由 carousel.js 从 data-slides 解析生成；图片上的深色渐变是
   功能性遮罩（压字保证可读），不随主题色变化，有意保留 */
.pyq-carousel {
  grid-column: 1 / -1;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.pyq-carousel:hover { box-shadow: var(--shadow-hover); }
.pyq-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pyq-carousel-track::-webkit-scrollbar { display: none; }
.pyq-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 21 / 9;
  min-height: 160px;
}
.pyq-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 标题毛玻璃胶囊：压在图片左下角，不占整行（子比 banner 风） */
.pyq-slide-cap {
  position: absolute; left: 14px; bottom: 14px;
  max-width: calc(100% - 28px);
  padding: 7px 16px;
  border-radius: var(--r-full);
  color: #fff; font-size: 14px; font-weight: 500; line-height: 1.4;
  background: rgba(0, 0, 0, .30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 左右箭头：桌面悬停浮现的毛玻璃圆钮；触屏靠滑动，直接隐藏 */
.pyq-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  color: #fff;
  background: rgba(0, 0, 0, .25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.2s var(--ease), background 0.2s var(--ease);
}
.pyq-carousel-arrow:hover { background: rgba(0, 0, 0, .45); }
.pyq-carousel-arrow.prev { left: 12px; }
.pyq-carousel-arrow.next { right: 12px; }
.pyq-carousel:hover .pyq-carousel-arrow { opacity: 1; }
@media (hover: none), (max-width: 767px) {
  .pyq-carousel-arrow { display: none; }
}
/* 圆点改胶囊条：当前张拉长（子比指示器风） */
.pyq-carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 6px;
}
.pyq-carousel-dots button {
  width: 6px; height: 6px; padding: 0; border: 0;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .55); cursor: pointer;
  transition: width 0.25s var(--ease), background 0.25s var(--ease);
}
.pyq-carousel-dots button.on { width: 18px; background: #fff; }
/* 裂图兜底：地址 404 时 carousel.js 给 slide 加 .broken（img 已移除），
   显示品牌色渐变底，标题依然可读可点——不让整块空白 */
.pyq-slide.broken {
  background:
    linear-gradient(135deg, var(--brand) 0%, var(--bg-card) 130%);
}
.pyq-slide.broken .pyq-slide-cap {
  position: static;
  display: flex;
  align-items: center;
  height: 100%;
  max-width: none;
  padding: 0 20px;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 18px;
  white-space: normal;
}
@media (max-width: 767px) {
  .pyq-slide { aspect-ratio: 16 / 9; }
  .pyq-slide-cap { left: 10px; bottom: 10px; font-size: 13px; padding: 6px 12px; }
  .pyq-carousel-dots { bottom: 8px; }
  /* 手机端版块卡间距拉大一档，避免「卡片连在一起」（2026-09-18 用户反馈） */
  .pyq-boards { gap: 14px; }
}


/* ── 社区版块（阶段 8 实装）：一个分类 = 一个「吧」卡片，零配置 ── */
.pyq-community { grid-column: 1 / -1; }
.pyq-sec-head { display: flex; align-items: baseline; gap: 10px; margin: 2px 2px 10px; }
.pyq-sec-head h2 { font-size: 16px; font-weight: 600; color: var(--text-1); }
.pyq-sec-head p { font-size: 12px; color: var(--text-3); }
.pyq-boards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.pyq-board {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-card);
  border-radius: var(--r-main);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.pyq-board:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
/* 吧封面：后台分类设置可填封面图；没填就是品牌渐变占位 */
.bd-cv {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--r-main);
  background: linear-gradient(135deg, var(--brand-2), var(--bg-chip));
  background-size: cover;
  background-position: center;
}
.bd-body { flex: 1; min-width: 0; }
.bd-name { display: block; font-size: 14px; color: var(--text-1); }
.bd-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bd-num { flex-shrink: 0; font-size: 11px; color: var(--text-3); }
.bd-num b { font-size: 15px; color: var(--brand); font-weight: 600; }