/* ==========================================================================
   托管邦建站 - 营销型长网页组件样式 (marketing.css)
   配合 style.css / pages.css 使用：米杏+浅棕+奶白配色，金属铜线条贯穿
   ========================================================================== */

/* ---------- 痛点卡片 ---------- */
.mk-pain-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.mk-pain-card {
  position:relative; padding:26px 22px 24px; background:#fff;
  border:1px solid var(--apricot-200); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.mk-pain-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.mk-pain-num {
  position:absolute; top:14px; right:18px; font-size:2.2rem; font-weight:700;
  color:var(--apricot-300); line-height:1; font-family:Georgia, serif;
}
.mk-pain-icon {
  width:46px; height:46px; border-radius:10px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--apricot-50); color:var(--copper-dark);
  border:1px solid var(--apricot-200);
}
.mk-pain-card h4 { font-size:1.06rem; margin-bottom:8px; color:var(--text-900); }
.mk-pain-card p { font-size:0.92rem; color:var(--text-500); line-height:1.75; }

/* ---------- 勾选清单 ---------- */
.mk-check-list { list-style:none; display:grid; gap:12px; }
.mk-check-item {
  display:flex; gap:12px; align-items:flex-start; padding:12px 14px;
  background:var(--cream-100); border:1px solid var(--apricot-200);
  border-left:3px solid var(--copper); border-radius:var(--radius-sm);
  font-size:0.95rem; color:var(--text-700); line-height:1.75;
}
.mk-check-item strong { color:var(--text-900); }
.mk-check-mark {
  flex:none; width:20px; height:20px; margin-top:2px; border-radius:50%;
  background:var(--copper); color:#fff; font-size:0.72rem;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- 标签芯片 ---------- */
.mk-chip-list { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.mk-chip {
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
  background:#fff; border:1px solid var(--apricot-300); border-radius:999px;
  color:var(--text-700); font-size:0.92rem; transition:all .25s var(--ease-out);
}
.mk-chip:hover { background:var(--apricot-50); border-color:var(--copper); color:var(--copper-dark); }
.mk-chip::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--copper); }

/* ---------- 图文分栏 ---------- */
.mk-split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.mk-split-media img { border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.mk-split-media .mk-media-cap {
  margin-top:12px; font-size:0.85rem; color:var(--text-400); text-align:center;
}
.mk-split-text .mk-h2 { font-size:1.7rem; color:var(--text-900); margin-bottom:14px; line-height:1.4; }
.mk-split-text p { margin-bottom:14px; line-height:1.9; color:var(--text-700); }
.mk-split-text .mk-subtitle { color:var(--copper-dark); font-weight:600; }

/* ---------- 客户证言 ---------- */
.mk-quote {
  position:relative; max-width:820px; margin:0 auto; padding:34px 40px 30px;
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow);
  border-top:3px solid var(--copper);
}
.mk-quote::before {
  content:"“"; position:absolute; top:6px; left:22px; font-size:4rem;
  line-height:1; color:var(--apricot-300); font-family:Georgia, serif;
}
.mk-quote p { font-size:1.08rem; line-height:1.95; color:var(--text-700); font-style:italic; }
.mk-quote-footer { margin-top:18px; display:flex; align-items:center; gap:14px; }
.mk-quote-avatar {
  width:44px; height:44px; border-radius:50%; background:var(--copper);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.05rem;
}
.mk-quote-name { color:var(--text-900); font-weight:600; font-size:0.98rem; }
.mk-quote-role { color:var(--text-400); font-size:0.85rem; }

/* ---------- 相关推荐卡片 ---------- */
.mk-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mk-related-card {
  display:block; padding:22px; background:#fff; border:1px solid var(--apricot-200);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  transition:all .3s var(--ease-out); text-decoration:none;
}
.mk-related-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--copper); }
.mk-related-card h4 { color:var(--text-900); font-size:1.02rem; margin-bottom:8px; }
.mk-related-card p { color:var(--text-500); font-size:0.9rem; line-height:1.7; margin-bottom:12px; }
.mk-related-link { color:var(--copper-dark); font-size:0.9rem; font-weight:600; }

