/* =====================================================================
   行业洞察 Insights —— 文章 & 列表版式(SSR 页专用)
   复用 home.css 的 token(--brand/--ink/--card/--line/--maxw…)与 nav/footer;
   本文件只管 Insights 自己的排版,单一源,不碰其它页。
   ===================================================================== */
.ins-wrap{max-width:var(--maxw,80rem);margin:0 auto;padding:2.4rem 1.5rem 3.5rem;}
.ins-article{max-width:46rem;}                 /* 文章正文限宽,长文好读 + SEO 友好 */

/* ---------- 列表页 ---------- */
.ins-head{margin-bottom:1.4rem;}
.ins-head h1{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:900;margin:0 0 .5rem;}
.ins-head p{color:var(--ink-soft);font-size:1.05rem;line-height:1.7;max-width:42rem;margin:0;}
/* 分类筛选条 */
.ins-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.8rem;}
.ins-fchip{border:1px solid var(--line-strong);background:var(--card);color:var(--ink-soft);
  border-radius:999px;padding:.4rem .95rem;font-size:.85rem;font-weight:700;cursor:pointer;
  text-transform:capitalize;transition:.15s;}
.ins-fchip:hover{border-color:var(--brand);color:var(--brand);}
.ins-fchip.on{background:var(--brand);border-color:var(--brand);color:#fff;}
.ins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem;}
.ins-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:.18s;text-decoration:none;color:inherit;}
.ins-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-pop);border-color:var(--brand-soft);}
/* 封面渲染图多为透明 PNG→给浅色渐变底(同首页 collage 视觉)+ contain 不裁切,避免黑底/切图 */
.ins-card-img{aspect-ratio:16/9;overflow:hidden;
  background:radial-gradient(70% 70% at 50% 42%,var(--brand-soft) 0%,var(--bg-alt) 78%);}
.ins-card-img img{width:100%;height:100%;object-fit:contain;padding:5%;box-sizing:border-box;display:block;}
.ins-card-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1;}
.ins-card-cat{display:inline-block;align-self:flex-start;font-size:.66rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:.22rem .6rem;}
.ins-card h3{margin:.55rem 0 .5rem;font-size:1.12rem;font-weight:800;line-height:1.4;}
.ins-card p{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.6;flex:1;}
.ins-card-date{margin-top:.9rem;font-size:.8rem;color:var(--ink-faint);}
.ins-empty{color:var(--ink-soft);}

/* ---------- 文章页 ---------- */
.ins-crumb{font-size:.85rem;color:var(--ink-faint);margin-bottom:1.2rem;}
.ins-crumb a{color:var(--ink-soft);text-decoration:none;}
.ins-crumb a:hover{color:var(--brand);}
.ins-cat{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:.24rem .7rem;}
.ins-article h1{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:900;line-height:1.25;margin:.6rem 0 .8rem;}
/* 署名条:头像 + 作者 + 日期 + 阅读时长 + 语言切换 */
.ins-byline{display:flex;align-items:center;gap:.7rem;margin:0 0 1.6rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line);}
.ins-avatar{width:2.4rem;height:2.4rem;border-radius:50%;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);}
.ins-avatar img{width:100%;height:100%;object-fit:contain;padding:2px;box-sizing:border-box;display:block;}
.ins-byline-txt{display:flex;flex-direction:column;line-height:1.35;}
.ins-author{font-weight:700;color:var(--ink);font-size:.95rem;}
.ins-sub{color:var(--ink-faint);font-size:.85rem;}
.ins-byline-lang{margin-left:auto;}
.ins-lang{border:1px solid var(--line-strong);border-radius:999px;padding:.25rem .8rem;
  color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:.82rem;}
.ins-lang:hover{border-color:var(--brand);color:var(--brand);}
.ins-cover{width:100%;border-radius:var(--radius-lg);border:1px solid var(--line);margin:0 0 1.8rem;display:block;
  background:radial-gradient(70% 70% at 50% 42%,var(--brand-soft) 0%,var(--bg-alt) 78%);}

/* 正文排版 */
.ins-body{font-size:1.06rem;line-height:1.85;color:var(--ink);}
.ins-body h2{font-size:1.5rem;font-weight:800;margin:2.2rem 0 .8rem;line-height:1.3;}
.ins-body h3{font-size:1.2rem;font-weight:800;margin:1.7rem 0 .6rem;}
.ins-body p{margin:0 0 1.1rem;}
.ins-body a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;}
.ins-body strong{font-weight:800;}
.ins-body ul,.ins-body ol{margin:0 0 1.2rem;padding-left:1.4rem;}
.ins-body li{margin:.4rem 0;}
/* #9 易改特经验观点 callout:正文里的引用块渲染成品牌"企业经验"卡(企业人格所在) */
.ins-body blockquote{position:relative;margin:1.8rem 0;padding:1.3rem 1.4rem 1.3rem 1.6rem;
  border-left:4px solid var(--brand);background:var(--brand-soft);
  border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--ink);font-size:1.05rem;line-height:1.75;}
