/* ============================================
   瀑布流布局样式 - Masonry Layout
   ============================================ */

/* 瀑布流容器 - 使用 CSS columns 实现 */
.masonry-container {
    column-count: 4;
    column-gap: var(--magazine-gap-medium);
    column-fill: balance;
    width: 100%;
    display: block;
}

.masonry-item {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: var(--magazine-gap-medium);
    vertical-align: top;
}

/* 响应式调整 */
@media (max-width: 1400px) {
    .masonry-container {
        column-count: 4;
    }
}

@media (max-width: 1200px) {
    .masonry-container {
        column-count: 3;
        column-gap: var(--magazine-gap-small);
    }
    
    .masonry-item {
        margin-bottom: var(--magazine-gap-small);
    }
}

@media (max-width: 992px) {
    .masonry-container {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .masonry-container {
        column-count: 1;
    }
}

/* 确保卡片在瀑布流中正确显示 */
.masonry-container .course-card-magazine {
    width: 100%;
    margin: 0;
}

/* 加载动画 */
.masonry-item {
    animation: fadeInUp 0.5s ease-out;
    animation-fill-mode: both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 为不同位置的卡片添加延迟动画 */
.masonry-item:nth-child(1) { animation-delay: 0s; }
.masonry-item:nth-child(2) { animation-delay: 0.05s; }
.masonry-item:nth-child(3) { animation-delay: 0.1s; }
.masonry-item:nth-child(4) { animation-delay: 0.15s; }
.masonry-item:nth-child(5) { animation-delay: 0.2s; }
.masonry-item:nth-child(6) { animation-delay: 0.25s; }
.masonry-item:nth-child(n+7) { animation-delay: 0.3s; }