/* ========================================================================
   四川石化全场流程学习平台 — 首页专属样式（home.css）
   加载顺序：在 main.css 之后，确保本页样式可覆盖通用样式。
   内容：
     1. 全场流程图 SVG 节点配色（与 main.css 变量对齐）
     2. 全场流程图 hover 联动（has-focus / is-hot / is-dim / is-focus）
     3. 首页 Hero / Diagram / Legend
     4. VSD 准确流程图引用区块
     5. 首页移动端响应式
   ======================================================================== */

/* ===== 1. 全场流程图 SVG 节点配色 =====
   调色板来源：main.css :root 中的 --node-* 变量；本页直接重复声明便于内联阅读。
   颜色值必须与 main.css 完全一致，便于后续统一维护。 */

.node-main { fill: var(--node-refining); stroke: var(--node-refining-stroke); stroke-width: 0.5; }
.node-main .label { fill: var(--node-refining-label); }
.node-main .cap { fill: rgba(29,29,31,0.62); }

.node-chemical { fill: var(--node-chemical); stroke: var(--node-chemical-stroke); stroke-width: 0.5; }
.node-chemical .label { fill: var(--node-chemical-label); }
.node-chemical .cap { fill: rgba(0,88,163,0.65); }

.node-storage { fill: var(--node-storage); stroke: var(--node-storage-stroke); stroke-width: 0.5; }
.node-storage .label { fill: var(--node-storage-label); }
.node-storage .cap { fill: rgba(124,88,0,0.65); }

.node-utility { fill: var(--node-utility); stroke: var(--node-utility-stroke); stroke-width: 0.5; }
.node-utility .label { fill: var(--node-utility-label); }
.node-utility .cap { fill: rgba(29,107,58,0.65); }

.node-product { fill: var(--node-product); stroke: var(--node-refining-stroke); stroke-width: 0.5; }
.node-product .label { fill: var(--node-refining-label); }
.node-product .cap { fill: rgba(29,29,31,0.62); }

.node-flare { fill: var(--node-chemical); stroke: var(--node-chemical-stroke); stroke-width: 0.5; }
.node-flare .label { fill: var(--node-chemical-label); }
.node-flare .cap { fill: rgba(0,88,163,0.65); }

/* 待补充装置：白底 + 红虚线 */
.node-pending {
  fill: #ffffff;
  stroke: var(--node-pending-stroke);
  stroke-width: 1.5;
  stroke-dasharray: 4,3;
}
.node-pending .label { fill: var(--node-pending-stroke) !important; }
.node-pending .cap   { fill: rgba(196,78,82,0.8) !important; }

/* 节点悬浮效果：节点整体加阴影 + 内部亮度提升 + label 字重加大 */
.node { cursor: pointer; transition: filter 0.25s ease; }
.node rect { transition: filter 0.25s ease; }
.node:hover { filter: drop-shadow(0 4px 14px rgba(0,0,0,0.10)); }
.node:hover rect { filter: brightness(1.06); }
.node:hover .label { font-weight: 700; }

/* SVG 文本：节点名称 + 产能副标 */
.label {
  font: 600 13px -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
        "Microsoft YaHei", sans-serif;
  fill: var(--text);
  text-anchor: middle;
  pointer-events: none;
}
.cap {
  font: 11px -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
       "Microsoft YaHei", sans-serif;
  fill: rgba(29,29,31,0.62);
  text-anchor: middle;
  pointer-events: none;
}

