/* ============================================================
   sections-b.css — 首页区块 B
   解决方案 / 案例 / 资质 / 历程 / 智造 / 服务网络
   资讯 / FAQ / CTA / 遥测
   ============================================================ */

/* ── 通用图文两栏 ─────────────────────────────────── */
.gb-split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,3.5rem);align-items:center;
}
.gb-lead{font-size:var(--fs-lead);color:var(--gb-text-muted);margin-bottom:var(--s-5)}
.gb-figure{
  position:relative;overflow:hidden;
  border-radius:var(--gb-radius);aspect-ratio:4/3;
  background:var(--gb-media);
  display:grid;place-items:center;
}
.gb-figure canvas{position:absolute;inset:0;width:100%;height:100%}
.gb-figure__cap{
  position:absolute;bottom:1rem;left:1rem;right:1rem;
  font-family:var(--gb-font-mono);font-size:10px;letter-spacing:.14em;
  color:rgba(255,255,255,.9);
  background:rgba(6,8,16,.45);backdrop-filter:blur(6px);
  padding:.5rem .75rem;border-radius:8px;
}

/* ── 解决方案 ─────────────────────────────────────── */
.gb-sol-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1.25rem;
}
.gb-sol{
  position:relative;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-sol:hover{
  transform:translateY(-5px);
  box-shadow:var(--gb-shadow-lg);
  border-color:rgba(34,211,238,.45);
}
.gb-sol__ic{
  width:46px;height:46px;border-radius:13px;margin-bottom:1.1rem;
  background:linear-gradient(140deg,rgba(255,107,26,.13),rgba(34,211,238,.16));
  display:grid;place-items:center;color:var(--gb-ink-link);
}
.gb-sol__ic svg{width:22px;height:22px}
.gb-sol__t{font-family:var(--gb-font-head);font-size:1.1rem;color:var(--gb-heading);margin:0 0 .45rem}
.gb-sol__d{font-size:var(--fs-sm);color:var(--gb-text-muted);margin:0 0 .9rem}
.gb-sol__tags{display:flex;gap:.35rem;flex-wrap:wrap}
.gb-tag{
  font-family:var(--gb-font-mono);font-size:10px;color:var(--gb-ink-link);
  background:rgba(255,107,26,.08);border:1px solid rgba(255,107,26,.18);
  border-radius:6px;padding:.2rem .5rem;
}

/* ── 案例 ─────────────────────────────────────────── */
.gb-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.gb-case{
  position:relative;overflow:hidden;
  border-radius:var(--gb-radius);min-height:250px;
  background:var(--gb-media);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.5rem;color:#fff;
  transition:transform var(--t-base),box-shadow var(--t-base);
}
.gb-case:hover{transform:translateY(-6px);box-shadow:var(--gb-shadow-lg)}
.gb-case__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,8,16,.10),rgba(6,8,16,.88));
}
.gb-case__mesh{
  position:absolute;inset:0;opacity:.5;
  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:26px 26px;
}
/* GuBruce 2026-10-12：案例实景图位。图片铺满卡片并置于网格/遮罩之下、文字之上。
   原先卡底大面积空白即为此图预留；占位图到位后空白被填实。
   注意 z-index 层级：img(0) < overlay(1)…实际 overlay/mesh 均 absolute 无 z-index，
   靠 DOM 顺序叠放 —— img 排在 mesh 之后、overlay 之前，正好被 overlay 压暗。 */
.gb-case__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
.gb-case__in{position:relative;z-index:1}
/* 无图时（索引越界/加载失败）隐藏，避免出现破图图标 */
.gb-case__img:not([src]),.gb-case__img[src=""]{display:none}
.gb-case__n{
  font-family:var(--gb-font-mono);font-weight:600;
  font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;
  color:#fff;text-shadow:0 0 28px rgba(34,211,238,.45);
}
.gb-case__n small{font-size:.34em;letter-spacing:.1em;margin-left:.35rem;opacity:.85}
.gb-case__title{font-family:var(--gb-font-head);font-size:1.15rem;color:#fff;margin:.5rem 0 .3rem}
.gb-case__loc{
  font-family:var(--gb-font-label);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9);
  margin:0 0 .5rem;
}
.gb-case__d{font-size:var(--fs-sm);color:rgba(255,255,255,.88);margin:0 0 .75rem}
.gb-case__tags{display:flex;gap:.3rem;flex-wrap:wrap}
.gb-case__tag{
  font-family:var(--gb-font-mono);font-size:10px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);
  border-radius:6px;padding:.2rem .5rem;color:#fff;
}
.gb-case--big{grid-column:1/-1;min-height:340px;justify-content:center}
.gb-case--big .gb-case__in{max-width:640px}

