/* ============================================
   article-content.css
   文章/案例 正文渲染样式（统一管理）
   被 views/web/cases-detail.ejs、views/web/news-detail.ejs、views/admin/editor.ejs 预览区引用
   ============================================ */

/* 正文基础样式 */
.article-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #334155;
}
.article-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0A1628;
  margin: 48px 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #E2E8F0;
}
.article-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1E293B;
  margin: 32px 0 16px;
}
.article-content p { margin-bottom: 16px; }
.article-content ul,
.article-content ol { margin: 16px 0 24px 24px; }
.article-content li { margin-bottom: 8px; }
.article-content strong { color: #0A1628; font-weight: 600; }
.article-content blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  background: #F8FAFC;
  border-left: 4px solid #4A5BFF;
  border-radius: 0 8px 8px 0;
  color: #475569;
  font-style: italic;
}
.article-content pre {
  background: #F1F5F9;
  padding: 12px 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: .88rem;
  line-height: 1.6;
  margin: 16px 0;
}

/* 高亮框 */
.article-content .highlight-box {
  background: linear-gradient(135deg, #F0F4FF, #E8F4FF);
  padding: 24px;
  border-radius: 12px;
  margin: 24px 0;
}
.article-content .highlight-box h4 {
  color: #4A5BFF;
  margin-bottom: 12px;
}

/* 对比框（before/after）*/
.article-content .comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
.article-content .comparison .before,
.article-content .comparison .after {
  padding: 20px;
  border-radius: 12px;
}
.article-content .comparison .before {
  background: #FEF2F2;
  border: 1px solid #FECACA;
}
.article-content .comparison .after {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
}
.article-content .comparison h4 {
  margin-bottom: 12px;
  font-size: 1rem;
}
.article-content .comparison .before h4 { color: #DC2626; }
.article-content .comparison .after h4 { color: #16A34A; }

/* 流程图/图片容器 */
.article-content .diagram {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px;
  margin: 32px 0;
  text-align: center;
  position: relative;
  overflow: visible;
}
.article-content .diagram svg,
.article-content .diagram img {
  max-width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: transform 0.3s ease;
}
.article-content .diagram svg:hover,
.article-content .diagram img:hover {
  transform: scale(1.02);
}
.article-content .diagram-caption {
  font-size: .85rem;
  color: #94A3B8;
  margin-top: 12px;
}

/* 指标展示网格 */
.article-content .metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 24px 0;
}
.article-content .metric-card {
  background: linear-gradient(135deg, #4A5BFF, #7B3FF2);
  color: #fff;
  border-radius: 16px;
  padding: 32px 20px;
  text-align: center;
}
.article-content .metric-card .value {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 8px;
}
.article-content .metric-card .label {
  font-size: .95rem;
  opacity: .85;
}

/* 对比表格 */
.article-content .comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: .95rem;
  border-radius: 12px;
  overflow: hidden;
}
.article-content .comparison-table th {
  background: linear-gradient(135deg, #4A5BFF, #7B3FF2);
  color: #fff;
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
}
.article-content .comparison-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #E2E8F0;
}
.article-content .comparison-table tr:nth-child(even) td {
  background: #F8FAFC;
}
.article-content .comparison-table tr:hover td {
  background: #F0F4FF;
}

/* 图片 */
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 12px 0;
}

/* 视频 */
.article-content video {
  max-width: 100%;
  border-radius: 8px;
  margin: 12px 0;
}

/* 响应式 */
@media (max-width: 1023px) {
  .article-content .diagram { margin: 24px 0; }
  .article-content .comparison { grid-template-columns: 1fr; }
  .article-content .metric-grid { grid-template-columns: 1fr; }
  .article-content .comparison-table { font-size: .85rem; }
  .article-content .comparison-table th,
  .article-content .comparison-table td { padding: 10px 8px; }
}
@media (max-width: 768px) {
  .article-content .comparison { grid-template-columns: 1fr; }
  .article-content .metric-grid { grid-template-columns: 1fr; }
  .article-content .comparison-table { font-size: .85rem; }
  .article-content .comparison-table th,
  .article-content .comparison-table td { padding: 10px 8px; }
}

/* 相关推荐 */
.related-section {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #E2E8F0;
}
.related-section h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0A1628;
  margin-bottom: 20px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.related-card {
  display: block;
  padding: 20px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.related-card:hover {
  border-color: #4A5BFF;
  box-shadow: 0 4px 16px rgba(74,91,255,.1);
  transform: translateY(-2px);
}
.related-category {
  display: inline-block;
  font-size: .75rem;
  color: #4A5BFF;
  background: #F0F4FF;
  padding: 2px 10px;
  border-radius: 12px;
  margin-bottom: 10px;
}
.related-card h4 {
  font-size: .95rem;
  font-weight: 600;
  color: #0A1628;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-card p {
  font-size: .82rem;
  color: #64748B;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 768px) {
  .related-grid { grid-template-columns: 1fr; }
}