/* =====================================================
 * Elementor 小部件 — 公司实力统计 (qing-strength)
 * 前缀: qstr-  对应源码 .strength / .stat-*
 * ===================================================== */

/* ── 作用域重置 ── */
.qstr {
  box-sizing: border-box;
}
.qstr *,
.qstr *::before,
.qstr *::after {
  box-sizing: inherit;
}
.qstr p,
.qstr h2,
.qstr h3,
.qstr span {
  margin: 0;
}
.qstr a {
  text-decoration: none;
  color: inherit;
}

/* ── CSS 变量 ── */
.qstr {
  --qstr-accent:        #1f6feb;
  --qstr-accent-light:  #4a90ff;
  --qstr-btn-gradient:  linear-gradient(135deg, #0b3d91 0%, #1f6feb 55%, #4a90ff 100%);
  --qstr-bg:            linear-gradient(135deg, #0c2a56 0%, #0f2f61 55%, #10294f 100%);
  --qstr-title-color:   #fff;
  --qstr-rule-color:    var(--qstr-accent-light);
  --qstr-icon-color:    #fff;
  --qstr-icon-size:     52px;
  --qstr-num-color:     #fff;
  --qstr-label-color:   rgba(255,255,255,.75);
  --qstr-divider-color: rgba(255,255,255,.22);
  --qstr-num-size:      46px;
  --qstr-label-size:    15px;
  --qstr-icon-gap:      18px;
  --qstr-label-gap:     8px;
}

/* ── 整体版块 ── */
.qstr-strength {
  background: var(--qstr-bg);
  padding: 64px 0;
}

.qstr-strength-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 50px;
}

/* ── 版块标题 ── */
.qstr-section-title {
  font-size: 40px;
  font-weight: 800;
  color: var(--qstr-title-color);
  line-height: 1.2;
  text-align: center;
  margin-bottom: 48px;
}

.qstr-section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin: 18px auto 0;
  background: var(--qstr-rule-color);
  border-radius: 2px;
}

.qstr-section-title.qstr-is-left {
  text-align: left;
}

.qstr-section-title.qstr-is-left::after {
  margin-left: 0;
  margin-right: auto;
}

.qstr-section-title.qstr-no-rule::after {
  display: none;
}

/* ── 四列统计网格 ── */
.qstr-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* ── 单条统计项：上排「图标 + 数字」，下排「标签」居中 ── */
.qstr-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 20px;
  border-left: 1px solid var(--qstr-divider-color);
}

.qstr-stat-item:first-child {
  border-left: none;
  /* 保留左右内边距，否则第一列的居中基准与其他列不一致。 */
}

/* ── 图标 ──
   用 min-width/min-height 而非固定 width/height：
   SVG / 图标字体仍占满这个方框（外观不变），
   而「上传图片」模式下横向图能自然撑开，不会被方框裁掉。 */
.qstr-stat-icon {
  flex: none;
  min-width: var(--qstr-icon-size);
  min-height: var(--qstr-icon-size);
  color: var(--qstr-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qstr-stat-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 上传图片：高度跟随图标尺寸，宽度自适应，避免非正方形图被压扁。
   「图标样式 → 图标尺寸」控件会同时输出 width/height 到 .qstr-stat-icon
   （不是 img），所以这里的 width:auto 不会被它覆盖。 */
.qstr-stat-icon img {
  width: auto;
  height: var(--qstr-icon-size);
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* ── 图标 + 数字：同一排 ── */
.qstr-stat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--qstr-icon-gap);
  min-width: 0;
  margin-bottom: var(--qstr-label-gap);
}

.qstr-stat-num {
  font-size: var(--qstr-num-size);
  font-weight: 800;
  color: var(--qstr-num-color);
  line-height: 1.05;
  margin-bottom: 0;
  white-space: nowrap;
}

.qstr-stat-label {
  font-size: var(--qstr-label-size);
  color: var(--qstr-label-color);
  white-space: nowrap;
}

/* ── 响应式 1080px ── */
/* 进入视口：标题、数据项以及项内图标/数字/标签分层出现。 */
.qstr-strength.is-motion-ready .qstr-section-title,
.qstr-strength.is-motion-ready .qstr-stat-item,
.qstr-strength.is-motion-ready .qstr-stat-icon,
.qstr-strength.is-motion-ready .qstr-stat-num,
.qstr-strength.is-motion-ready .qstr-stat-label {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.qstr-strength.is-motion-visible .qstr-section-title,
.qstr-strength.is-motion-visible .qstr-stat-item,
.qstr-strength.is-motion-visible .qstr-stat-icon,
.qstr-strength.is-motion-visible .qstr-stat-num,
.qstr-strength.is-motion-visible .qstr-stat-label { opacity: 1; transform: translate3d(0,0,0); }
.qstr-strength.is-motion-ready .qstr-section-title { transition-delay: .08s; }
.qstr-strength.is-motion-ready .qstr-stat-item:nth-child(1) { transition-delay: .20s; }
.qstr-strength.is-motion-ready .qstr-stat-item:nth-child(2) { transition-delay: .34s; }
.qstr-strength.is-motion-ready .qstr-stat-item:nth-child(3) { transition-delay: .48s; }
.qstr-strength.is-motion-ready .qstr-stat-item:nth-child(4) { transition-delay: .62s; }
.qstr-strength.is-motion-ready .qstr-stat-icon { transition-delay: .28s; }
.qstr-strength.is-motion-ready .qstr-stat-num { transition-delay: .38s; }
.qstr-strength.is-motion-ready .qstr-stat-label { transition-delay: .48s; }
@media (prefers-reduced-motion: reduce) {
  .qstr-strength.is-motion-ready .qstr-section-title,
  .qstr-strength.is-motion-ready .qstr-stat-item,
  .qstr-strength.is-motion-ready .qstr-stat-icon,
  .qstr-strength.is-motion-ready .qstr-stat-num,
  .qstr-strength.is-motion-ready .qstr-stat-label { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1080px) {
  .qstr-strength-inner {
    padding: 0 24px;
  }

  .qstr-section-title {
    font-size: 32px;
  }

  .qstr-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 16px;
  }

  .qstr-stat-item {
    padding: 0;
    border-left: none;
    --qstr-icon-gap: 14px;
  }

  /* 与上面同理，用 min-* 以免把上传的图片裁成 42px 方块 */
  .qstr-stat-icon {
    min-width: 42px;
    min-height: 42px;
  }

  .qstr-stat-icon img {
    height: 42px;
  }

  .qstr-stat-num {
    font-size: 34px;
    /* 数字下间距由 --qstr-label-gap 统一控制，这里不再单独设置。 */
  }

  .qstr-stat-label {
    font-size: 14px;
  }
}

/* ── 响应式 860px ── */
@media (max-width: 860px) {
  .qstr-strength {
    padding: 44px 0;
  }

  .qstr-section-title {
    font-size: 27px;
  }
}