/* ============================================================
 * home_v11_1_2.css —— 友吉智汇 Web v11.1.2 Task 4 首页专属样式
 * 纪律（实施计划 Task 4 Step 6）：新类统一 gh- 前缀；不重构不相关全局样式；
 *   桌面蓝图四列、能力两至三列、国家站三列；768px 以下单列或两列；
 *   支持 prefers-reduced-motion；零内联样式配合（HTML 零 style 属性）。
 * 复用全局：.container/.section-title/.page-sub/.skl-card/.skl/.btn（site.css）
 * ============================================================ */

/* ---------- ① Hero 双 CTA ---------- */
.home-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* ---------- ② 全球统计带（globalStatsBand） ---------- */
.gh-stats-band {
  margin: 20px auto 0;
  max-width: 1080px;
  padding: 0 20px;
}

.gh-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gh-stat-item {
  text-align: center;
  padding: 14px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
}

.gh-stat-num {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.gh-stat-label {
  margin-top: 4px;
  font-size: 13px;
  color: #6b7280;
}

.gh-stats-note {
  margin-top: 10px;
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.6;
}

/* ---------- 区块通用头部（标题 + 更多链接） ---------- */
.gh-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.gh-more-link {
  font-size: 14px;
  color: #2563eb;
  text-decoration: none;
}

.gh-more-link:hover {
  text-decoration: underline;
}

.gh-sec-sub {
  margin: 6px 0 14px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.6;
}

/* ---------- ④ 精选蓝图（桌面四列） ---------- */
.gh-blueprint-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.gh-bp-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.gh-bp-card:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .10);
}

.gh-bp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gh-bp-id {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: .04em;
}

.gh-bp-type {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
}

.gh-bp-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  line-height: 1.4;
}

.gh-bp-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}

.gh-bp-meta-item .gh-meta-label {
  margin-right: 4px;
  color: #9ca3af;
  font-weight: 600;
}
.gh-bp-meta-item {
  display: block;
  line-height: 1.55;
}

.gh-bp-foot {
  margin-top: auto;
  font-size: 13px;
  color: #2563eb;
}

/* ---------- ⑥ 代表性解决方案与企业能力（两至三列） ---------- */
.gh-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gh-profile-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.gh-pf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.gh-pf-name {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}

.gh-pf-rel {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
}

.gh-pf-caps {
  font-size: 13px;
  color: #374151;
  line-height: 1.6;
}

.gh-pf-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}

.gh-pf-meta-item .gh-meta-label {
  margin-right: 4px;
  color: #9ca3af;
  font-weight: 600;
}
.gh-pf-meta-item {
  display: block;
  line-height: 1.55;
}

.gh-pf-foot {
  margin-top: auto;
}

.gh-card-more {
  font-size: 13px;
  color: #2563eb;
  text-decoration: none;
}

.gh-card-more:hover {
  text-decoration: underline;
}

/* ---------- ⑦ 国家专题站（三列；仅 hub_status=live 出卡） ---------- */
.gh-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gh-hub-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.gh-hub-card:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .10);
}

.gh-hub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gh-hub-name {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}

.gh-hub-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #059669;
}

.gh-hub-meta {
  font-size: 13px;
  color: #6b7280;
}

.gh-hub-foot {
  margin-top: auto;
  font-size: 13px;
  color: #2563eb;
}

/* ---------- ⑧ 场景落地服务（四卡两列×两行） ---------- */
.gh-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.gh-service-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.gh-service-card:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .10);
}

.gh-svc-icon {
  font-size: 22px;
  line-height: 1;
}

.gh-svc-title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

.gh-svc-desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.6;
}

/* ---------- 动态区块四态容器 ---------- */
.gh-sec-state {
  grid-column: 1 / -1;
}

/* ---------- ③ 双域搜索：海外筛选器（门槛驱动显隐，hidden 属性控制） ---------- */
.gh-os-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 2px;
}

.gh-os-filters[hidden] {
  display: none;
}

.gh-filter-label {
  font-size: 13px;
  color: #374151;
}

.gh-filter-select {
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
}

/* ---------- 响应式：768px 以下单列或两列 ---------- */
@media (max-width: 768px) {
  .gh-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .gh-stat-num {
    font-size: 20px;
  }

  .gh-blueprint-grid {
    grid-template-columns: 1fr;
  }

  .gh-profile-grid {
    grid-template-columns: 1fr;
  }

  .gh-hub-grid {
    grid-template-columns: 1fr;
  }

  .gh-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- 动效偏好：prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gh-bp-card,
  .gh-hub-card,
  .gh-service-card {
    transition: none;
  }

  .skl {
    animation: none;
  }
}