/**
 * 产品线页（solutions/<code>.html）的版面样式
 *
 * 为什么单独一个文件而不是塞进 main.css：
 *   main.css 是全站 900 多个页面的公共包，产品线页的块（目录、章节、内联 SVG 图、
 *   依据清单、第三方块、引用说明）只有这 15 张页面用。放进公共包会让每个博客页
 *   也多下载十几 KB，且改了块名的冲突面大。区域分册当初也是这么分的（css/region.css）。
 *
 * 与区域分册的关系：
 *   引用键、性质标签、访问日期这几处刻意复用同一组类名（.hy-ref-badge*、
 *   .hy-third-nature、.hy-ref-accessed、.hy-cite-*），因为它们在两种页面上的含义
 *   完全一样 —— 读者在分册里学会了「青色 = 官方、琥珀 = 第三方」，
 *   在产品线页上不该重新学一遍。这些类名的样式定义在 css/region.css 里；
 *   本文件只在必要时补位，不重复定义。
 *
 * 配色口径：本文件用到的色值与 js/line-diagrams.js 顶部的 C 常量同值。
 *   SVG 不继承 CSS 变量（内联 SVG 的 var() 在各浏览器支持不一致），所以颜色写死在两处。
 *   改配色要两边一起改，两个文件的注释互相指向对方。
 */

/* ---------------- 事实条（hero 下方四个结构性数字） ---------------- */

.line-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 1.5rem 0 0;
  padding: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.line-facts > div {
  padding: 0.7rem 0.9rem;
  background: var(--surface, #fff);
}

.line-facts dt {
  margin: 0 0 0.2rem;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.line-facts dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

/* ---------------- 能力速览 ---------------- */

.line-caps-strip {
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}

.line-caps-label {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ---------------- 本页目录 ----------------
   20 条编号目录在区域分册里证明比字数更管用：读者先看目录决定读不读。
   15 条产品线页的目录更短（12 条），两列排。 */

.line-quick {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}

.line-quick ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.25rem 1.4rem;
  margin: 0;
  padding: 0 0 0 1.2rem;
  font-size: 0.87rem;
}

.line-quick li { line-height: 1.75; }

.line-quick a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.line-quick a:hover { border-bottom-color: var(--primary); }

/* ---------------- 正文章节 ---------------- */

.line-body {
  margin-top: 2.5rem;
}

.line-block {
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.line-block:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.line-block-head h2 {
  margin: 0;
  font-size: 1.32rem;
  color: var(--text);
}

.line-block-hint {
  margin: 0.3rem 0 1rem;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.line-block p {
  margin: 0.85rem 0;
  line-height: 1.85;
}

.line-block p.region-lead {
  font-size: 1.02rem;
  color: var(--text);
}

/* 正文里的列表：中文长句用 ul，带顺序含义的用 ol */
.line-list {
  margin: 0.9rem 0;
  padding-left: 1.35rem;
  line-height: 1.85;
}

.line-list li { margin: 0.45rem 0; }

.line-list-num { list-style: decimal; }

/* 表格下的说明行：TABLE() 的第四参数。
   它是对整张表的「怎么读」注解，不是表格内容，所以不跟着表头走，
   字号降一级、颜色退一档，避免读者把它当成新的一段正文。 */
.line-block .blog-table-note {
  margin: 0.55rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.line-block .blog-table-note::before {
  content: "注：";
  color: var(--primary);
  font-weight: 600;
}

/* 表格内的单元格：文章页的 .blog-table 是按段落文字排的，
   产品线页的表格信息密度更高，行距收一档，读起来更成表。 */
.line-block .blog-table th,
.line-block .blog-table td {
  line-height: 1.65;
  vertical-align: top;
}

/* ---------------- 内联 SVG 图 ----------------
   高度用 aspect-ratio 交给 viewBox 决定，不做固定像素宽 ——
   三个图的 viewBox 比例不同（约 920×420 / 900×520 / 900×430），
   固定高度会把某个图压变形。 */

.line-figure {
  margin: 1.5rem 0;
  padding: 0;
}

.line-svg {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.line-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.line-figure figcaption strong {
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--text);
}

/* 图注里那句「这张图讲了什么」单独一行，给读屏与 AI 抓取器用的同在 <desc> 里 */
.line-figure-desc {
  display: block;
  margin-top: 0.2rem;
}

/* ---------------- 依据与来源 / 第三方来源 ---------------- */

.line-refs {
  margin: 1.25rem 0;
  padding: 1.1rem 1.2rem;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}

.line-refs.line-third {
  background: rgba(180, 83, 9, 0.06);
}

.line-ref-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.line-ref-item {
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
}

.line-ref-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.line-ref-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.35rem;
}

.line-ref-name {
  font-size: 0.94rem;
  color: var(--text);
}

.line-ref-what {
  margin: 0.3rem 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--text);
}

/* 「用来核 xxx」是这一块的重点：读者据此判断这条依据跟自己的场景有没有关系 */
.line-ref-used {
  display: flex;
  gap: 0.5rem;
  margin: 0.3rem 0;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--text);
}

.line-ref-used em,
.line-ref-url em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 0.76rem;
  line-height: 1.9;
  color: var(--text-muted);
}

.line-ref-url {
  display: flex;
  gap: 0.5rem;
  margin: 0.3rem 0 0;
  font-size: 0.84rem;
  line-height: 1.75;
}

.line-ref-url span {
  min-width: 0;
  word-break: break-all;
}

.line-ref-url a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 92, 99, 0.28);
}

