/* ============================================================
   pages.css — 内页组件
   色带 .gb-band / 面包屑 / 产品详情 / 表单 / 资讯 / 文章 / 支持
   ============================================================ */

/* ── 内页顶部色带（深色，文字一律白色） ───────────── */
.gb-band{
  position:relative;overflow:hidden;
  background:var(--gb-band-bg);color:#fff;
  padding-block:clamp(2.25rem,5vw,3.75rem);
}
.gb-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:44px 44px;
}
.gb-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 88% 10%,rgba(34,211,238,.22),transparent 70%);
}
.gb-band-inner{
  position:relative;z-index:1;
  max-width:var(--gb-max);margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
}
.gb-band-crumb{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-size:var(--fs-sm);color:rgba(255,255,255,.92);margin-bottom:.85rem;
}
/* 红线⑥：面包屑是独立导航控件（非正文内联链接），触控目标须 ≥44px。
   原实测 30x27。用 flex 居中 + min-height，视觉位置与字号不变（父行仍是 .85rem 下边距）。
   2026-10-13 补：**高度**已达标，但**宽度仍只有 30px**（「首页」两字）→ 补 padding-inline 到 46px。
   配等值 `margin-inline` 负边距 → **视觉位置完全不变**：多出来的 8px 恰好落在
   `.gb-band-crumb` 的 .45rem flex 间隙里（tap 区正好填满间隙，不与相邻的「/」重叠）。
   ⚠️ 只加 padding 不加负边距，会把「/」和页面名整体右推 16px。 */
.gb-band-crumb a{color:rgba(255,255,255,.92);display:inline-flex;align-items:center;
  min-height:44px;padding-inline:.5rem;margin-inline:-.5rem}
.gb-band-crumb a:hover{color:#fff;text-decoration:underline}
.gb-band-crumb span{opacity:.55}
/* ⚠️ 说明书缺陷 #1 修复：色带上标题保持白色（白 on #FF6B1A = 5.95:1） */
.gb-band-title{
  font-family:var(--gb-font-head);font-size:var(--fs-h1);
  color:#fff;margin:0 0 .55rem;
  line-height:1.22;            /* 黑体中文标题 */
  letter-spacing:-.008em;
}
.gb-band-meta{
  display:flex;gap:1.1rem;flex-wrap:wrap;
  font-family:var(--gb-font-mono);font-size:var(--fs-xs);
  letter-spacing:.08em;color:rgba(255,255,255,.9);margin:0;
}
.gb-band-sub{
  font-size:var(--fs-lead);color:rgba(255,255,255,.92);
  max-width:60ch;margin:.75rem 0 0;
}

/* ── 正文容器（对齐说明书 6.1 的 .post-content 契约） ── */
.post-content{padding-block:var(--sec-pad)}
.post-content > .gb-wrap{width:100%}

/* ── 面包屑（浅色区） ─────────────────────────────── */
.gb-crumb{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-size:var(--fs-sm);color:var(--gb-text-muted);margin-bottom:1.25rem;
}
/* 红线⑥：面包屑是独立导航控件（非正文内联链接），触控目标须 ≥44px。原实测 30x27。 */
.gb-crumb a{color:var(--gb-text-muted);display:inline-flex;align-items:center;min-height:44px}
.gb-crumb a:hover{color:var(--gb-ink-link)}
.gb-crumb span{opacity:.5}

/* ── 页面小标题 ───────────────────────────────────── */
.pg-title{font-size:var(--fs-h2);margin-bottom:var(--s-3)}
.pg-lead{font-size:var(--fs-lead);color:var(--gb-text-muted);max-width:68ch;margin-bottom:var(--s-8)}

/* ── 子导航（产品详情） ───────────────────────────── */
.subnav{
  display:flex;gap:.35rem;flex-wrap:wrap;
  padding-bottom:1rem;margin-bottom:2rem;
  border-bottom:1px solid var(--gb-border);
}
.subnav a{
  min-height:var(--gb-tap);display:inline-flex;align-items:center;
  padding:.5rem .95rem;border-radius:var(--gb-pill);
  font-size:var(--fs-sm);font-weight:600;color:var(--gb-text-muted);
  transition:color var(--t-fast),background var(--t-fast);
}
.subnav a:hover{color:var(--gb-ink-link);background:var(--gb-bg)}

/* ── 产品详情 ─────────────────────────────────────── */
.pd{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
.pd__media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--gb-radius);
  background:var(--gb-media);
  display:grid;place-items:center;
}
.pd__media::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:24px 24px;
}
.pd__glyph{
  position:relative;z-index:1;font-family:var(--gb-font-mono);
  font-size:clamp(2rem,4vw,3rem);font-weight:600;color:#fff;
  text-shadow:0 0 30px rgba(255,107,26,.45);
}
.pd__code{
  position:absolute;top:1rem;left:1rem;z-index:2;
  font-family:var(--gb-font-mono);font-size:11px;letter-spacing:.14em;
  background:rgba(6,8,16,.5);color:#fff;padding:.3rem .65rem;border-radius:6px;
}
.pd__specs{display:flex;flex-direction:column;gap:1.5rem}
.pd__group h3{
  font-family:var(--gb-font-label);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gb-ink-link);
  margin:0 0 .6rem;
}
.pd__table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.pd__table th,.pd__table td{
  padding:.6rem .75rem;border-bottom:1px solid var(--gb-border);text-align:left;
}
.pd__table th{width:38%;color:var(--gb-text-muted);font-weight:500}
.pd__table td{color:var(--gb-text)}
.pd__table tr:last-child th,.pd__table tr:last-child td{border-bottom:0}

