/* ============================================================
   silkroad-content.css — 丝路跨境数据中心 统一内容层样式
   作用：拉齐 cross-border / booking / freight 三个工具页的
   容器宽度、Hero、区块标题、按钮、卡片等核心视觉元素
   加载顺序：在各自 style.css 之后加载，覆盖差异
   ============================================================ */

/* ===== 1. 统一容器宽度 ===== */
/* --wrap 由 silkroad-data.css 统一为 1200px */
.container {
  max-width: var(--wrap) !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* ===== 2. 统一 Hero ===== */
section.hero,
.hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  color: #fff !important;
  padding: 72px 0 80px !important;
  position: relative;
  overflow: hidden;
}
/* Hero 标题：统一字号和左对齐 */
section.hero h1,
.hero h1 {
  font-size: 30px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  margin: 0 0 14px !important;
  letter-spacing: -.4px !important;
  text-align: left !important;
  max-width: 720px !important;
}
/* Hero 描述文字 */
section.hero p,
.hero p {
  font-size: 16px !important;
  opacity: .92 !important;
  max-width: 580px !important;
  margin: 0 0 24px !important;
  text-align: left !important;
}
/* result-note 不受 hero p 覆盖 */
.hero .result-note, section.hero .result-note {
  font-size: 10px !important;
  opacity: 1 !important;
  max-width: 100% !important;
  margin: 6px 0 !important;
}
.hero .result-note + .result-note, section.hero .result-note + .result-note {
  font-size: 9px !important;
  margin-top: 4px !important;
}

/* Hero badge 统一 */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232,146,12,.12) !important;
  border: 1px solid rgba(232,146,12,.3) !important;
  color: var(--accent) !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;
}
/* Hero 按钮区统一 */
.hero-btns, .hero-actions, .hero-cta {
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  margin-top: 20px !important;
}
.hero-btns .btn + .btn,
.hero-actions .btn + .btn,
.hero .btn + .btn {
  margin-left: 0 !important;
}
/* Hero stats 统一 */
.hero-stats {
  display: flex !important;
  gap: 12px !important;
  margin-top: 28px !important;
  flex-wrap: wrap !important;
}
.hero-stat, .stat-item {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(8px);
  padding: 10px 16px !important;
  border-radius: 10px !important;
  text-align: center !important;
  min-width: 80px !important;
}
.hero-stat .num, .stat-item strong {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  display: block !important;
}
.hero-stat .label, .stat-item span {
  font-size: 11px !important;
  color: rgba(255,255,255,.7) !important;
  margin-top: 2px !important;
  display: block !important;
}

/* ===== 3. 统一区块标题 ===== */
.section-head {
  margin-bottom: 28px !important;
  text-align: left !important;
}
.section-head .tag,
.section-head .label {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--accent-dark) !important;
  background: rgba(232,146,12,0.1) !important;
  padding: 4px 12px !important;
  border-radius: var(--r-pill) !important;
  margin-bottom: 8px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.section-head h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  padding-left: 14px !important;
  position: relative !important;
  margin: 0 0 6px !important;
  letter-spacing: -.3px !important;
  text-align: left !important;
}
.section-head h2::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 4px !important;
  height: 22px !important;
  background: var(--accent) !important;
  border-radius: 2px !important;
}
.section-head .desc,
.section-head p {
  font-size: 14px !important;
  color: var(--muted) !important;
  padding-left: 14px !important;
  margin-top: 4px !important;
  max-width: 100% !important;
  text-align: left !important;
}

/* ===== 4. 统一按钮 ===== */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 26px !important;
  border-radius: var(--r-md) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  border: none !important;
  text-align: center !important;
  background: var(--primary) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.btn:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}
/* 橙色主按钮统一 */
.btn-accent, .btn-calc, .btn-lead, .lead-cta-btn {
  background: var(--accent) !important;
  color: var(--primary-dark) !important;
}
.btn-accent:hover, .btn-calc:hover, .btn-lead:hover, .lead-cta-btn:hover {
  background: var(--accent-dark) !important;
  transform: translateY(-1px) !important;
}
/* 幽灵按钮统一 */
.btn-outline, .btn-ghost, .btn.ghost, .ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.5) !important;
  box-shadow: none !important;
}
.btn-outline:hover, .btn-ghost:hover, .btn.ghost:hover, .ghost:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
/* 计算按钮统一为渐变橙 */
.calc-form .btn,
.btn-calc {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
  color: #fff !important;
  padding: 12px 32px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.calc-form .btn:hover,
.btn-calc:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(232,146,12,0.3) !important;
}

/* ===== 5. 统一卡片基础样式 ===== */
.card, .adv-card, .route-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
.card:hover, .adv-card:hover, .route-card:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-2px) !important;
}
.card h3, .adv-card h3, .route-card h3 {
  margin: 0 0 8px !important;
  color: var(--ink) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
.card p, .adv-card p, .route-card p {
  color: #475569 !important;
  margin: 0 0 8px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
/* 卡片图标统一 */
.adv-icon, .card-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: var(--primary-50) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  margin-bottom: 16px !important;
}

/* ===== 6. 统一 CTA 横幅 ===== */
.cta-band {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
  color: #fff !important;
  padding: 48px 0 !important;
  text-align: center !important;
}
.cta-band h2 {
  color: #fff !important;
  font-size: 26px !important;
  margin: 0 0 10px !important;
}
.cta-band p {
  color: rgba(255,255,255,.9) !important;
  margin: 0 0 24px !important;
  font-size: 15px !important;
}
.cta-band .btn {
  background: var(--accent) !important;
  color: var(--primary-dark) !important;
}

/* ===== 7. 统一表单输入框 ===== */
input[type="text"], input[type="number"], input[type="tel"],
select, textarea {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  font-size: 14px !important;
  background: #fff !important;
  color: var(--ink) !important;
  transition: border-color .2s, box-shadow .2s !important;
  font-family: inherit !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--primary-100) !important;
}
label {
  font-size: 13px !important;
  color: var(--muted) !important;
  display: block !important;
  margin-bottom: 6px !important;
  font-weight: 500 !important;
}

/* ===== 8. 移动端统一 ===== */
@media (max-width: 768px) {
  .container {
    padding: 0 16px !important;
  }
  section.hero, .hero {
    padding: 48px 0 52px !important;
  }
  section.hero h1, .hero h1 {
    font-size: 24px !important;
    max-width: 100% !important;
  }
  .hero-stats {
    gap: 8px !important;
  }
  .hero-stat, .stat-item {
    padding: 8px 12px !important;
    min-width: 70px !important;
  }
  .hero-stat .num, .stat-item strong {
    font-size: 18px !important;
  }
  .section-head h2 {
    font-size: 20px !important;
  }
  .cta-band {
    padding: 36px 0 !important;
  }
  .cta-band h2 {
    font-size: 22px !important;
  }
}