/* ===== 页面外壳组件（2026-09-28 建立）=====
   原先这几组规则被逐页复制进 <style> 内联块（page-banner/page-content 11+ 页、
   detail-* 3 页、breadcrumb 4 页、cta-section 4 页、导航断点 4 页），
   现统一收口到组件层。取值与原内联块逐字一致，不改变任何视觉表现。
   加载顺序：组件层之后、global-patches.css 之前。 */

/* 通用页面横幅：.page-banner 的所有权在 components/layout.css（含移动端断点），
   本文件不再重复定义，避免同一选择器两处维护 */

/* 通用正文容器与 CTA */
.page-content{padding:var(--space-2xl) 0}
.cta-section{text-align:center;padding:var(--space-2xl) 0;background:var(--bg-darker)}

/* 详情页（资讯/服务/解决方案/案例）外壳 */
.detail-wrap{max-width:900px;margin:0 auto;padding:var(--space-2xl) 0}
.detail-meta{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;color:var(--text-secondary);font-size:var(--fs-sm);margin-bottom:2rem}
.detail-cover{text-align:center;margin-bottom:1.5rem}
.detail-cover img{max-width:100%;border-radius:var(--radius-lg);box-shadow:0 8px 30px rgba(0,0,0,0.25)}
.detail-body{line-height:1.9;font-size:var(--fs-base);color:var(--text-primary)}
.detail-body p{margin-bottom:1.2rem}
.detail-actions{text-align:center;margin-top:3rem}

/* 详情页「结构化字段」区块（2026-10-20 新增）
   案例/服务详情页现在会把后台可编辑的结构化列渲染出来：
   项目档案（背景/难度/周期/技术栈/指标）、亮点与价值、图集、标签、常见问题。 */
.dl-sec-title{
  font-size:var(--fs-lg);font-weight:600;color:var(--text-primary);
  margin:2rem 0 1rem;padding-left:.75rem;
  border-left:4px solid var(--primary);
}
.dl-facts{
  border:1px solid rgba(var(--primary-rgb),.15);
  border-radius:var(--radius-lg);
  padding:.25rem 1.1rem;
  background:rgba(var(--primary-rgb),.04);
}
.dl-fact{display:flex;gap:1rem;padding:.6rem 0;border-bottom:1px solid rgba(var(--primary-rgb),.1)}
.dl-fact:last-child{border-bottom:none}
.dl-fact-k{flex:0 0 6rem;color:var(--text-secondary);font-size:var(--fs-sm)}
.dl-fact-v{flex:1;color:var(--text-primary);font-size:var(--fs-base);line-height:1.75}
.dl-list{margin:0;padding-left:1.2em;color:var(--text-secondary);line-height:2}
.dl-list li{margin-bottom:.35rem}
.dl-value{
  margin-top:.75rem;padding:.85rem 1.1rem;
  border-left:3px solid var(--accent);
  background:rgba(var(--primary-rgb),.06);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--text-secondary);font-size:var(--fs-base);line-height:1.8;
}
.dl-value b{color:var(--text-primary)}
.dl-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.dl-gallery img{width:100%;height:150px;object-fit:cover;border-radius:var(--radius-md);border:1px solid rgba(var(--primary-rgb),.15)}
.dl-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0}
.dl-tag{
  padding:.25rem .8rem;border-radius:20px;font-size:var(--fs-sm);
  background:rgba(var(--primary-rgb),.12);
  border:1px solid rgba(var(--primary-rgb),.22);
  color:var(--accent);
}
.dl-faq-item{padding:.8rem 0;border-bottom:1px solid rgba(var(--primary-rgb),.1)}
.dl-faq-item:last-child{border-bottom:none}
.dl-faq-q{display:block;color:var(--text-primary);font-weight:600;font-size:var(--fs-base);margin-bottom:.3rem}
.dl-faq-a{display:block;color:var(--text-secondary);font-size:var(--fs-sm);line-height:1.8}

/* 详情页上一篇/下一篇（components/detail-nav.js 渲染）
   原实现是浅色卡片写在页面内联脚本里，与深色主题冲突，这里改为跟随令牌 */
.detail-nav{
  display:flex;gap:1rem;flex-wrap:wrap;
  max-width:900px;margin:2.5rem auto;padding:1.2rem 0;
  border-top:1px solid rgba(var(--primary-rgb),.18);
  border-bottom:1px solid rgba(var(--primary-rgb),.18);
}
.detail-nav-item{
  flex:1 1 240px;min-width:0;display:block;padding:.85rem 1rem;
  background:var(--bg-card);border:1px solid rgba(var(--primary-rgb),.18);
  border-radius:var(--radius-md);text-decoration:none;
  transition:border-color .2s,transform .2s;
}
.detail-nav-item:hover{border-color:var(--primary);transform:translateY(-2px)}
.detail-nav-item.is-empty{background:none;border:none;pointer-events:none}
.detail-nav-item.is-next{text-align:right}
.detail-nav-label{display:block;font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:.35rem}
.detail-nav-title{
  display:block;font-size:var(--fs-sm);color:var(--text-primary);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media(max-width:600px){
  .detail-nav{flex-direction:column}
  .detail-nav-item.is-next{text-align:left}
}

/* 面包屑 */
.breadcrumb{max-width:1200px;margin:1.2rem auto 0;padding:0 1.5rem;font-size:13px;color:var(--text-muted)}
.breadcrumb a{color:var(--accent,#00d4ff);text-decoration:none}
.breadcrumb .bc-sep{margin:0 .5rem;color:rgba(255,255,255,.35)}
.breadcrumb .bc-cur{color:var(--text-secondary,rgba(255,255,255,.75))}

/* 导航栏断点：PC 导航共 13 项，窄屏放不下会把"首页"挤出可视区，
   所以 <1200px 直接走移动端菜单，1200-1500px 压缩间距 */
@media (max-width: 1199px) {
  .main-nav { display: none !important; }
  .mobile-toggle { display: flex !important; }
  .header-btn { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1366px) {
  .main-nav { gap: 0; margin: 0 0.5rem; }
  .nav-link { padding: 0.5rem 0.35rem; font-size: 0.78rem; }
  .header-btn { display: none !important; }
}
@media (min-width: 1367px) and (max-width: 1500px) {
  .main-nav { gap: 0; margin: 0 0.5rem; }
  .nav-link { padding: 0.5rem 0.5rem; font-size: 0.82rem; }
  .header-btn { padding: 0.5rem 1rem; font-size: 0.8rem; }
}