/* ── 资质认证 ─────────────────────────────────────── */
.gb-certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1rem}
.gb-cert{
  background:var(--gb-white);border:1px solid var(--gb-border);
  border-radius:var(--gb-radius);padding:1.25rem 1rem;text-align:center;
  transition:transform var(--t-base),border-color var(--t-base),box-shadow var(--t-base);
}
.gb-cert:hover{
  transform:translateY(-4px);border-color:var(--gb-cyan);box-shadow:var(--gb-shadow);
}
.gb-cert__t{font-family:var(--gb-font-head);font-size:1.05rem;color:var(--gb-heading);margin:0 0 .25rem}
.gb-cert__d{font-size:var(--fs-xs);color:var(--gb-text-muted);margin:0}

/* ── 发展历程 ─────────────────────────────────────── */
.gb-timeline{position:relative;padding-left:2rem;max-width:820px}
.gb-timeline::before{
  content:"";position:absolute;left:7px;top:.6rem;bottom:.6rem;
  width:2px;background:var(--gb-border);
}
.gb-tl{position:relative;padding-bottom:1.85rem}
.gb-tl:last-child{padding-bottom:0}
.gb-tl::before{
  content:"";position:absolute;left:-2.05rem;top:.4rem;
  width:16px;height:16px;border-radius:50%;
  background:var(--gb-white);border:3px solid var(--gb-ink-link);
  box-shadow:0 0 0 4px rgba(255,107,26,.10);
  transition:transform var(--t-base);
}
.gb-tl:hover::before{transform:scale(1.15)}
.gb-tl__y{
  font-family:var(--gb-font-mono);font-size:var(--fs-sm);font-weight:600;
  color:var(--gb-ink-link);letter-spacing:.06em;
}
.gb-tl__t{font-family:var(--gb-font-head);font-size:1.08rem;color:var(--gb-heading);margin:.15rem 0 .3rem}
.gb-tl__d{font-size:var(--fs-sm);color:var(--gb-text-muted);margin:0}

/* ── 智造 · 进度条 ────────────────────────────────── */
.gb-bars{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.75rem}
.gb-bar__top{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--fs-sm);margin-bottom:.4rem;
}
.gb-bar__top b{color:var(--gb-heading);font-weight:600}
.gb-bar__top span{font-family:var(--gb-font-mono);font-size:var(--fs-sm);color:var(--gb-ink-link)}
.gb-bar__track{height:6px;border-radius:3px;background:var(--gb-border);overflow:hidden}
.gb-bar__fill{
  height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--gb-ink-link),var(--gb-cyan));
  transition:width 1.5s cubic-bezier(.22,.61,.36,1);
}

