/* =====================================================
   qing-stats  —  数字统计版块（浅灰底 + 浅蓝卡片）
   前缀: qsn-
   对应源码 .strength / .stat-grid / .stat-item（关于页纯数字用法，无图标）

   版式说明（按参考图）：
     外层浅灰底，标题深色左对齐；
     每条统计做成独立的浅蓝圆角卡片，卡片之间留间距；
     卡片内数字与标签上下排列、整体居中，数字为主题蓝，
     标签深灰且带字距（参考图里「公 司 成 立」是拉开的）。

   原先是深蓝渐变底 + 白字 + 竖线分隔的版式，与参考图差别较大，
   涉及的控件默认值已在 class-qing-widget-stats.php 里同步改掉 ——
   Elementor 控件默认值会输出内联 CSS，只改样式表会被压掉。
   ===================================================== */

.qsn-wrap {
  /* 卡片底色与字距抽成变量，控件按需覆盖 */
  --qsn-item-bg: #eaf1fd;
  --qsn-num-color: #1257d2;
  --qsn-label-color: #444;
  --qsn-label-spacing: 2px;

  background: #f2f2f2;
  padding: 64px 0;
}

.qsn-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 50px;
  box-sizing: border-box;
}

/* ---------- 可选标题 ---------- */
.qsn-title {
  font-size: 22px;
  font-weight: 800;
  color: #111;
  line-height: 1.35;
  margin: 0 0 28px;
}

/* ---------- 统计网格 ---------- */
.qsn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ---------- 单条统计项（浅蓝卡片） ----------
   原为 flex 横排（左图标右文字的遗留结构），现在卡片内只有
   数字与标签两行，改成纵向排列并整体居中。
   竖线分隔在卡片版式下已无意义，边框宽度默认 0；
   控件仍保留，需要时可以调回来。 */
.qsn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 26px 20px;
  background: var(--qsn-item-bg);
  border-radius: 4px;
  border-left: 0 solid transparent;
}

/* 首项贴左：卡片版式下每张卡片都是独立块、左右对称，
   不需要再为首项去掉缩进。这条保留是为了兼容「首项贴左」开关 ——
   开关打开时仅去掉竖线，不再动内边距（否则首张卡片会比其它窄）。
   选择器写四层（0,4,0），特异性高于 Elementor 控件输出的
   `.elementor-element-xxx .qsn-item`（0,2,0）。 */
.qsn-flush .qsn-grid .qsn-item:first-child {
  border-left: 0 solid transparent;
}

.qsn-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

/* ---------- 数值 ---------- */
.qsn-num {
  font-size: 34px;
  font-weight: 800;
  color: var(--qsn-num-color);
  line-height: 1.1;
  margin-bottom: 10px;
  text-align: center;
}

/* ---------- 标签 ---------- */
.qsn-label {
  font-size: 13px;
  line-height: 1.6;
  color: var(--qsn-label-color);
  /* 参考图里标签字距是拉开的。字距会在末字后也加一份，
     导致视觉重心偏左，用等量的左内边距补回来。 */
  letter-spacing: var(--qsn-label-spacing);
  padding-left: var(--qsn-label-spacing);
  text-align: center;
}

/* ---------- 标题与统计项逐条进入 ---------- */
@keyframes qsn-enter-up {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.qing-motion-js .qsn-wrap:not(.is-motion-visible) .qsn-title,
.qing-motion-js .qsn-wrap:not(.is-motion-visible) .qsn-item {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}

.qsn-wrap.is-motion-visible .qsn-title,
.qsn-wrap.is-motion-visible .qsn-item {
  animation: qsn-enter-up 1.1s cubic-bezier(.22,1,.36,1) backwards;
}

.qsn-wrap.is-motion-visible .qsn-title { animation-delay: 100ms; }
.qsn-wrap.is-motion-visible .qsn-item { animation-delay: calc(340ms + var(--motion-i, 0) * 250ms); }

@media (prefers-reduced-motion: reduce) {
  .qing-motion-js .qsn-wrap .qsn-title,
  .qing-motion-js .qsn-wrap .qsn-item {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* =====================================================
   响应式
   说明：列数、网格间距、外层内边距、内容区左右内边距、
   统计项内边距、竖线宽度、数值/标题下方间距等，均已由
   Elementor 响应式控件按断点输出内联 CSS；同一属性不在此
   重复声明，否则桌面默认值会压掉媒体查询。
   此处仅保留没有控件默认值的属性（字号）。
   ===================================================== */

@media (max-width: 860px) {
  .qsn-num {
    font-size: 28px;
  }

  .qsn-label {
    font-size: 12px;
  }

  .qsn-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .qsn-num {
    font-size: 26px;
  }

  .qsn-label {
    font-size: 12px;
  }
}