/* ==========================================================================
   AJMZ Insights —— 博客样式层 /assets/blog.v4.css
   --------------------------------------------------------------------------
   v2（2026-09-16）新增：文章里的产品图
     · .bl-fig / .bl-fig--lead  正文首图与段内插图（产品图 + 图注）
     · .bl-products / .bl-prod  「Products in this note」图文卡片网格
     · .bl-card-media / .bl-card-body  列表页卡片缩略图
   v1 的规则**一条未改**（只在 .bl-card 上因加图而重置了内边距，见该节注释）。

   为什么单独一层，而不是塞进 ui-unify：
     只需要 insights 相关页面引用它，**不用动共享层、不用升版本、不用重跑 261 页**。
     共享层只负责导航/页头/买家侧交互，博客是独立板块，分开更好维护。

   ⚠️ 内页用的是另一套设计令牌：--ink / --ink-2 / --muted / --line / --paper /
      --paper-2 / --card / --copper / --copper-soft / --navy / --radius
      **没有**首页那套 --color-*。所以这里一律 var(--line, #E2DDD5) 带兜底 ——
      写 var(--color-line) 会让整条声明「计算时失效」，border 直接算成 0。

   ⚠️ 文件名必须带版本号：assets 下 CSS 是 max-age=86400，改内容不换名的话，
      已访问过的浏览器一天内看不到新样式。改样式 → 递增文件名 → 重跑生成器。

   所有类名以 .bl- 前缀，不与既有页面冲突（刻意不复用 .chapter / .card）。
   ========================================================================== */