.pd__features{display:flex;flex-direction:column;gap:.7rem;margin-top:.5rem}
.pd__feature{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-sm);color:var(--gb-text)}
.pd__feature svg{color:var(--gb-ink-link);flex-shrink:0;margin-top:.2rem}

.pd__files{display:flex;flex-direction:column;gap:.55rem}
.pd__file{
  display:flex;align-items:center;gap:.8rem;
  min-height:var(--gb-tap);padding:.7rem 1rem;
  background:var(--gb-white);border:1px solid var(--gb-border);
  border-radius:var(--gb-radius-sm);color:var(--gb-heading);
  transition:border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.pd__file:hover{border-color:var(--gb-cyan);color:var(--gb-ink-link);transform:translateX(4px)}
.pd__file span:last-child{
  margin-left:auto;font-family:var(--gb-font-mono);font-size:10px;color:var(--gb-text-muted);
}

/* ── 表单 ─────────────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:1rem;max-width:660px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-size:var(--fs-sm);font-weight:600;color:var(--gb-heading)}
.field input,.field textarea,.field select{
  min-height:var(--gb-tap);padding:.7rem .95rem;
  border:1px solid var(--gb-border);border-radius:var(--gb-radius-sm);
  background:var(--gb-white);font-family:inherit;font-size:var(--fs-sm);
  color:var(--gb-text);
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--gb-ink-link);
  box-shadow:0 0 0 3px rgba(255,107,26,.10);
}
.form__note{font-size:var(--fs-xs);color:var(--gb-text-muted)}
.form__ok{
  display:flex;align-items:center;gap:.6rem;
  padding:1rem 1.15rem;border-radius:var(--gb-radius-sm);
  background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.32);
  color:#0f766e;font-size:var(--fs-sm);
}

/* ── 联系卡片（2×2 田字） ─────────────────────────── */
.gb-contact{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.gb-contact-map{
  grid-column:1/-1;position:relative;overflow:hidden;
  border-radius:var(--gb-radius);aspect-ratio:21/9;
  background:var(--gb-media);
  display:grid;place-items:center;
}
.gb-contact-map::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:30px 30px;
}
.gb-contact-map span{
  position:relative;z-index:1;font-family:var(--gb-font-mono);
  font-size:var(--fs-sm);letter-spacing:.14em;color:rgba(255,255,255,.92);
}
.gb-contact-card{
  background:var(--gb-white);border:1px solid var(--gb-border);
  border-radius:var(--gb-radius);padding:1.4rem;
  transition:transform var(--t-base),border-color var(--t-base),box-shadow var(--t-base);
}
.gb-contact-card:hover{
  transform:translateY(-4px);border-color:rgba(34,211,238,.45);box-shadow:var(--gb-shadow);
}
.gb-contact-card h3{font-family:var(--gb-font-head);font-size:1.05rem;margin:0 0 .5rem}
.gb-contact-card p{font-size:var(--fs-sm);color:var(--gb-text-muted);margin:0 0 .25rem}

/* ── 资讯列表 ─────────────────────────────────────── */
.gb-news-filter{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:2rem}
.news-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.news-item{
  display:flex;gap:1.1rem;align-items:flex-start;
  padding:1.25rem;background:var(--gb-white);
  border:1px solid var(--gb-border);border-radius:var(--gb-radius);
  transition:transform var(--t-base),border-color var(--t-base),box-shadow var(--t-base);
}
.news-item:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.45);box-shadow:var(--gb-shadow)}
.news-item__date{
  flex-shrink:0;width:62px;text-align:center;
  padding:.5rem;border-radius:var(--gb-radius-sm);
  background:var(--gb-bg);border:1px solid var(--gb-border);
}
.news-item__date b{
  display:block;font-family:var(--gb-font-mono);font-size:1.15rem;
  color:var(--gb-heading);line-height:1;
}
.news-item__date span{font-size:10px;color:var(--gb-text-muted);font-family:var(--gb-font-mono)}
.news-item__t{font-family:var(--gb-font-head);font-size:1.05rem;color:var(--gb-heading);margin:0 0 .35rem}
.news-item__d{font-size:var(--fs-sm);color:var(--gb-text-muted);margin:0 0 .5rem}
.news-item__meta{font-family:var(--gb-font-mono);font-size:10px;color:var(--gb-text-muted);letter-spacing:.1em}