/* ── 服务网络 ─────────────────────────────────────── */
.gb-offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1.25rem}
.gb-office{
  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-office:hover{
  transform:translateY(-4px);border-color:rgba(34,211,238,.45);box-shadow:var(--gb-shadow);
}
.gb-office__t{font-family:var(--gb-font-head);font-size:1.02rem;color:var(--gb-heading);margin:0 0 .45rem}
.gb-office p{font-size:var(--fs-sm);color:var(--gb-text-muted);margin:0 0 .2rem}
.gb-office p:last-child{margin-bottom:0}

/* ── 遥测 ─────────────────────────────────────────── */
.gb-tele{
  background:var(--gb-white);border:1px solid var(--gb-border);
  border-radius:var(--gb-radius);padding:1.1rem;
}
.gb-tele canvas{width:100%;height:118px;display:block}

/* ── 资讯 ─────────────────────────────────────────── */
.gb-news-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1.5rem}
.gb-news-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--gb-white);border:1px solid var(--gb-border);
  border-radius:var(--gb-radius);
  transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);
}
.gb-news-card:hover{
  transform:translateY(-5px);box-shadow:var(--gb-shadow-lg);
  border-color:rgba(34,211,238,.45);
}
.gb-news-card__media{
  aspect-ratio:16/9;position:relative;
  background:var(--gb-media);
  display:grid;place-items:center;overflow:hidden;
}
.gb-news-card__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:20px 20px;
}
.gb-news-card__cat{
  position:absolute;top:.75rem;left:.75rem;z-index:1;
  font-family:var(--gb-font-label);font-size:9px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  background:rgba(6,8,16,.5);color:#fff;
  padding:.28rem .6rem;border-radius:var(--gb-pill);
}
.gb-news-card__body{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.gb-news-card__meta{
  display:flex;gap:.85rem;align-items:center;
  font-family:var(--gb-font-mono);font-size:10px;letter-spacing:.1em;
  color:var(--gb-text-muted);
}
.gb-news-card__t{font-family:var(--gb-font-head);font-size:1.05rem;color:var(--gb-heading);margin:0}
.gb-news-card__d{font-size:var(--fs-sm);color:var(--gb-text-muted);margin:0}
.gb-news-card__more{
  margin-top:auto;padding-top:.85rem;
  font-size:var(--fs-sm);font-weight:600;color:var(--gb-ink-link);
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:44px;   /* 红线⑥：触控目标 ≥44px（原 41px） */
}
.gb-news-card:hover .gb-news-card__more svg{transform:translateX(4px)}
.gb-news-card__more svg{transition:transform var(--t-base)}

/* ── FAQ ──────────────────────────────────────────── */
.gb-faq{display:flex;flex-direction:column;gap:.65rem;max-width:860px;margin-inline:auto}
.gb-faq__item{
  border:1px solid var(--gb-border);border-radius:var(--gb-radius);
  background:var(--gb-white);overflow:hidden;
  transition:border-color var(--t-base);
}
.gb-faq__item.is-open{border-color:rgba(34,211,238,.45);box-shadow:var(--gb-shadow)}
.gb-faq__q{
  width:100%;display:flex;align-items:center;gap:1rem;
  min-height:var(--gb-tap);padding:1.1rem 1.4rem;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--gb-font-body);font-size:1rem;font-weight:600;
  color:var(--gb-heading);
  transition:color var(--t-fast);
}
.gb-faq__q:hover{color:var(--gb-ink-link)}
.gb-faq__ic{
  margin-left:auto;flex-shrink:0;width:20px;height:20px;
  color:var(--gb-ink-link);transition:transform var(--t-base);
}
.gb-faq__item.is-open .gb-faq__ic{transform:rotate(45deg)}
.gb-faq__a{max-height:0;overflow:hidden;transition:max-height var(--t-slow)}
.gb-faq__item.is-open .gb-faq__a{max-height:460px}
.gb-faq__a p{padding:0 1.4rem 1.3rem;margin:0;font-size:var(--fs-sm);color:var(--gb-text-muted)}

/* ── CTA ──────────────────────────────────────────── */
.gb-cta{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(140deg,var(--gb4-bg-2),var(--gb4-bg-3));
  color:var(--gb4-text);
  border:1px solid var(--gb4-border);
  border-radius:var(--gb-radius);
  padding:clamp(2rem,5vw,3.75rem) clamp(1.25rem,4vw,3rem);
}
.gb-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--hud-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--hud-grid) 1px,transparent 1px);
  background-size:46px 46px;
}
.gb-cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(34,211,238,.14),transparent 70%);
}
.gb-cta__in{position:relative;z-index:1}
.gb-cta__t{font-family:var(--gb-font-head);font-size:var(--fs-h2);color:var(--gb4-text);margin:0 0 .8rem}
.gb-cta__d{color:var(--gb4-text-2);max-width:58ch;margin:0 auto 1.85rem}
.gb-cta__actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* ── 响应式 ───────────────────────────────────────── */
@media (max-width:1024px){
  .gb-split{grid-template-columns:1fr}
  .gb-cases{grid-template-columns:1fr 1fr}
  .gb-case--big{grid-column:1/-1}
}
@media (max-width:640px){
  .gb-cases{grid-template-columns:1fr}
  .gb-timeline{padding-left:1.6rem}
  .gb-tl::before{left:-1.65rem}
  .gb-cta__actions{flex-direction:column}
}