/**
 * Masonry Layout (瀑布流布局) for PC
 * 使用CSS Grid Masonry（优先）+ 普通Grid（降级方案）
 * 注意：普通Grid保持Z字型排序，但卡片高度会不同
 */

/* ==================== PC端瀑布流布局 (≥1200px) ==================== */
@media (min-width: 1200px) {
    /* PC端图片完整显示 - 无论哪种布局都生效 */
    .pfp-image {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: contain !important;
        display: block !important;
    }

    .pfp-card {
        height: auto !important;
        overflow: visible !important;
    }

    /* 优先使用CSS Grid Masonry - 瀑布流效果 */
    @supports (grid-template-rows: masonry) {
        .pfp-list {
            display: grid;
            grid-template-rows: masonry;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            grid-auto-rows: auto;
            gap: 25px;
            align-items: start;
        }
    }

    /* 降级方案：使用普通Grid布局 - 保持Z字型但不是瀑布流 */
    @supports not (grid-template-rows: masonry) {
        .pfp-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            grid-auto-rows: auto;
            gap: 25px;
            align-items: start;
        }
    }
}

/* ==================== 大屏PC (≥1600px) ==================== */
@media (min-width: 1600px) {
    @supports (grid-template-rows: masonry) {
        .pfp-list {
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }
    }

    @supports not (grid-template-rows: masonry) {
        .pfp-list {
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }
    }
}

/* ==================== 超大屏 (≥2000px) ==================== */
@media (min-width: 2000px) {
    @supports (grid-template-rows: masonry) {
        .pfp-list {
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 35px;
        }
    }

    @supports not (grid-template-rows: masonry) {
        .pfp-list {
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 35px;
        }
    }
}

/* ==================== 性能优化 ==================== */

/* GPU加速卡片渲染 */
@media (min-width: 1200px) {
    .pfp-card {
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}