/* ==========================================================================
   案例详情页 case-detail.html —— 按《麦秸映像改版/4案例展示-详情.png》设计稿实现
   复用 style.css / case.css 中的头部、页脚、在线留言与悬浮工具样式，
   本文件只负责详情内容区（案例信息 + 青色展示区）
   ========================================================================== */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ 案例信息 ============ */
.cd-intro { background: #fff; padding: 58px 0 52px; text-align: center; }
.cd-intro h1,
.cd-intro .cd-title {
  margin: 0 0 20px;
  font-size: 34px;
  font-weight: 700;
  color: var(--mj-blue);
  text-shadow: none;
  -webkit-text-stroke: 0;
  filter: none;
}
.cd-meta { margin: 0; font-size: 14px; color: var(--mj-sub); }
.cd-meta .sep { display: inline-block; margin: 0 30px; }
.cd-divider { max-width: 1400px; margin: 30px auto 0; border: 0; border-top: 1px solid var(--mj-line); }
.cd-desc { margin: 30px 0 0; font-size: 15px; line-height: 1.9; }
.cd-desc strong { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 700; color: var(--mj-text); }

/* 全局 style.css 把 img 设成 display:block，text-align:center 无效，需 margin 居中 */
.cd-content { margin-top: 16px; text-align: center; }
.cd-content p { margin: 0 0 12px; }
.cd-content img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100%;
  height: auto;
}

/* ============ 案例展示区 ============ */
.cd-show { max-width: 1400px; margin: 0 auto; margin-bottom: 157px; }

/* 深青色块：两张主界面大图 */
.cs-hero {
  display: flex; justify-content: center; align-items: flex-start; gap: 93px;
  padding: 85px 24px 73px;
  background: #22A69C;
}
.cs-hero img { width: 512px; max-width: 100%; height: auto; display: block; }

/* 浅青色块：三列手机界面截图 */
.cs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: start;
  gap: 0 50px; padding: 45px 29px 125px;
  background: #BDE5E2;
}
.cs-col { display: flex; flex-direction: column; gap: 122px; min-width: 0; }
.cs-col img { width: 100%; height: auto; display: block; }

/* ============ 响应式 ============ */
@media (max-width: 1440px) {
  .cd-show { margin: 0 20px; }
}

@media (max-width: 1080px) {
  .cd-intro { padding: 44px 0 40px; }
  .cd-intro h1 { font-size: 28px; }
  .cs-hero { gap: 40px; padding: 48px 20px 44px; }
  .cs-hero img { width: 42%; }
  .cs-grid { grid-template-columns: repeat(2, 1fr); gap: 60px 24px; padding: 32px 24px 64px; }
  .cs-col { gap: 60px; }
}

@media (max-width: 640px) {
  .cd-intro { padding: 36px 0 32px; }
  .cd-intro h1 { font-size: 24px; margin-bottom: 14px; }
  .cd-meta { font-size: 13px; }
  .cd-meta .sep { margin: 0 12px; }
  .cd-desc { padding: 0 6px; text-align: left; }
  .cs-hero { flex-direction: column; align-items: center; gap: 24px; padding: 32px 16px 28px; }
  .cs-hero img { width: min(320px, 88%); }
  .cs-grid { grid-template-columns: 1fr; gap: 32px; padding: 24px 16px 40px; }
  .cs-col { gap: 32px; }
  .cd-show { margin: 0 12px; }
}