.ins-body blockquote::before{content:"易改特经验";display:block;font-size:.68rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brand);margin-bottom:.4rem;font-style:normal;}
:root:lang(en) .ins-body blockquote::before,.lang-en .ins-body blockquote::before{content:"FROM OUR EXPERIENCE";}
.ins-body blockquote p{margin:0 0 .6rem;}
.ins-body blockquote p:last-child{margin-bottom:0;}
.ins-body img{max-width:100%;height:auto;border-radius:var(--radius-md);border:1px solid var(--line);margin:1.4rem 0;display:block;
  background:radial-gradient(70% 70% at 50% 42%,var(--brand-soft) 0%,var(--bg-alt) 78%);}  /* 透明渲染图配浅色底,不透明图不受影响 */
.ins-body code{background:var(--bg-alt);border:1px solid var(--line);border-radius:4px;padding:.1rem .35rem;font-size:.9em;}
.ins-body pre{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:1rem 1.2rem;overflow-x:auto;margin:0 0 1.3rem;}
.ins-body pre code{background:none;border:none;padding:0;}
.ins-body hr{border:none;border-top:1px solid var(--line);margin:2rem 0;}
/* 表格:宽了能横向滚,不撑破页面 */
.ins-body table{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.97rem;display:block;overflow-x:auto;}
.ins-body th,.ins-body td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left;vertical-align:top;}
.ins-body th{background:var(--bg-alt);font-weight:800;}

.ins-404{text-align:center;padding:4rem 1rem;}
.ins-404 h1{font-size:4rem;font-weight:900;color:var(--brand);margin:0;}
.ins-404 p{color:var(--ink-soft);margin:.5rem 0 1.5rem;}

/* 底部转化 CTA */
.ins-cta{margin:2.6rem 0 0;padding:1.6rem 1.8rem;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-hi,#2563b5) 100%);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;}
.ins-cta h3{margin:0 0 .3rem;font-size:1.2rem;font-weight:800;}
.ins-cta p{margin:0;color:rgba(255,255,255,.92);font-size:.95rem;line-height:1.6;max-width:34rem;}
.ins-cta .btn-primary{background:#fff;color:var(--brand);white-space:nowrap;flex:none;}
.ins-cta .btn-primary:hover{filter:brightness(.97);}

/* 章节标题(FAQ / 相关产品 / 相关案例 共用) */
.ins-faq,.ins-relprod,.ins-relcase{margin:2.6rem 0 0;}
.ins-faq h2,.ins-relprod h2,.ins-relcase h2{font-size:1.3rem;font-weight:800;margin:0 0 1.1rem;}

/* #10 FAQ:明确的问/答结构(爬虫与 AI 可抽取) */
.ins-faq-item{padding:1rem 0;border-bottom:1px solid var(--line);}
.ins-faq-item:first-of-type{border-top:1px solid var(--line);}
.ins-faq-item h3{margin:0 0 .4rem;font-size:1.05rem;font-weight:700;line-height:1.5;}
.ins-faq-a{color:var(--ink-soft);line-height:1.75;}
.ins-faq-a a{color:var(--brand);text-decoration:underline;}

/* #11 相关产品:型号卡片 → /product?code=X */
.ins-prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem;}  /* 46rem 栏内约 3 列:3 个产品正好填满一行 */
.ins-prod{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid var(--line);
  border-radius:var(--radius-md);overflow:hidden;background:var(--card);transition:.18s;}
.ins-prod:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop);border-color:var(--brand-soft);}
.ins-prod-img{aspect-ratio:4/3;overflow:hidden;
  background:radial-gradient(70% 70% at 50% 42%,var(--brand-soft) 0%,var(--bg-alt) 78%);}
.ins-prod-img img{width:100%;height:100%;object-fit:contain;padding:8%;box-sizing:border-box;display:block;}
.ins-prod-noimg{display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--brand);font-size:.9rem;}
.ins-prod-code{padding:.65rem .7rem;font-weight:700;font-size:.9rem;text-align:center;}

/* #12 相关案例:链接(Cases 建成后接入) */
.ins-case-list{display:flex;flex-wrap:wrap;gap:.6rem;}
.ins-case-link{border:1px solid var(--line-strong);border-radius:999px;padding:.5rem 1rem;
  color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:.9rem;transition:.15s;}
.ins-case-link:hover{border-color:var(--brand);color:var(--brand);}

@media(max-width:900px){ .ins-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));} }
@media(max-width:560px){ .ins-grid{grid-template-columns:1fr;} .ins-wrap{padding:1.6rem 1.1rem 2.5rem;}
  .ins-cta{flex-direction:column;align-items:flex-start;} }