/* ── 文章正文 ─────────────────────────────────────── */
.article{max-width:780px;margin-inline:auto}
.article__meta{
  display:flex;gap:1.1rem;flex-wrap:wrap;
  font-family:var(--gb-font-mono);font-size:var(--fs-xs);
  color:var(--gb-text-muted);letter-spacing:.08em;
  padding-bottom:1.25rem;margin-bottom:1.75rem;
  border-bottom:1px solid var(--gb-border);
}
.article__body{font-size:1.05rem;line-height:1.9;color:var(--gb-text)}
.article__body h2{font-size:1.5rem;margin-top:2.25rem}
.article__body h3{font-size:1.2rem;margin-top:1.75rem}
.article__body p{margin-bottom:1.15rem}
.article__body ul{margin-bottom:1.15rem}
.article__body blockquote{
  margin:1.5rem 0;padding:1rem 1.25rem;
  border-left:3px solid var(--gb-cyan);background:var(--gb-bg);
  border-radius:0 var(--gb-radius-sm) var(--gb-radius-sm) 0;
  color:var(--gb-text-muted);
}
.article__share{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--gb-border);
}
.article__share > span{
  font-family:var(--gb-font-label);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gb-text-muted);
  margin-right:.35rem;
}
.article__share button{
  min-width:var(--gb-tap);min-height:var(--gb-tap);
  display:inline-grid;place-items:center;
  border:1px solid var(--gb-border);border-radius:var(--gb-pill);
  background:#F7FAFD;color:#0A0E18;cursor:pointer;
  font-size:var(--fs-xs);font-weight:600;
  padding:0 .9rem;
  transition:border-color var(--t-fast),color var(--t-fast);
}
.article__share button:hover{border-color:var(--gb-cyan);color:var(--gb-ink-link)}

.single-navigation{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--gb-border);
}
.single-nav__item{
  display:flex;flex-direction:column;gap:.3rem;
  padding:1.1rem 1.25rem;background:var(--gb-white);
  border:1px solid var(--gb-border);border-radius:var(--gb-radius);
  transition:border-color var(--t-base),transform var(--t-base),box-shadow var(--t-base);
}
.single-nav__item:hover{border-color:rgba(34,211,238,.45);transform:translateY(-3px);box-shadow:var(--gb-shadow)}
.single-nav__item small{
  font-family:var(--gb-font-label);font-size:9px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gb-text-muted);
}
.single-nav__item strong{font-family:var(--gb-font-head);font-size:1rem;color:var(--gb-heading);font-weight:600}
.single-nav__item--next{text-align:right;align-items:flex-end}

.related-posts{margin-top:3rem}

/* ── 支持：资料清单 ───────────────────────────────── */
.gb-list{display:flex;flex-direction:column;gap:.6rem}
.gb-link{
  display:flex;align-items:center;gap:.9rem;
  min-height:var(--gb-tap);padding:.95rem 1.15rem;
  background:var(--gb-white);border:1px solid var(--gb-border);
  border-radius:var(--gb-radius);
  transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.gb-link:hover{border-color:var(--gb-cyan);transform:translateX(4px);box-shadow:var(--gb-shadow)}
.gb-link svg{color:var(--gb-ink-link);flex-shrink:0}
.gb-link__t{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--gb-heading)}
.gb-link__d{display:block;font-size:var(--fs-xs);color:var(--gb-text-muted)}
.gb-link__k{
  margin-left:auto;flex-shrink:0;font-family:var(--gb-font-mono);
  font-size:10px;color:var(--gb-text-muted);
}

/* ── 关于：价值卡 ─────────────────────────────────── */
.gb-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}
.gb-value{
  background:var(--gb-white);border:1px solid var(--gb-border);
  border-radius:var(--gb-radius);padding:1.5rem;
  transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);
}
.gb-value:hover{transform:translateY(-5px);box-shadow:var(--gb-shadow-lg);border-color:rgba(34,211,238,.45)}
.gb-value__n{
  font-family:var(--gb-font-mono);font-size:var(--fs-xs);font-weight:600;
  color:var(--gb-ink-link);letter-spacing:.16em;margin-bottom:.6rem;display:block;
}
.gb-value__t{font-family:var(--gb-font-head);font-size:1.08rem;color:var(--gb-heading);margin:0 0 .45rem}
.gb-value__d{font-size:var(--fs-sm);color:var(--gb-text-muted);margin:0}

/* ── 响应式 ───────────────────────────────────────── */
@media (max-width:900px){
  .pd{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .gb-contact{grid-template-columns:1fr}
}
@media (max-width:640px){
  .single-navigation{grid-template-columns:1fr}
  .single-nav__item--next{text-align:left;align-items:flex-start}
  .news-item{flex-direction:column;gap:.75rem}
  .news-item__date{display:flex;gap:.5rem;align-items:baseline;width:auto}
}