/* 实现工作项 #26 重构产品体系详情区 — 产品体系区样式
   端到端架构图（.arch）+ 3 个产品段（.prod 左右分栏）+ 三张 CSS 示意图（.viz）。
   依赖 #16 设计变量（variables.css）；文案由 #25 机制填充到 .prod__text[data-md]。
   本文件仅服务 #products 区块，不动全局。 */

/* ===================== 端到端架构图 ===================== */
.arch {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-10) 0 var(--space-12);
}
.arch__node {
  flex: 1 1 0;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: var(--ease);
}
a.arch__node:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-blue);
}
.arch__layer { font-size: var(--fs-sm); color: var(--color-text-soft); }
.arch__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-deep);
  line-height: var(--lh-tight);
}
.arch__caps { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); }
.arch__caps li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-gray);
  line-height: 1.6;
}
.arch__caps li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--color-cyan);
}
.arch__node--goal {
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--grad-deep);
  border: none;
  color: #fff;
}
.arch__node--goal .arch__layer { color: #bcd2e8; }
.arch__node--goal .arch__name { color: #fff; }
.arch__arrow {
  align-self: center;
  font-size: var(--fs-xl);
  color: var(--color-blue);
  flex: 0 0 auto;
}

/* ===================== 产品段（左文右图分栏） ===================== */
.prod {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--color-line);
  scroll-margin-top: calc(var(--header-h) + var(--space-6)); /* 锚点跳转不被固定头遮挡 */
}
.prod--reverse .prod__text { order: 2; }
.prod--reverse .prod__viz { order: 1; }
.prod__viz {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: var(--space-8);
  background: var(--color-soft);
  border-radius: var(--radius-xl);
}

/* ===================== CSS 能力示意图 ===================== */
.viz {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  width: 100%;
}
.viz-chip {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-deep);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
}
.viz-col { display: flex; flex-direction: column; gap: var(--space-2); }
.viz-flow { font-size: var(--fs-2xl); color: var(--color-blue); }
.viz-flow--down { width: 100%; text-align: center; }
.viz-hub, .viz-plat, .viz-funnel, .viz-out, .viz-value, .viz-layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--grad-brand);
}
.viz-hub { background: var(--color-blue); }
.viz-plat, .viz-value { background: var(--grad-deep); }
.viz-funnel { background: var(--grad-brand); }
.viz-funnel small, .viz-layer small {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  opacity: .9;
}
.viz-out {
  background: var(--color-bg);
  color: var(--color-deep);
  border: 1px solid var(--color-line);
}
/* AI 双层结构 */
.viz--ai { flex-direction: column; }
.viz-layer { width: 80%; }
.viz-layer--small { background: var(--color-cyan); color: var(--color-deep); }
.viz-layer--big { background: var(--grad-deep); }

/* ===================== 响应式 ===================== */
@media (max-width: 860px) {
  .arch { flex-direction: column; }
  .arch__node { min-width: 0; }
  .arch__node--goal { align-self: stretch; }
  .arch__arrow { transform: rotate(90deg); } /* 竖排时箭头转向下 */
  .prod { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-10) 0; }
  /* 手机上统一「文案在上、示意图在下」，覆盖 reverse 的 order */
  .prod--reverse .prod__text,
  .prod--reverse .prod__viz { order: 0; }
}
@media (max-width: 640px) {
  .prod__viz { min-height: 160px; padding: var(--space-5); }
}

/* ===================== 价值链落点高亮（实现工作项 #27 数据价值链四环可点击定位） ===================== */
/* 存储无独立产品段，落点为架构图存储环，补锚点偏移避免被固定头遮挡 */
#arch-storage {
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}
/* 落点短暂高亮：品牌青描边 + 轻外发光，约 1.5s 淡出。JS 加 .is-flash，animationend 后移除 */
.is-flash {
  animation: vc-flash 1.5s cubic-bezier(.4, 0, .2, 1) 1;
}
@keyframes vc-flash {
  0%   { box-shadow: 0 0 0 3px var(--color-cyan), 0 0 16px 2px rgba(0, 198, 212, .55); }
  100% { box-shadow: 0 0 0 3px rgba(0, 198, 212, 0), 0 0 16px 2px rgba(0, 198, 212, 0); }
}