.line-third .line-ref-url a {
  color: #b45309;
  border-bottom-color: rgba(180, 83, 9, 0.28);
}

.line-ref-url a:hover { border-bottom-color: currentColor; }

/* 反爬站点等如实标注的局限：单独一行、左框线，视觉上明确是「补充说明」 */
.line-ref-note {
  margin: 0.45rem 0 0;
  padding: 0.5rem 0.7rem;
  background: rgba(180, 83, 9, 0.08);
  border-left: 3px solid #b45309;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text);
}

/* ---------------- 引用说明 ---------------- */

.line-cite {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* ---------------- 高频问题（details 折叠） ---------------- */

.line-faq {
  margin: 1rem 0;
}

.line-faq-item {
  border-top: 1px solid var(--border);
}

.line-faq-item:last-child {
  border-bottom: 1px solid var(--border);
}

.line-faq-item > summary {
  position: relative;
  padding: 0.85rem 1.8rem 0.85rem 0;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.line-faq-item > summary::-webkit-details-marker { display: none; }

/* 展开指示用文字符号而不是图标字体：打印与读屏都能正确表达 */
.line-faq-item > summary::after {
  content: "＋";
  position: absolute;
  right: 0.2rem;
  top: 0.85rem;
  color: var(--primary);
}

.line-faq-item[open] > summary::after { content: "－"; }

.line-faq-body {
  padding: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--text);
}

.line-faq-body p { margin: 0.6rem 0; }

/* ---------------- 手机端 ---------------- */

@media (max-width: 720px) {
  .line-facts { grid-template-columns: repeat(2, 1fr); }
  .line-quick ol { grid-template-columns: 1fr; }
  .line-block-head h2 { font-size: 1.18rem; }
  /* 图在窄屏上横向内容会挤，允许横向滚动看细节，而不是把图缩到看不清 */
  .line-figure { overflow-x: auto; }
  .line-svg { min-width: 560px; }
  /* 只给滚动不给提示，读者会以为图被裁掉了 —— 图注前加一行说明。
     用 ::before 而不是改 HTML：提示只在小屏存在，不该进静态页也不该进 AI 抓取正文。 */
  .line-figure figcaption::before {
    content: "← 图较宽，可左右滑动查看完整内容 →";
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    color: var(--primary);
  }
}

/* ---------------- 打印 / PDF 导出 ----------------
   图与依据块是这一版的重点，打印时必须完整保留；
   折叠的 FAQ 全部展开，否则导出后读者看不到答案。 */

@media print {
  .line-block { break-inside: avoid-page; }
  .line-figure { break-inside: avoid-page; overflow: visible; }
  .line-svg { min-width: 0; border-color: #ccc; }
  .line-faq-item { border-color: #ccc; }
  .line-faq-item > summary::after { content: ""; }
  .line-faq-body { display: block !important; }
  .line-refs,
  .line-quick { background: #f7f7f7; }
}