/*
 * BAIGE_HALL_MOBILE_GRID_HARDFIX
 *
 * 只处理算法大厅手机端卡片网格。
 * 桌面端、表格模式、接口和数据逻辑均不修改。
 */

@media screen and (max-width: 768px) {

    /*
     * 真实卡片容器使用 hallAllGrid。
     * 使用ID提高优先级，覆盖后续响应式单列规则。
     */
    html body.page-algorithm-hall
    #hallAllGrid:not(.hall-view-table) {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        grid-auto-columns: auto !important;
        gap: 8px !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    /*
     * 每张卡片只占一个网格单元。
     */
    html body.page-algorithm-hall
    #hallAllGrid:not(.hall-view-table)
    > .algo-card {
        display: block !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: none !important;
        flex-basis: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /*
     * 第一张卡片不能独占整行。
     */
    html body.page-algorithm-hall
    #hallAllGrid:not(.hall-view-table)
    > .algo-card:first-child {
        grid-column: auto !important;
        width: auto !important;
        max-width: none !important;
    }

    /*
     * 空状态、加载状态允许横跨两列。
     */
    html body.page-algorithm-hall
    #hallAllGrid:not(.hall-view-table)
    > .hall-empty,

    html body.page-algorithm-hall
    #hallAllGrid:not(.hall-view-table)
    > .loading-overlay {
        grid-column: 1 / -1 !important;
    }

    /*
     * 避免卡片内部文字或按钮撑破两列。
     */
    html body.page-algorithm-hall
    #hallAllGrid
    > .algo-card,

    html body.page-algorithm-hall
    #hallAllGrid
    > .algo-card * {
        min-width: 0;
        box-sizing: border-box;
    }

    /*
     * 手机端稍微压缩卡片间距，但不改变卡片结构。
     */
    html body.page-algorithm-hall
    #hallAllGrid
    > .algo-card {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}