/* ---------- 价值数据带 ---------- */
.mk-value-band {
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  padding:36px 32px; background:linear-gradient(135deg, var(--tan-800), var(--tan-900));
  border-radius:var(--radius-lg); color:#fff;
}
.mk-value-item { text-align:center; }
.mk-value-num { font-size:2.1rem; font-weight:700; color:#F5EFE6; line-height:1.2; }
.mk-value-num small { font-size:1rem; }
.mk-value-lbl { margin-top:6px; font-size:0.88rem; color:rgba(255,255,255,0.75); }

/* ---------- 文档章节卡 ---------- */
.mk-doc-chapters { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.mk-doc-chapter {
  display:flex; gap:16px; padding:20px; background:#fff;
  border:1px solid var(--apricot-200); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.mk-doc-chapter-num {
  flex:none; width:44px; height:44px; border-radius:10px;
  background:var(--apricot-50); border:1px solid var(--apricot-200);
  color:var(--copper-dark); font-weight:700; font-size:0.95rem;
  display:flex; align-items:center; justify-content:center;
}
.mk-doc-chapter h4 { color:var(--text-900); font-size:1rem; margin-bottom:6px; }
.mk-doc-chapter p { color:var(--text-500); font-size:0.88rem; line-height:1.7; }

/* ---------- 大图横幅 ---------- */
.mk-img-band {
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow);
}
.mk-img-band img { width:100%; height:320px; object-fit:cover; }
.mk-img-band .mk-img-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; padding:0 6%;
  background:linear-gradient(90deg, rgba(66,50,32,0.88) 0%, rgba(66,50,32,0.55) 55%, rgba(66,50,32,0.15) 100%);
  color:#fff;
}
.mk-img-overlay h3 { font-size:1.7rem; margin-bottom:10px; color:#fff; }
.mk-img-overlay p { max-width:560px; color:rgba(255,255,255,0.88); line-height:1.85; }

/* ---------- 规格表 ---------- */
.mk-table { width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.mk-table th, .mk-table td { padding:14px 18px; text-align:left; font-size:0.93rem; border-bottom:1px solid var(--apricot-200); }
.mk-table th { background:var(--apricot-50); color:var(--text-900); font-weight:600; width:190px; }
.mk-table tr:last-child td { border-bottom:0; }
.mk-table td { color:var(--text-700); line-height:1.75; }

/* ---------- 提示框 ---------- */
.mk-callout {
  padding:24px 26px; background:var(--apricot-50);
  border-radius:var(--radius); border-left:3px solid var(--copper);
}
.mk-callout h4 { color:var(--text-900); margin-bottom:8px; font-size:1.02rem; }
.mk-callout p { color:var(--text-600, var(--text-700)); font-size:0.94rem; line-height:1.8; }

/* ---------- 双列列表 ---------- */
.mk-list-two { display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }
.mk-list-two li { position:relative; padding-left:20px; color:var(--text-700); font-size:0.95rem; line-height:1.8; }
.mk-list-two li::before {
  content:""; position:absolute; left:0; top:12px; width:9px; height:9px;
  border-radius:2px; background:var(--copper);
}

/* ---------- 数字编号步骤 ---------- */
.mk-num-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:mkstep; }
.mk-num-step {
  position:relative; padding:26px 20px 22px; background:#fff;
  border:1px solid var(--apricot-200); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); counter-increment:mkstep;
}
.mk-num-step::before {
  content:counter(mkstep, decimal-leading-zero);
  font-size:1.9rem; font-weight:700; color:var(--apricot-300);
  font-family:Georgia, serif; display:block; line-height:1; margin-bottom:12px;
}
.mk-num-step h4 { color:var(--text-900); font-size:1.04rem; margin-bottom:8px; }
.mk-num-step p { color:var(--text-500); font-size:0.9rem; line-height:1.75; }
.mk-num-step::after {
  content:""; position:absolute; left:20px; bottom:18px; width:34px; height:2px;
  background:var(--copper);
}

/* ---------- 亮点标签带 ---------- */
.mk-tag-band { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.mk-tag-band .mk-tag {
  padding:10px 22px; background:var(--apricot-50); border:1px dashed var(--apricot-400);
  border-radius:6px; color:var(--text-700); font-size:0.95rem; font-weight:500;
}
.mk-tag-band .mk-tag b { color:var(--copper-dark); }

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
  .mk-pain-grid { grid-template-columns:repeat(2,1fr); }
  .mk-related-grid { grid-template-columns:repeat(2,1fr); }
  .mk-value-band { grid-template-columns:repeat(2,1fr); }
  .mk-split { grid-template-columns:1fr; gap:28px; }
  .mk-doc-chapters { grid-template-columns:1fr; }
  .mk-num-steps { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px) {
  .mk-pain-grid, .mk-related-grid, .mk-value-band, .mk-num-steps, .mk-list-two { grid-template-columns:1fr; }
  .mk-quote { padding:26px 22px; }
  .mk-img-band img { height:260px; }
}