/* ==========================================================================
   anli-2.css —— 食品品牌营销站案例私有样式
   结构：页头 → 项目背景 → 前后对比双栏 → 做了什么 → 设计亮点 → 成果 → 技术 → 评价 → 相关 → CTA
   ========================================================================== */

.case-hero {
  background: var(--rice-deep);
  padding: 48px 0 56px;
}
.case-hero .case-eyebrow {
  font-size: .8rem;
  letter-spacing: .25em;
  color: var(--bamboo);
  margin-bottom: 10px;
}
.case-hero h1 { margin-bottom: 14px; }
.case-hero .case-sub { max-width: 760px; margin-bottom: 20px; }
.case-meta { display: flex; gap: 10px; flex-wrap: wrap; }

/* 前后对比双栏 */
.compare-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.compare-col {
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--line);
}
.compare-col h3 { margin-bottom: 16px; }
.compare-col ul li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
  font-size: .92rem;
  color: var(--ink-soft);
}
.compare-before { background: #f0ece2; }
.compare-before h3 { color: var(--ink-soft); }
.compare-before ul li::before {
  content: "×";
  position: absolute; left: 0;
  color: var(--ink-soft);
}
.compare-after {
  background: var(--bamboo-mist);
  border-color: rgba(86, 123, 78, .3);
}
.compare-after h3 { color: var(--bamboo-deep); }
.compare-after ul li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--bamboo);
}
.compare-img { margin-top: 28px; }
.compare-img img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.work-sec { background: var(--paper); }

/* 设计亮点 */
.design-sec figure img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* 成果数据 */
.result-sec { background: var(--bamboo-mist); }
.result-sec .stats .stat-num { color: var(--bamboo-deep); }
.wall-note { font-size: .8rem; color: var(--ink-soft); margin-top: 18px; }

/* 技术清单 */
.tech-sec { background: var(--paper); }
.tech-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tech-tags .tag { font-size: .85rem; padding: 6px 16px; }

.related-card { display: block; }
.related-card h4 { margin: 12px 0 8px; }
.related-card p { font-size: .88rem; }

/* CTA：宣纸背景图 + 墨字 */
.cta-band {
  background:
    linear-gradient(rgba(251, 250, 246, .86), rgba(251, 250, 246, .92)),
    url("../images/cta-bg.jpg") center / cover no-repeat;
  padding: 72px 0;
}
.cta-box { max-width: 720px; }
.cta-box h2 { margin-bottom: 12px; }
.cta-box p { margin-bottom: 20px; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 768px) {
  .compare-wrap { grid-template-columns: 1fr; }
}