/**
 * Seven Columns Fix CSS
 * Ensures 7+ columns work properly on wide screens
 */

/* Force 7 columns on wide screens (1500px+) */
@media (min-width: 1500px) {
    .gallery-pro-grid[data-columns="7"] {
        grid-template-columns: repeat(7, 1fr) !important;
    }
    
    .gallery-pro-grid.masonry[data-columns="7"] {
        column-count: 7 !important;
    }
}

/* Force 6 columns on large desktop (1200-1499px) */
@media (min-width: 1200px) and (max-width: 1499px) {
    .gallery-pro-grid[data-columns="7"] {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    
    .gallery-pro-grid.masonry[data-columns="7"] {
        column-count: 6 !important;
    }
}

/* Ensure minimum item width for 7+ columns */
.gallery-pro-grid[data-columns="7"] .gallery-pro-item,
.gallery-pro-grid[data-columns="8"] .gallery-pro-item {
    min-width: 150px !important;
}

/* Debug mode - show column count */
.debug-columns .gallery-pro-container::before {
    content: "Columns: " attr(data-columns);
    position: absolute;
    top: -30px;
    left: 0;
    background: red;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    z-index: 1000;
}

/* Override any conflicting responsive rules */
@media (min-width: 1400px) {
    .gallery-pro-grid[data-columns="7"]:not(.force-responsive) {
        grid-template-columns: repeat(7, 1fr) !important;
    }
    
    .gallery-pro-grid.masonry[data-columns="7"]:not(.force-responsive) {
        column-count: 7 !important;
    }
}

/* Specific container width calculations for 7 columns */
.gallery-pro-container[data-layout="masonry"] .gallery-item {
    box-sizing: border-box;
}

/* Ensure no width conflicts from other plugins */
.gallery-pro-container .gallery-pro-item,
.gallery-pro-container .gallery-item {
    box-sizing: border-box !important;
}

/* Force specific widths for JavaScript masonry - Flexbox với calc chính xác */
.gallery-masonry-layout[data-columns="7"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.gallery-masonry-layout[data-columns="7"] .gallery-item {
    /* 7 cột: gap tổng = 6 * 15px = 90px. Mỗi item = (100% - 90px) / 7 */
    flex: 0 0 calc((100% - 90px) / 7) !important;
    width: calc((100% - 90px) / 7) !important;
    box-sizing: border-box !important;
}

@media (min-width: 1500px) {
    .gallery-masonry-layout[data-columns="7"] {
        gap: 10px !important;
    }
    
    .gallery-masonry-layout[data-columns="7"] .gallery-item {
        /* Gap nhỏ hơn cho màn hình lớn: 6 * 10px = 60px */
        flex: 0 0 calc((100% - 60px) / 7) !important;
        width: calc((100% - 60px) / 7) !important;
    }
}

/* Debug grid overlay */
.debug-grid .gallery-pro-grid {
    background-image: 
        repeating-linear-gradient(
            90deg,
            rgba(255,0,0,0.1) 0,
            rgba(255,0,0,0.1) calc(100% / 7),
            transparent calc(100% / 7),
            transparent calc(100% / 7 * 2)
        );
}