/* 列标题（外购原料/一次加工/二次加工/化工区/产品罐区/外销） */
.col-title {
  font: 600 13px -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  fill: var(--text-muted);
  text-anchor: middle;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* 工艺链分组副标题（圆角小色块 + 白字）
   输入链灰 / 炼油主链棕 / 化工链蓝 / 产品链橙 */
.chain-tag {
  font: 600 10px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  fill: #ffffff;
  text-anchor: middle;
  letter-spacing: 0.4px;
}
.chain-tag.chain-input  { fill: #6b7280; }
.chain-tag.chain-main   { fill: #6B4423; }
.chain-tag.chain-chem   { fill: #1E5A9C; }
.chain-tag.chain-output { fill: #D86C1F; }

/* 工艺链背景分隔带（极淡虚线圆角矩形，仅作视觉锚点） */
.chain-band {
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 2 4;
  rx: 14;
}
.chain-band.refining { stroke: rgba(107, 68, 35, 0.18); }
.chain-band.chemical { stroke: rgba(30, 90, 156, 0.18); }

/* ===== 2. 全场流程图 hover 联动 v2（通用方案，33 装置同套规则） =====
   工作原理：
     - 每个 <g class="node"> 带 data-slug + data-unit-id
     - JS 监听 mouseenter/mouseleave，自动给 svg 加 .has-focus 类
       给关联元素加 .is-hot，非关联元素加 .is-dim
     - 鼠标离开 → 清除所有 class
   视觉效果：
     - 高亮节点：保持原色 + 阴影 + label 加粗
     - 焦点装置（被 hover 的）：额外强光晕
     - 高亮连线：按物料类型加粗（crude/naphtha 3.6px, gas 3.2px, utility 2.2px）
     - 暗化元素：opacity 0.18（节点）
   URL 锚点 demo 模式：
     - ?focus=<slug> 或 #focus-<slug> → 强制进入"模拟 hover"状态
     - 用于无鼠标截图 / 远程演示 */

/* 1) 全场过渡动效 */
#diagram-svg #nodes .node,
#diagram-svg #nodes .node rect,
#diagram-svg #nodes .node text {
  transition: opacity 0.28s ease, filter 0.28s ease, stroke-width 0.28s ease, stroke 0.28s ease, font-weight 0.2s ease;
}

/* 2) 暗化（非关联装置） */
#diagram-svg.has-focus #nodes .node.is-dim {
  opacity: 0.18;
  pointer-events: none;
}

/* 3) 关联装置（1 级邻居）：保持原色 + 加粗边框 + label 加粗 */
#diagram-svg.has-focus #nodes .node.is-hot rect {
  stroke-width: 1.6;
  stroke: #1d1d1f;
}
#diagram-svg.has-focus #nodes .node.is-hot .label {
  font-weight: 700;
}

/* 4) 焦点装置（被 hover 的节点）：橙色强光晕 + 橙色边框 + 大字号 */
#diagram-svg.has-focus #nodes .node.is-hot.is-focus rect {
  stroke-width: 3;
  stroke: #ff6b1a;
  filter: brightness(1.04) drop-shadow(0 0 14px rgba(255, 107, 26, 0.65)) drop-shadow(0 0 6px rgba(255, 180, 80, 0.4));
}
#diagram-svg.has-focus #nodes .node.is-hot.is-focus .label {
  font-weight: 800;
  font-size: 15px;
  fill: #c44e00;
}

/* 5) 移动端无 hover，保留完整可读性 */
@media (hover: none) {
  /* 触屏环境下关闭暗化逻辑，全部保持可见 */
  #diagram-svg.has-focus #nodes .node {
    opacity: 1 !important;
  }
}

/* ===== 3. 首页 Hero / Diagram / Legend ===== */

.hero {
  text-align: center;
  padding: 96px 24px 48px;
  max-width: 1100px;
  margin: 0 auto;
}
.hero .eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.hero h1 {
  font-size: 56px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
  letter-spacing: -0.015em;
  line-height: 1.07;
  border-bottom: none;            /* 覆盖 main.css h1 默认分隔线 */
  padding-bottom: 0;
}
.hero .subtitle {
  font-size: 21px;
  font-weight: 400;
  color: var(--text-soft);
  margin: 0 auto;
  max-width: 760px;
  line-height: 1.42;
}
.hero .stats {
  display: flex;
  justify-content: center;
  gap: 56px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero .stat { text-align: center; }
.hero .stat .num {
  font-size: 32px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.hero .stat .lbl {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* 流程图容器 */
.diagram-wrap {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 24px 48px;
}
.diagram {
  background: var(--card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 24px;
  overflow: hidden;
}
.diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 图例 */
.legend {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 20px 24px 0;
  font-size: 13px;
  color: var(--text-soft);
  flex-wrap: wrap;
}
.legend .item { display: flex; align-items: center; gap: 8px; }
.legend .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.legend .legend-hint {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  margin-left: 8px;
  padding-left: 16px;
  border-left: 2px solid var(--border-strong);
}

/* ===== 4. VSD 准确流程图引用区块（首页独有） ===== */
.vsd-reference {
  max-width: 1100px;
  margin: 56px auto 32px;
  padding: 28px 32px;
  background: var(--bg-soft);
  border-radius: 16px;
  text-align: center;
}
.vsd-reference h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.vsd-reference p {
  color: var(--text-soft);
  font-size: 14px;
  margin: 0 0 20px;
  line-height: 1.6;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.vsd-reference a.vsd-link {
  display: inline-block;
  padding: 12px 28px;
  background: var(--text);
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease, transform 0.15s ease;
}
.vsd-reference a.vsd-link:hover {
  background: var(--accent);
  text-decoration: none;
  transform: translateY(-1px);
}
.vsd-meta {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 12px;
}

/* ===== 5. 首页移动端响应式 ===== */
@media (max-width: 900px) {
  .hero h1 { font-size: 38px; }
  .hero .subtitle { font-size: 18px; }
  .hero .stats { gap: 28px; }
  .hero { padding: 60px 20px 32px; }
  .vsd-reference { padding: 20px; }
}