/* BelugaGlobal — 详情页 / 列表页 / 活动页 / 404 的补充样式。
 *
 * **为什么单独一个文件**：`style.css` 是从原静态站逐字节复制过来的，一行没改。
 * 它既是视觉基线，也是一次免费的回归校验 —— SSR 渲染出来的首页应当和原来的
 * 静态页像素一致。往里面加东西就把这个校验毁了。
 * 这里只放 style.css 里**没有**的东西：文章正文排版、面包屑、分页、活动卡、404。
 *
 * 变量全部复用 style.css 的 `:root`，不另起一套配色。
 */

/* ---- Tab 从 <button> 换成 <a> ----------------------------------------------
 * 原版分类 Tab 是 `<button data-cat>`，纯客户端筛选：不可索引、不可分享、
 * 无 JS 不可用。SSR 之后它们是真链接 `/category/ai`，所以要把 style.css 里
 * `.tabs button` 的那套样式照搬给 `.tabs a`。视觉上完全一样。 */
.tabs a {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--body);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: all .16s;
}
.tabs a:hover { border-color: var(--brand); color: var(--brand); }
.tabs a.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* ---- 面包屑 ---- */
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }

/* ---- 文章 ---- */
.article-page .container { max-width: var(--max); } /* 与列表页同宽（1200px） */

.article-head { margin-bottom: 26px; }
.article-head h1 {
  font-size: 38px;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 14px 0 0;
}
.article-head .lede { font-size: 18px; line-height: 1.62; color: var(--body); margin: 16px 0 0; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.article-banner { margin: 0 0 30px; }
.article-banner img { width: 100%; height: auto; border-radius: var(--radius); display: block; }

/* 正文。`max-width` 不是装饰 —— 一行超过 ~75 个字符，眼睛回到行首时会跳行。 */
.article-body { font-size: 17.5px; line-height: 1.78; color: var(--body); }
.article-body > * { max-width: 72ch; }
.article-body p { margin: 0 0 1.25em; }
.article-body h2 {
  font-size: 25px;
  line-height: 1.32;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 2em 0 .7em;
}
.article-body h3 { font-size: 20px; color: var(--ink); margin: 1.7em 0 .6em; }
.article-body strong { color: var(--ink); font-weight: 650; }
.article-body a { color: var(--brand-dark); }
.article-body ul, .article-body ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.article-body li { margin-bottom: .5em; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.6em 0; display: block; }
.article-body blockquote {
  margin: 1.6em 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--brand);
  color: var(--ink);
}
.article-body table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15px; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.article-body th { background: var(--bg-soft); color: var(--ink); font-weight: 600; }

/* 出处。纯镜像站必须把来源写清楚 —— 版权上的基本尊重，也是可信度来源。 */
.article-foot { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.origin-note { font-size: 14px; color: var(--muted); margin: 0; }
.origin-note a { color: var(--brand-dark); }

.related { margin-top: 56px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ---- 分页 ---- */
.pager { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.pager a {
  min-width: 36px;
  text-align: center;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--body);
  text-decoration: none;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager a.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* ---- 活动 ---- */
.event-list { display: grid; gap: 22px; }
.event-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.event-card-img img { width: 100%; height: auto; border-radius: 10px; display: block; }
.event-card-body h3 { font-size: 21px; color: var(--ink); margin: 10px 0 6px; }
.event-card-body .sub { color: var(--body); font-size: 15px; }
.event-card-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); margin: 10px 0; }
.event-card-body p { font-size: 15px; line-height: 1.66; color: var(--body); margin: 0 0 16px; }

/* ---- 404 ---- */
.nf { text-align: center; padding: 70px 0 50px; }
.nf h1 { font-size: 72px; color: var(--brand); margin: 0; letter-spacing: -.03em; }
.nf p { color: var(--body); font-size: 16.5px; margin: 14px 0 26px; }

@media (max-width: 820px) {
  .article-head h1 { font-size: 28px; }
  .article-body { font-size: 16.5px; }
  .event-card { grid-template-columns: 1fr; }
}

/* 已发布文章少到填不满「轮播 + 精选」时，精选整块不渲染，hero 收成单列。
   `.hero-grid` 本身是 1.62fr 1fr，留个空栏会在轮播旁空出 38% 的死白。
   规则放这里而不是 style.css —— 后者是原静态站的逐字节副本，是视觉回归基线。 */
.hero-grid.solo { grid-template-columns: 1fr; }

/* ---- 顶部条的活动链接 ------------------------------------------------------
 *
 * 顶部条第二格从 `<span>` 换成了 `<a>`（去掉写死的档期，改成链到真实 GTC 页）。
 * `style.css` 里那两条规则都是按 **`span:nth-child(2)`** 选中它的：
 *   · `.tb-left span:nth-child(2) { color: var(--accent); }`      橙色强调
 *   · `@media (max-width:760px) { … display: none; }`             窄屏隐藏
 * 换成 `<a>` 之后两条**都不再命中**，于是会同时掉两个行为：颜色变回继承色，
 * 以及窄屏不再隐藏 —— 后者更要命，36px 高的顶部条会被挤到换行。
 * 这里按同样的断点把两个行为补回来。
 */
.tb-left a { color: var(--accent); text-decoration: none; }
.tb-left a:hover { color: #fff; }

@media (max-width: 760px) {
  .topbar .tb-left a { display: none; }
}

/* ---- 首页通栏：文章 + 活动两块 -------------------------------------------
 *
 * 首页去掉了右侧那条 320px 侧栏（News Flash / Trending / Platform / Topics），
 * 于是文章区拿到整宽。`style.css` 里的 `.card` 是**横版**的
 * （`220px 1fr`，图固定在左 220×134）—— 那个比例是为 1fr 栏设计的，
 * 拉到 1200px 通栏会扁成一条，所以通栏下改成竖版三列。
 *
 * 全部挂在 `.home-wide` 作用域下：列表页（/articles、/category、/search）
 * 仍是「单列横版卡 + 侧栏」，一行都不受影响。
 *
 * 断点沿用 style.css 的 1040 / 760 两档，不另起第三套 —— 三套断点在不同
 * 文件里各自演进，是最容易长出「只有某个宽度坏掉」的那种 bug。
 */
.home-wide .cards { grid-template-columns: repeat(3, 1fr); }
.home-wide .card { grid-template-columns: 1fr; gap: 14px; }
.home-wide .card img { width: 100%; height: 172px; }

@media (max-width: 1040px) {
  .home-wide .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .home-wide .cards { grid-template-columns: 1fr; }
  /* 回到横版：单列下竖版卡会让一屏只剩一张卡,滚动成本太高 */
  .home-wide .card { grid-template-columns: 110px 1fr; gap: 14px; }
  .home-wide .card img { width: 110px; height: 76px; }
}

/* ---- 活动区：无海报 / 数据口径注脚 ----------------------------------------
 *
 * `.event-wrap` 是 `420px 1fr`。活动没有海报时（真实海报还没拿到，mock 那张
 * 是 404），渲染一个空的 `.event-poster` 会在左边空出 420px 死白，
 * 所以 render/home.js 在无图时整块跳过并挂 `no-poster`。
 */
.event-wrap.no-poster { grid-template-columns: 1fr; }

/* 口径注脚：跟在 `.event-stats` 下面的小字。
   视觉上要明显弱于数字本身,但必须和数字在同一个视觉组里 ——
   它是那组数字成立的条件,不是补充说明。 */
.event-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: -18px 0 24px;
  max-width: 56ch;
}