/* 瀑布流布局样式 - 最小修改方案 */

/* 容器：使用列宽控制，最多 5 列，居中对齐 */
.fttxtbody.waterfall-container,
.groupbodyin.waterfall-container {
    column-count: auto; /* 由列宽自动决定列数 */
    column-width: 217px; /* 固定列宽 217px */
    column-gap: 15px; /* 列间距 */
    padding: 0;
    max-width: 1145px; /* 5 列宽度 + 4 个间距 = 5*217 + 4*15 */
    margin: 0 auto; /* 居中 */
}

/* 移动端自动降列，无需强制列数 */
@media (max-width: 1400px) {
    .fttxtbody.waterfall-container,
    .groupbodyin.waterfall-container {
        column-count: auto;
    }
}

@media (max-width: 1100px) {
    .fttxtbody.waterfall-container,
    .groupbodyin.waterfall-container {
        column-count: auto;
    }
}

@media (max-width: 768px) {
    .fttxtbody.waterfall-container,
    .groupbodyin.waterfall-container {
        column-count: auto;
    }
}

@media (max-width: 480px) {
    .fttxtbody.waterfall-container,
    .groupbodyin.waterfall-container {
        column-count: auto;
    }
}

/* 卡片项改为行内块 */
.waterfall-container .newitem,
.waterfall-container .groupitem {
    float: none !important; /* 覆盖原有的float */
    display: inline-block;
    width: 100% !important; /* 占满列宽（列宽为 217px） */
    margin: 0 0 15px 0 !important; /* 只保留底部间距 */
    break-inside: avoid; /* 防止卡片内容被分割 */
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    height: auto !important; /* 高度自适应 */
    min-height: auto !important;
}

/* 调整图片容器高度自适应 */
.waterfall-container .newitemtop,
.waterfall-container .groupitemtop {
    height: auto !important;
    min-height: 150px;
    max-height: 350px;
    position: relative;
}

/* 默认高度 */
.waterfall-container .newitemtop {
    height: 284px !important; /* 默认高度284px */
}

.waterfall-container .groupitemtop {
    height: 270px !important; /* 默认高度284px */
}

/* 偶尔出现的矮一些的 */
.waterfall-container .newitem:nth-child(13n+7) .newitemtop,
.waterfall-container .groupitem:nth-child(13n+7) .groupitemtop {
    height: 200px !important;
}

/* 偶尔出现的高一些的 */
.waterfall-container .newitem:nth-child(17n+4) .newitemtop,
.waterfall-container .groupitem:nth-child(17n+4) .groupitemtop {
    height: 320px !important;
}

/* 图片链接调整 */
.waterfall-container .newitemtop a,
.waterfall-container .groupitemtop a {
    display: block;
    height: 100% !important;
    width: 100% !important;
}

/* 图片自适应 - 修复left偏移问题 */
.waterfall-container .newitemtop img,
.waterfall-container .groupitemtop img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* 保持比例填充 */
    object-position: center;
    position: static !important; /* 重置定位 */
    left: auto !important; /* 清除left样式 */
    top: auto !important; /* 清除top样式 */
    transform: none !important; /* 清除transform */
    margin: 0 !important; /* 清除边距 */
    display: block; /* 避免行内元素造成的间隙 */
}

/* 特别针对imgauto类的修复 */
.waterfall-container .imgauto {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 底部信息区域优化 */
.waterfall-container .newitembom {
    height: auto !important;
    min-height: 94px;
    padding-bottom: 8px;
}


.waterfall-container .groupitembom {
    height: auto !important;
    min-height: 34px;
    padding-bottom: 8px;
}

/* 标题区域优化 */
.waterfall-container .newitemtitle {
    height: auto !important;
    min-height: 34px;
    max-height: 51px;
    line-height: 1.5;
    word-break: break-word;
}

/* 平滑过渡效果 */
.waterfall-container .newitem,
.waterfall-container .groupitem {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 加载动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.waterfall-container .newitem,
.waterfall-container .groupitem {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

/* 延迟动画效果 */
.waterfall-container .newitem:nth-child(1),
.waterfall-container .groupitem:nth-child(1) {
    animation-delay: 0.05s;
}

.waterfall-container .newitem:nth-child(2),
.waterfall-container .groupitem:nth-child(2) {
    animation-delay: 0.1s;
}

.waterfall-container .newitem:nth-child(3),
.waterfall-container .groupitem:nth-child(3) {
    animation-delay: 0.15s;
}

.waterfall-container .newitem:nth-child(4),
.waterfall-container .groupitem:nth-child(4) {
    animation-delay: 0.2s;
}

.waterfall-container .newitem:nth-child(5),
.waterfall-container .groupitem:nth-child(5) {
    animation-delay: 0.25s;
}