/* AIDC Blog — /blog and /blog/<slug> (built by scripts/build-blog.mjs). Loaded after research.css: the article
   reading styles (rs-post, rs-prose, rs-related) come from there; this file adds the index, the cards, the
   language switch for the two bodies, the share row and the closing call to action. Class prefix bl-.
   面分层（docs/site-design.md）：插图放在 --surface 面上，卡片不描边，按钮是胶囊。 */

.bl main { display: block; }

/* the reader's language: English for en / ja / de, Chinese for zh (html[lang] is set before paint) */
.bl [data-only="zh"]:lang(zh) { font-family: var(--font-body); }
.bl .bl-prose[lang="zh-CN"] { font-family: var(--font-body); font-size: 1.08rem; line-height: 1.85; }
.bl .bl-prose[lang="zh-CN"] h2 { letter-spacing: 0; }

/* ---------- index ---------- */
.bl-hero { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(32px, 4vw, 48px); }
.bl-hero .sp-k { margin-bottom: 18px; }
.bl-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.04; letter-spacing: -0.04em; margin: 0 0 22px; max-width: 900px; text-wrap: balance; }
.bl-lede { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--mut); max-width: 680px; margin: 0; }

.bl-card { display: flex; flex-direction: column; gap: 18px; color: inherit; }
.bl-card-art { border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; aspect-ratio: 3 / 2; display: grid; place-items: center; transition: background .2s; }
.bl-art { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); }
.bl-card:hover .bl-card-art { background: var(--surface-hover); }
.bl-card:hover .bl-art { transform: scale(1.02); }
.bl-card-text h2, .bl-card-text h3 { margin: 10px 0 10px; letter-spacing: -0.02em; text-wrap: balance; transition: color .15s; }
.bl-card-text h3 { font-size: 1.28rem; line-height: 1.25; }
.bl-card-text p { color: var(--mut); line-height: 1.55; margin: 0 0 12px; }
.bl-card:hover h2, .bl-card:hover h3 { color: var(--signal); }
.bl-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: 0.82rem; }
.bl-topic { font-weight: 600; color: var(--ink-strong); }
.bl-date, .bl-read { color: var(--mut); font-size: 0.82rem; }

.bl-featured { padding-bottom: clamp(56px, 7vw, 88px); }
.bl-card--big { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.bl-card--big h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.08; margin: 14px 0 16px; }
.bl-card--big p { font-size: 1.12rem; }

.bl-list { padding-bottom: clamp(72px, 9vw, 120px); scroll-margin-top: calc(var(--nav-h, 64px) + 16px); }
.bl-list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 24px; margin-bottom: 32px; }
.bl-list-head h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin: 0; letter-spacing: -0.03em; }
.bl-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-filter button { font: inherit; font-size: 0.86rem; height: 36px; padding: 0 16px; border-radius: var(--radius-full); border: 0; background: var(--fill); color: var(--mut); cursor: pointer; transition: background .15s, color .15s; }
.bl-filter button:hover { color: var(--ink-strong); background: var(--fill-hover); }
.bl-filter button.on { background: var(--ink-strong); color: var(--bg); }
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.bl-grid .bl-card[hidden] { display: none; }

.bl-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: clamp(88px, 11vw, 144px); }
.bl-more-item { display: flex; flex-direction: column; gap: 6px; padding: 24px 26px; border-radius: var(--radius-lg); background: var(--surface); color: inherit; transition: background .15s; }
.bl-more-item:hover { background: var(--surface-hover); }
.bl-more-item b { color: var(--ink-strong); font-weight: 600; }
.bl-more-item span { color: var(--mut); font-size: 0.94rem; line-height: 1.5; }

/* ---------- article ---------- */
.bl-post-head h1 { max-width: 900px; }
.bl-dek { font-size: clamp(1.12rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--mut); max-width: 720px; margin: 0 auto 18px; text-wrap: balance; }
.bl-post .rs-post-hero { max-width: 1040px; }
.bl-post .rs-post-hero .bl-art--hero { border-radius: var(--radius-lg); background: var(--surface); aspect-ratio: 16 / 9; padding: 0 4%; box-sizing: border-box; }
.bl-prose blockquote { margin: 1.8em 0; padding: 4px 0 4px 22px; box-shadow: inset 3px 0 0 var(--signal); font-family: var(--font-display); font-size: 1.32rem; line-height: 1.4; color: var(--ink-strong); letter-spacing: -0.01em; }
.bl-prose blockquote p { margin: 0; }
.bl-prose ul, .bl-prose ol { padding-left: 1.2em; }
.bl-prose li { margin-bottom: 0.5em; }
.bl-prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }
.bl-foot { max-width: calc(var(--rs-measure) + 2 * var(--pad-x)); margin: 0 auto; padding: 8px var(--pad-x) 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.bl-by { margin: 0; font-size: 0.9rem; color: var(--mut); }
.bl-share { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-share .btn { height: 36px; padding: 0 14px; font-size: 0.86rem; }
.bl-cta { --fill: var(--raised); --fill-hover: var(--raised-hover); max-width: calc(var(--rs-measure) + 2 * var(--pad-x)); margin: 40px auto clamp(72px, 9vw, 112px); padding: 32px clamp(24px, 4vw, 36px); border-radius: var(--radius-lg); background: var(--surface); box-sizing: border-box; }
.bl-cta h2 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 10px; }
.bl-cta p { color: var(--mut); line-height: 1.55; margin: 0 0 20px; }
.bl-related { padding-top: 8px; padding-bottom: clamp(88px, 11vw, 144px); }
.bl-related > h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.03em; margin: 0 0 28px; }

@media (max-width: 960px) {
  .bl-card--big { grid-template-columns: minmax(0, 1fr); }
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-more { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bl-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .bl-list-head { flex-direction: column; align-items: flex-start; }
  .bl-filter { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .bl-filter::-webkit-scrollbar { display: none; }
  .bl-filter button { flex: none; }
  .bl-share .btn { width: auto; }
}