/* --------------------------------------------------------------- 列表页 */
.bl-chips{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:32px 0 28px; padding:0; list-style:none;
}
.bl-chips a{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border:1px solid var(--line, #E2DDD5); border-radius:999px;
  font-size:13px; font-weight:600; line-height:1;
  color:var(--ink-2, #2B3644); background:var(--card, #fff); text-decoration:none;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.bl-chips a:hover{ border-color:var(--copper, #9A6B3F); color:var(--copper, #9A6B3F) }
.bl-chips a.is-on{
  background:var(--ink, #141A21); border-color:var(--ink, #141A21); color:#fff;
}
.bl-chips a span{ font-weight:400; opacity:.6; font-variant-numeric:tabular-nums }

.bl-grid{ display:grid; gap:20px; margin:0 0 8px }
@media (min-width:700px){ .bl-grid{ grid-template-columns:repeat(2, 1fr) } }
@media (min-width:1060px){ .bl-grid{ grid-template-columns:repeat(3, 1fr) } }

/* v2：加缩略图后卡片改为「图 + 文字」两段，内边距从卡片挪到 .bl-card-body */
.bl-card{
  display:flex; flex-direction:column; gap:0; padding:0; overflow:hidden;
  border:1px solid var(--line, #E2DDD5); border-radius:var(--radius, 6px);
  background:var(--card, #fff); text-decoration:none; color:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bl-card:hover{
  border-color:var(--copper, #9A6B3F);
  box-shadow:0 8px 22px rgba(20, 26, 33, .08);
  transform:translateY(-2px);
}
/* 产品图是 1:1 白底方图，用 4:3 + contain 保证完全不裁；
   底色保持纯白（不是 --paper），否则方图四边会浮出一个可见的白方块 */
.bl-card-media{
  display:block; aspect-ratio:4 / 3; background:#fff;
  border-bottom:1px solid var(--line, #E2DDD5);
}
.bl-card-media img{ display:block; width:100%; height:100%; object-fit:contain }
.bl-card-body{
  display:flex; flex-direction:column; gap:10px; flex:1;
  padding:20px 22px 20px;
}
.bl-card-cat{
  margin:0; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--copper, #9A6B3F);
}
.bl-card h2{
  margin:0; font-size:1.0625rem; line-height:1.32; font-weight:600;
  color:var(--ink, #141A21);
}
.bl-card-x{
  margin:0; font-size:13.5px; line-height:1.55;
  color:var(--muted, #6B7683);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.bl-card-meta{
  margin:auto 0 0; padding-top:6px; font-size:12px;
  color:var(--muted, #6B7683);
}
.bl-card-meta time{ font-variant-numeric:tabular-nums }

/* 分类页顶部说明 */
.bl-cat-intro{
  margin:0 0 4px; max-width:64ch; font-size:15px; line-height:1.65;
  color:var(--muted, #6B7683);
}

/* --------------------------------------------------------------- 文章页 */
/* 左对齐，不要 auto 居中：页头 H1 与下面的关联区块都是贴 .wrap 左边缘，
   正文若居中会出现 170px 的错位，看起来像 bug。 */
.bl-post{ max-width:720px; margin:0 }
.bl-post h2{
  margin:40px 0 14px; font-size:1.3125rem; line-height:1.3;
  font-weight:600; color:var(--ink, #141A21);
}
.bl-post p{
  margin:0 0 16px; font-size:16.5px; line-height:1.72;
  color:var(--ink-2, #2B3644);
}
.bl-post b{ color:var(--ink, #141A21) }
.bl-lede{
  margin:0 0 28px !important; padding-left:18px;
  border-left:3px solid var(--copper, #9A6B3F);
  font-size:17.5px !important; line-height:1.62 !important;
  color:var(--ink, #141A21) !important;
}
.bl-send{
  margin:36px 0 0; padding:20px 22px;
  border:1px solid var(--line, #E2DDD5); border-radius:var(--radius, 6px);
  background:var(--paper, #F7F5F1);
}
.bl-send p{ margin:0; font-size:15px; line-height:1.65; color:var(--ink-2, #2B3644) }
.bl-send p + p{ margin-top:10px }
.bl-send a{ color:var(--copper, #9A6B3F); font-weight:600; text-decoration:none }
.bl-send a:hover{ text-decoration:underline }

/* 文章内的关联区块 */
.bl-related{ margin:56px 0 0; padding-top:28px; border-top:1px solid var(--line, #E2DDD5) }
.bl-related h2{
  margin:0 0 18px; font-size:1rem; font-weight:700;
  letter-spacing:.02em; color:var(--ink, #141A21);
}
.bl-rel-grid{ display:grid; gap:14px }
@media (min-width:700px){ .bl-rel-grid{ grid-template-columns:repeat(2, 1fr) } }
.bl-rel{
  display:block; padding:14px 16px; text-decoration:none; color:inherit;
  border:1px solid var(--line, #E2DDD5); border-radius:var(--radius, 6px);
  background:var(--card, #fff);
  transition:border-color .16s ease, color .16s ease;
}
.bl-rel:hover{ border-color:var(--copper, #9A6B3F) }
.bl-rel-k{
  display:block; margin-bottom:5px; font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted, #6B7683);
}
.bl-rel-t{ display:block; font-size:14px; font-weight:600; line-height:1.4; color:var(--ink, #141A21) }
.bl-rel:hover .bl-rel-t{ color:var(--copper, #9A6B3F) }

/* 条数说明（列表页标题下那句） */
.bl-count{
  margin:14px 0 0; font-size:13px; color:var(--muted, #6B7683);
  font-variant-numeric:tabular-nums;
}

/* ==================================================== v2 新增：文章产品图 */

/* --- 正文首图 / 段内插图 ------------------------------------------------
   产品图是 800×800 白底方图。用 3:2 的框 + object-fit:contain：
   方图完整显示（左右各留白），非方图（少数 4:3 实景图）也不裁。
   **不要用 cover** —— 会把方图左右各切掉一截，产品被切一半。
   底色纯白，与产品图自身白底无缝，看上去就是「产品放在纸上」。 */
.bl-fig{ margin:30px 0 32px }
/* 首图紧跟在 lede 之后，lede 已有下外边距，不要再叠一层大间距 */
.bl-fig--lead{ margin:0 0 34px }
.bl-fig-media{
  display:block; overflow:hidden;
  border:1px solid var(--line, #E2DDD5);
  border-radius:var(--radius, 6px);
  background:#fff;
}
.bl-fig-media img{ display:block; width:100%; height:100%; object-fit:contain }
.bl-fig--lead .bl-fig-media{ aspect-ratio:3 / 2 }
.bl-fig:not(.bl-fig--lead) .bl-fig-media{ aspect-ratio:3 / 2 }
.bl-fig figcaption{
  margin:11px 0 0; font-size:13.5px; line-height:1.62;
  color:var(--muted, #6B7683);
}
.bl-fig figcaption a{ color:var(--copper, #9A6B3F); font-weight:600; text-decoration:none }
.bl-fig figcaption a:hover{ text-decoration:underline }
.bl-fig-link{ white-space:nowrap }

/* --- 「Products in this note」图文卡片 --------------------------------- */
.bl-products{ margin:56px 0 0; padding-top:28px; border-top:1px solid var(--line, #E2DDD5) }
.bl-products h2{
  margin:0 0 10px; font-size:1rem; font-weight:700;
  letter-spacing:.02em; color:var(--ink, #141A21);
}
.bl-products-note{
  margin:0 0 20px; max-width:72ch; font-size:14px; line-height:1.65;
  color:var(--muted, #6B7683);
}
.bl-prods{ display:grid; gap:18px }
@media (min-width:620px){ .bl-prods{ grid-template-columns:repeat(2, 1fr) } }
@media (min-width:1060px){ .bl-prods{ grid-template-columns:repeat(3, 1fr) } }
/* 只有 4 张时不希望最后一行孤零零一个，宽屏给 4 列 */
@media (min-width:1060px){ .bl-prods--four{ grid-template-columns:repeat(4, 1fr) } }
.bl-prod{
  display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:inherit;
  border:1px solid var(--line, #E2DDD5); border-radius:var(--radius, 6px);
  background:var(--card, #fff);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bl-prod:hover{
  border-color:var(--copper, #9A6B3F);
  box-shadow:0 8px 22px rgba(20, 26, 33, .08);
  transform:translateY(-2px);
}
.bl-prod-media{
  display:block; aspect-ratio:1 / 1; background:#fff;
  border-bottom:1px solid var(--line, #E2DDD5);
}
.bl-prod-media img{ display:block; width:100%; height:100%; object-fit:contain }
.bl-prod-body{ display:flex; flex-direction:column; gap:7px; flex:1; padding:16px 18px 18px }
.bl-prod-name{
  font-size:14.5px; font-weight:600; line-height:1.35; color:var(--ink, #141A21);
}
.bl-prod:hover .bl-prod-name{ color:var(--copper, #9A6B3F) }
.bl-prod-note{ font-size:13px; line-height:1.55; color:var(--muted, #6B7683) }
.bl-prod-meta{
  margin:auto 0 0; padding-top:8px; font-size:11.5px;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted, #6B7683); font-variant-numeric:tabular-nums;
}

/* 窄屏微调 */
@media (max-width:600px){
  .bl-chips{ margin:24px 0 22px; gap:6px }
  .bl-chips a{ padding:7px 12px; font-size:12.5px }
  .bl-card-body{ padding:18px 18px 18px }
  .bl-post p{ font-size:16px }
  .bl-post h2{ margin:32px 0 12px; font-size:1.1875rem }
  .bl-lede{ font-size:16.5px !important }
  .bl-related{ margin-top:40px }
  .bl-products{ margin-top:40px }
  .bl-fig{ margin:24px 0 26px }
  .bl-prod-body{ padding:14px 16px 16px }
}

/* ============================================ v3 新增：文章讨论区（2026-09-16）

   为什么讨论区要有静态 HTML，不是 JS 渲染：
     站上的内容策略把「被搜索引擎与 AI 引用」看得很重。JS 渲染的评论对爬虫等于不存在。
     所以每条讨论都**在 HTML 里**（由 discussions.py 生成），JS 只负责表单提交一件事。
     代价是新增一条讨论要重新生成+上传那个页面 —— 用 add_discussion.py 一条命令即可。
   ========================================================================== */

.bl-disc{ margin:56px 0 0; padding-top:28px; border-top:1px solid var(--line, #E2DDD5) }
.bl-disc h2{
  margin:0 0 10px; font-size:1rem; font-weight:700;
  letter-spacing:.02em; color:var(--ink, #141A21);
}
.bl-disc-lede{
  margin:0 0 20px; max-width:74ch; font-size:14px; line-height:1.65;
  color:var(--muted, #6B7683);
}
.bl-disc-list{ display:grid; gap:14px; margin:0 0 24px }
.bl-disc-item{
  padding:18px 20px;
  border:1px solid var(--line, #E2DDD5); border-radius:var(--radius, 6px);
  background:var(--card, #fff);
}
.bl-disc-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 9px;
}
.bl-disc-who{ font-size:13.5px; font-weight:600; color:var(--ink, #141A21) }
.bl-disc-where,
.bl-disc-date{ font-size:12.5px; color:var(--muted, #6B7683) }
.bl-disc-date{ font-variant-numeric:tabular-nums }
.bl-disc-status{
  margin-left:auto; padding:4px 10px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap;
}
/* 状态色只表示「走到哪一步」，不表示好评/差评 */
.bl-disc-status.is-open{     color:#8A6A3B; border:1px solid rgba(154,107,63,.35); background:rgba(154,107,63,.07) }
.bl-disc-status.is-reports{  color:#2C3743; border:1px solid var(--line, #E2DDD5);   background:var(--paper-2, #F2EEE8) }
.bl-disc-status.is-looking{  color:#8A5A2B; border:1px solid #C69A6D;               background:#FBF3E9 }
.bl-disc-status.is-answered{ color:#2F5D46; border:1px solid rgba(47,93,70,.35);    background:rgba(47,93,70,.07) }

.bl-disc-body{
  margin:0; font-size:15.5px; line-height:1.68; color:var(--ink-2, #2B3644);
}
.bl-disc-body + .bl-disc-body{ margin-top:10px }
.bl-disc-body a{ color:var(--copper, #9A6B3F); font-weight:600; text-decoration:none }
.bl-disc-body a:hover{ text-decoration:underline }
.bl-disc-body b{ color:var(--ink, #141A21) }

.bl-disc-reply{
  margin:14px 0 0; padding:14px 16px;
  border-left:3px solid var(--copper, #9A6B3F);
  background:var(--paper, #F7F5F1);
  border-radius:0 var(--radius, 6px) var(--radius, 6px) 0;
}
.bl-disc-reply .bl-disc-head{ margin-bottom:6px }
.bl-disc-reply .bl-disc-body{ font-size:15px }

.bl-disc-empty{
  margin:0 0 22px; padding:18px 20px; font-size:14.5px;
  color:var(--muted, #6B7683);
  border:1px dashed var(--line, #E2DDD5); border-radius:var(--radius, 6px);
}

/* 提问表单：复用站上既有的询盘接口，所以字段命名与 /request-a-quote/ 保持一致 */
.bl-disc-form{
  padding:20px 22px;
  border:1px solid var(--line, #E2DDD5); border-radius:var(--radius, 6px);
  background:var(--paper, #F7F5F1);
}
.bl-disc-form h3{ margin:0 0 6px; font-size:14.5px; font-weight:700; color:var(--ink, #141A21) }
.bl-disc-form-note{ margin:0 0 16px; font-size:12.5px; line-height:1.6; color:var(--muted, #6B7683) }
.bl-disc-row{ display:grid; gap:12px }
@media (min-width:640px){ .bl-disc-row{ grid-template-columns:1fr 1fr } }
.bl-disc-field{ display:block }
.bl-disc-field span{
  display:block; margin:0 0 5px; font-size:12px; font-weight:600;
  letter-spacing:.02em; color:var(--ink-2, #2B3644);
}
.bl-disc-field input,
.bl-disc-field textarea{
  width:100%; box-sizing:border-box; padding:9px 11px;
  font:inherit; font-size:14px; color:var(--ink, #141A21);
  background:#fff; border:1px solid var(--line, #E2DDD5); border-radius:var(--radius, 6px);
}
.bl-disc-field textarea{ min-height:104px; resize:vertical }
.bl-disc-field input:focus,
.bl-disc-field textarea:focus{
  outline:none; border-color:var(--copper, #9A6B3F);
  box-shadow:0 0 0 3px rgba(154,107,63,.12);
}
.bl-disc-hp{ display:none }
.bl-disc-send{ margin:16px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:12px }
.bl-disc-msg{ margin:12px 0 0; font-size:13.5px; line-height:1.6 }
.bl-disc-msg.is-ok{ color:#2F5D46 }
.bl-disc-msg.is-err{ color:#8A2F2F }
.bl-disc-msg a{ color:inherit; font-weight:600 }
.bl-disc-sent{ margin:0; font-size:15px; line-height:1.68; color:var(--ink-2, #2B3644) }

@media (max-width:600px){
  .bl-disc{ margin-top:40px }
  .bl-disc-item{ padding:16px 16px }
  .bl-disc-form{ padding:16px 16px }
  .bl-disc-status{ margin-left:0 }
}

/* ==================================================== v4 新增：列表页按主题分区 */

/* --- 缩略图框：把 aspect-ratio 从 flex 自动最小尺寸手里抢回来 -------------
   .bl-card-media 是 .bl-card（column flex）的子项。flex 子项的
   `min-height:auto` 会把「自动最小尺寸」解析成内部 <img> 的**转置尺寸**：
     800×800 的图 → 最小高 362px → 框 363px
     900×1199 的图 → 最小高 483px → 框 483px
   结果：v2 写的 `aspect-ratio:4/3` 一次都没生效，同一行卡片高度差到 120px、
   标题起始位置错开 —— 页面看上去「不齐」。
   flex:none 挡住压缩，min-height:0 关掉那条自动最小尺寸，框一律 1 / 1。 */
.bl-card-media{ flex:none; min-height:0; aspect-ratio:1 / 1; overflow:hidden }

/* --- 分区 ----------------------------------------------------------------
   每区一个 h2（链到分类页）+ 一句主题说明 + 「All N notes →」。
   分隔用 1px --line 上边线，与本站 .bl-related / .bl-products 的既有语言一致。 */
.bl-sec{ margin:52px 0 0; padding-top:30px; border-top:1px solid var(--line, #E2DDD5) }
.bl-sec:first-of-type{ margin-top:22px; padding-top:0; border-top:0 }
.bl-sec-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:12px 20px; margin:0 0 20px;
}
.bl-sec-head h2{
  margin:0; font-size:1.125rem; font-weight:700; line-height:1.35;
  letter-spacing:.01em; color:var(--ink, #141A21);
}
.bl-sec-head h2 a{ color:inherit; text-decoration:none }
.bl-sec-head h2 a:hover{ color:var(--copper, #9A6B3F) }
.bl-sec-desc{
  margin:7px 0 0; max-width:72ch; font-size:13.5px; line-height:1.62;
  color:var(--muted, #6B7683);
}
.bl-sec-more{
  flex:none; font-size:12.5px; font-weight:600; white-space:nowrap;
  color:var(--copper, #9A6B3F); text-decoration:none;
}
.bl-sec-more span{ display:inline-block; transition:transform .16s ease }
.bl-sec-more:hover{ text-decoration:underline }
.bl-sec-more:hover span{ transform:translateX(3px) }
.bl-sec .bl-grid{ margin:0 }

/* 列表页卡片标题降为 h3：h1 页面 → h2 分区 → h3 卡片。
   签名与 v2 的 .bl-card h2 完全一致，只换标签。 */
.bl-card h3{
  margin:0; font-size:1.0625rem; line-height:1.32; font-weight:600;
  color:var(--ink, #141A21);
}

@media (max-width:600px){
  .bl-sec{ margin-top:36px; padding-top:22px }
  .bl-sec-head{ align-items:flex-start; margin-bottom:16px }
  .bl-sec-head h2{ font-size:1rem }
  .bl-sec-desc{ font-size:13px }
}

/* ⚠️ `.bl-card-cat` 的规则仍留在 v2 段里，但 v4 起的页面**不再产生这个元素**：
   列表页用分区标题表达主题、分类页整页就是同一主题，逐张重复 18 次是噪声。
   留规则是为了回退方便，真正的开关在生成器里。 */