/* WaterfallList 组件样式 */

:root {
  --waterfall-item-padding: 16px;
  --waterfall-item-border-radius: 8px;
  --waterfall-item-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --waterfall-item-border: 1px solid #f0f0f0;
  --waterfall-item-bg: #fff;
  --waterfall-min-row-height: 120px;
}

.waterfall-container {
  width: 100%;
  /* 使用更高优先级的选择器，避免!important */
  &.waterfall-container {
    align-items: flex-start; /* 确保瀑布流列不会被拉伸到相同高度 */
  }
}

/* 瀑布流项目的基础样式重置 - 使用更具体的选择器 */
.waterfall-container .list-item.waterfall-item {
  height: auto; /* 覆盖grid样式 */
  width: auto; /* 覆盖可能的宽度限制 */
  /* 确保盒模型正确 */
  box-sizing: border-box;
}

.waterfall-track {
  /* 每个轨道的基础样式 */
  min-height: 0;

  &.waterfall-track-vertical {
    /* 垂直模式：轨道是列，等宽分布但高度自适应 */
    flex: 1 0 0; /* 等宽分布，不收缩，初始宽度为0 */
    min-width: 0; /* 允许内容收缩 */
    align-self: flex-start; /* 确保列高度自适应，不被拉伸 */
    height: auto; /* 明确设置高度自适应 */
  }

  &.waterfall-track-horizontal {
    /* 水平模式：轨道是行，自适应高度 */
    flex: 0 0 auto;
    width: 100%;
    min-height: var(--waterfall-min-row-height); /* 确保行有最小高度 */
    margin-bottom: 0; /* 移除可能的margin */
  }

  /* 瀑布流项目样式 */
  .waterfall-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    .default-waterfall-item {
      transition: all 0.3s ease;
      background: var(--waterfall-item-bg);
      border-radius: var(--waterfall-item-border-radius);
      box-shadow: var(--waterfall-item-shadow);
      border: var(--waterfall-item-border);
      padding: var(--waterfall-item-padding);
    }

    /* 悬停效果 - 使用更具体的选择器 */
    &:hover .default-waterfall-item {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
  }

  /* 垂直模式下的轨道项目样式 */
  &.waterfall-track-vertical .waterfall-item {
    width: 100%; /* 填满列宽 */
    flex: 0 0 auto; /* 不拉伸，保持原始高度 */
    /* 高度通过内联样式设置，这里不再强制覆盖 */

    /* 确保内部组件填充整个容器 - 使用更具体的选择器 */
    &.waterfall-item > * {
      height: 100%;
      box-sizing: border-box;
    }

    /* 默认瀑布流项目样式 */
    .default-waterfall-item {
      /* 填充容器高度 */
      height: 100%;
      min-height: unset; /* 移除可能的最小高度限制 */
      max-height: none; /* 移除可能的最大高度限制 */
      flex-shrink: 0; /* 防止被压缩 */
      flex-grow: 0; /* 防止被拉伸 */
      display: flex;
      flex-direction: column;
      position: relative;
    }
  }

  /* 卡片组件适配 - 分离出单独的mixin */
  &.waterfall-track-vertical .waterfall-item {
    /* Ant Design Card 组件适配 */
    .ant-card,
    .ant-card-bordered {
      &.ant-card {
        height: 100%;
        min-height: 100%;
        max-height: none;
        display: flex;
        flex-direction: column;

        .ant-card-body {
          &.ant-card-body {
            height: 100%;
            min-height: 100%;
            max-height: none;
            display: flex;
            flex-direction: column;
            flex-grow: 1; /* 关键：让card-body填满整个卡片 */
            padding: var(--waterfall-item-padding); /* 使用CSS变量 */
          }
        }
      }
    }

    /* Pisell Card 组件适配 */
    .pisell-card-wrap {
      &.pisell-card-wrap {
        height: 100%;
      }
    }

    /* Pisell Product Card 组件适配 */
    .pisell-product-card {
      &.pisell-product-card {
        height: 100%;
        min-height: 100%;
        max-height: none;
        display: flex;
        flex-direction: column;

        .pisell-product-card-content {
          &.pisell-product-card-content {
            height: 100%;
            min-height: 100%;
            max-height: none;
            display: flex;
            flex-direction: column;
            flex-grow: 1; /* 关键：让content填满整个卡片 */
            justify-content: space-between; /* 内容分散对齐 */
          }
        }

        .pisell-product-card-image {
          &.pisell-product-card-image {
            flex-grow: 1; /* 让图片区域扩展填充可用空间 */
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 60px; /* 最小高度 */

            .image {
              &.image {
                width: 100%;
                height: 100%;
                min-height: inherit;
              }
            }
          }
        }

        .pisell-product-card-info,
        .pisell-product-card-arrow {
          &.pisell-product-card-info,
          &.pisell-product-card-arrow {
            flex-shrink: 0; /* 保持固定大小 */
          }
        }
      }
    }

    /* 通用卡片组件适配 - 使用属性选择器提高优先级 */
    [class*="card"],
    [class*="Card"] {
      &[class*="card"],
      &[class*="Card"] {
        height: 100%;
        min-height: 100%;
        max-height: none;

        > * {
          &:first-child {
            height: 100%;
            min-height: 100%;
            max-height: none;
          }
        }
      }
    }
  }

  /* 水平模式下的轨道项目样式 */
  &.waterfall-track-horizontal .waterfall-item {
    flex-shrink: 0; /* 保持预设宽度 */
    height: auto; /* 自适应高度 */
  }
}
