/**
 * PisellGridProDataCard 组件样式
 * @description GridPro 数据卡片容器样式定义
 */

.pisell-grid-pro-datacard {
  display: flex;
  gap: 16px;
  padding-bottom: 16px;
  background: #ffffff;

  /**
   * 响应式适配：平板
   */
  @media (max-width: 1024px) {
    gap: 12px;
    padding: 12px 16px;
    flex-wrap: wrap;

    // 卡片在平板上每行显示 3 个
    .stat-card {
      flex: 1 1 calc(33.333% - 8px);
      min-width: 200px;
    }
  }

  /**
   * 响应式适配：移动端
   */
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;

    // 卡片在移动端每行显示 1 个
    .stat-card {
      flex: 1 1 100%;
      min-width: auto;
    }
  }
}
