/* 网格系统样式 */

/* 基础网格布局 */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-5);
}

/* 提示卡片网格 */
.tips-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

/* 响应式网格 */
.responsive-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

/* 网格列数变体 */
.grid-1 {
    grid-template-columns: 1fr;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* 网格间距变体 */
.grid-gap-1 {
    gap: var(--spacing-1);
}

.grid-gap-2 {
    gap: var(--spacing-2);
}

.grid-gap-3 {
    gap: var(--spacing-3);
}

.grid-gap-4 {
    gap: var(--spacing-4);
}

.grid-gap-5 {
    gap: var(--spacing-5);
}

.grid-gap-6 {
    gap: var(--spacing-6);
}

/* 网格对齐变体 */
.grid-align-start {
    align-items: start;
}

.grid-align-center {
    align-items: center;
}

.grid-align-end {
    align-items: end;
}

.grid-justify-start {
    justify-items: start;
}

.grid-justify-center {
    justify-items: center;
}

.grid-justify-end {
    justify-items: end;
}

/* 网格分布变体 */
.grid-content-start {
    align-content: start;
}

.grid-content-center {
    align-content: center;
}

.grid-content-end {
    align-content: end;
}

.grid-content-space-between {
    align-content: space-between;
}

.grid-content-space-around {
    align-content: space-around;
}

.grid-content-space-evenly {
    align-content: space-evenly;
}

.grid-justify-content-start {
    justify-content: start;
}

.grid-justify-content-center {
    justify-content: center;
}

.grid-justify-content-end {
    justify-content: end;
}

.grid-justify-content-space-between {
    justify-content: space-between;
}

.grid-justify-content-space-around {
    justify-content: space-around;
}

.grid-justify-content-space-evenly {
    justify-content: space-evenly;
}

/* 网格项跨域变体 */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }

.row-span-1 { grid-row: span 1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }
.row-span-4 { grid-row: span 4; }

/* 媒体查询 - 响应式网格调整 */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: 3fr 1fr;
    }

    .tips-grid {
        grid-template-columns: 1fr;
    }

    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-4);
    }

    .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
        grid-template-columns: repeat(var(--grid-cols, 2), 1fr);
    }
}

@media (min-width: 992px) {
    .tips-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-4);
    }

    .responsive-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1200px) {
    .grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 767px) {
    .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
        grid-template-columns: 1fr;
    }
}