/* 实现工作项 #21 — 行业案例栏目（两张案例卡 + 顶部数据可视化示意）
   依赖 #16 设计变量与公共样式（.section/.section-head/.card/.tag）、#17 框架。
   两卡：海上风机性能异常诊断（散点分类）/ 风电机组劣化趋势分析（趋势阈值曲线）。
   顶部 canvas 为纯抽象示意，不含真实业务数据；文案取自产品方案 PPT，无编造。 */

/* ===================== 案例卡网格：PC 两列 ===================== */
.cchain {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

/* 案例卡（基于 .card，去掉默认内边距以让顶部可视化通栏） */
.ccard {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ===================== 顶部可视化区 ===================== */
.ccard__viz {
  position: relative;
  height: 180px;
  background: linear-gradient(150deg, var(--color-deep-2), var(--color-deep) 60%, #1a4f82);
  border-bottom: 1px solid var(--color-line);
}
.ccard__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 图例：浮于可视化右上角 */
.ccard__legend {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: #cfe0f0;
  background: rgba(18, 41, 77, .45);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(2px);
}
.ccard__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: var(--space-2);
}
.ccard__dot--normal { background: var(--color-cyan); }
.ccard__dot--fault  { background: #ff7a8a; }
.ccard__line {
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  margin-left: var(--space-2);
  vertical-align: middle;
}
.ccard__line--trend     { background: var(--color-blue); }
.ccard__line--threshold {
  background: transparent;
  border-top: 2px dashed #ff7a8a;
  height: 0;
}

/* ===================== 卡片正文 ===================== */
.ccard__body { padding: var(--space-8) var(--space-6); }
.ccard__tag { display: block; margin-bottom: var(--space-2); }
.ccard__title {
  font-size: var(--fs-xl);
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
}
.ccard__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  line-height: var(--lh-base);
  margin: 0;
}

/* ===================== 响应式：手机单列 ===================== */
@media (max-width: 640px) {
  .cchain { grid-template-columns: 1fr; }
  .ccard__viz { height: 150px; }
}