/* ===== Success Data Zone 基本尺寸與排版===== */
/* 區塊容器 */
.stats-section {
  position: relative;
  padding: clamp(48px, 8vw, 96px) 0;
  color: var(--color-primary);
  overflow: hidden;
}

/* 背景圖＋淡化 */
.stats-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.8)
    ),
    url("../images/frontpage/stats-section/success-data-bg@1x.jpg") center
      center / cover no-repeat;
  z-index: 0;
}

/* 平板以上改成大圖 */
@media (min-width: 768px) {
  .stats-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.8)
      ),
      url("../images/frontpage/stats-section/success-data-bg@tablet.jpg") center
        center / cover no-repeat;
    z-index: 0;
  }
}

/* 桌機以上改成大圖 */
@media (min-width: 1024px) {
  .stats-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.8)
      ),
      url("../images/frontpage/stats-section/success-data-bg@desktop.jpg")
        center center / cover no-repeat;
    z-index: 0;
  }
}

/* 清單格線 */
.stats-list {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  margin: 0;
  padding: 0;
  align-items: end; /* 讓數字與標籤視覺齊一 */
}

.stat {
  text-align: center;
}

/* 跑動數字（字大一點） */
.stat-number {
  font-weight: 700;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.1;
}

/* 把 data-suffix 當尾碼顯示，並縮小字級 */
.stat-number::after {
  content: attr(data-suffix); /* 直接讀 data-suffix（例如 +、+年） */
  display: inline-block;
  margin-left: 4px;
  font-weight: 600;
  font-size: clamp(20px, 3vw, 36px); /* ✅ 單位/符號明顯較小 */
  line-height: 1;
  color: var(--color-primary);
}

/* 標籤 */
.stat-label {
  margin-top: 0.75rem;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  opacity: 0.95;
}

/* 手機直向：單欄 */
@media (max-width: 576px) {
  .stats-list {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}

/* ===== Metrics成就數據 （統一 Success Zone 樣式） ===== */
.metrics-section {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: var(--color-primary);
  padding: clamp(48px, 6vw, 96px) 0;
  background: transparent;
}

/* 背景圖 + 霧白遮罩（與 Success Zone 同風格） */
.metrics-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.8)
    ),
    url("../images/frontpage/metrics-section/metrics-bg@1x.jpg") center center /
      cover no-repeat;
  z-index: 0;
}
@media (min-width: 768px) {
  .metrics-bg {
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.8)
      ),
      url("../images/frontpage/metrics-section/metrics-bg@tablet.jpg") center
        center / cover no-repeat;
  }
}

@media (min-width: 1200px) {
  .metrics-bg {
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.8)
      ),
      url("../images/frontpage/metrics-section/metrics-bg@desktop.jpg") center
        center / cover no-repeat;
  }
}

/* 清單容器 */
.metrics-list {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  margin: 0;
  padding: 0;
  align-items: end; /* 讓數字與標籤視覺齊一 */
}

.metrics-item {
  flex: 1 1 30%;
  text-align: center;
}

/* === 數字與單位 === */
.metrics-number {
  display: inline-flex;
  align-items: flex-end; /* ✅ 下緣對齊 */
  justify-content: center;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary);
}

/* 數字主體 */
.metrics-number .count {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  line-height: 1;
}

/* 單位 */
.metrics-number .metrics-suffix {
  font-size: clamp(20px, 3vw, 36px); /* ✅ 約 40%～50% 比例 */
  font-weight: 600;
  margin-left: 4px;
  line-height: 1;
  color: var(--color-primary);
}

/* === 下方說明文字 === */
.metrics-label {
  margin-top: 0.75rem;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  opacity: 0.95;
  text-align: center;
  color: var(--color-primary);
}

/* === RWD：手機版置中排列 === */
@media (max-width: 767.98px) {
  .metrics-list {
    justify-content: center;
    gap: 24px;
  }
}