/* ============================================================
   幻启科技 子主题业务定制样式 (huanqi-child/css/custom.css)
   规范来源：视觉设计与 Elementor 模板骨架规范 V1.1（Astra 版）
   约束：仅使用 style.css 中定义的 :root 变量，不写死颜色值；
        作用：信任锤数字卡 / 产品卡 / 询盘表单 / 移动端信任条横滑
   ============================================================ */

/* ---------- 1. 信任锤数字卡（浅底页用） ---------- */
.hq-stat-card {
  background: #FFFFFF;
  border: 1px solid var(--c-g300);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 14px;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.hq-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.hq-stat-card .num {
  font-size: 30px;
  font-weight: 800;
  color: var(--c-accent);
  line-height: 1.1;
}
.hq-stat-card .lab {
  font-size: 13px;
  color: var(--c-g500);
  margin-top: 6px;
}
.hq-stat-card .ic {
  width: 24px; height: 24px;
  stroke: var(--c-blue-300);
  margin-bottom: 8px;
}

/* 深底区块内的数字卡（如 HERO 下方），覆盖为半透明白底 */
.hq-hero-stats .hq-stat-card {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  box-shadow: none;
}
.hq-hero-stats .hq-stat-card .num { color: var(--c-accent); }
.hq-hero-stats .hq-stat-card .lab { color: #CFE2F3; }

/* 数字卡在一行排列（桌面端） */
.hq-stat-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

/* ---------- 2. 产品卡（8 大工艺网格 / 归档页） ---------- */
.hq-product-card {
  background: #FFFFFF;
  border: 1px solid var(--c-g300);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hq-product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.hq-product-card .thumb {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  display: block;
}
.hq-product-card .body { padding: 14px; }
.hq-product-card .title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-navy);
}
.hq-product-card .tag-row { margin: 8px 0; }
.hq-product-card .pow {
  font-size: 13px;
  color: var(--c-g500);
}
.hq-product-card .btn {
  display: inline-block;
  margin-top: 10px;
  background: var(--c-accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}
.hq-product-card .btn:hover { background: var(--c-accent-dark); }

/* ---------- 3. 询盘表单（Elementor Pro Form 容器加 .hq-form 即可套用） ---------- */
.hq-form input,
.hq-form textarea,
.hq-form select {
  width: 100%;
  padding: 11px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--c-g300);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--c-g900);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hq-form input:focus,
.hq-form textarea:focus,
.hq-form select:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(30,90,168,.15);
}
.hq-form .submit {
  background: var(--c-accent);
  color: #fff;
  border: none;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  width: auto;
}
.hq-form .submit:hover { background: var(--c-accent-dark); }

/* 表单字段聚焦时容器高亮（与 main.js 配合） */
.hq-field.is-focus input,
.hq-field.is-focus textarea,
.elementor-field-group.is-focus .elementor-field {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(30,90,168,.15);
}

/* ---------- 4. 移动端信任条横滑 + 字号降档 ---------- */
@media (max-width: 768px) {
  .hq-stat-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }
  .hq-stat-row > * {
    flex: 0 0 auto;
    min-width: 96px;
    scroll-snap-align: start;
  }
  .hq-stat-card .num { font-size: 22px; }
  .hq-stat-card .lab { font-size: 11px; }
}