/* ============================================================
 * RESPONSIVE GRID SYSTEM
 * Version: 1.0.0
 * Description: Advanced responsive grid for story cards
 * ============================================================ */

/* ====================
 * 1. FLEXIBLE GRID CONTAINER
 * ==================== */

.story-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.story-grid .col-story {
    padding: 0 10px;
    margin-bottom: 20px;
}

/* ====================
 * 2. RESPONSIVE BREAKPOINTS
 * ==================== */

/* Extra Large Devices (1400px and up) */
@media (min-width: 1400px) {
    .story-grid.cols-auto .col-story {
        width: 14.285714%; /* 7 columns */
    }
    
    .story-grid.cols-6 .col-story {
        width: 16.666667%;
    }
}

/* Large Devices (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .story-grid.cols-auto .col-story,
    .story-grid.cols-6 .col-story {
        width: 16.666667%; /* 6 columns */
    }
}

/* Medium-Large Devices (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .story-grid.cols-auto .col-story,
    .story-grid.cols-6 .col-story {
        width: 20%; /* 5 columns */
    }
}

/* Medium Devices - Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .story-grid.cols-auto .col-story,
    .story-grid.cols-6 .col-story {
        width: 25%; /* 4 columns */
    }
}

/* Small-Medium Devices (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .story-grid.cols-auto .col-story,
    .story-grid.cols-6 .col-story {
        width: 33.333333%; /* 3 columns */
    }
}

/* Small Devices - Mobile (below 576px) */
@media (max-width: 575px) {
    .story-grid.cols-auto .col-story,
    .story-grid.cols-6 .col-story {
        width: 50%; /* 2 columns */
    }
}

/* Extra Small Devices (below 400px) */
@media (max-width: 399px) {
    .story-grid.cols-auto .col-story,
    .story-grid.cols-6 .col-story {
        width: 100%; /* 1 column */
    }
}

/* ====================
 * 3. LIST VIEW GRID
 * ==================== */

.story-grid.view-list .col-story {
    width: 100% !important;
}

/* Split list view for larger screens */
@media (min-width: 992px) {
    .story-grid.view-list.split .col-story {
        width: 50% !important;
    }
}

/* ====================
 * 4. COMPACT VIEW GRID
 * ==================== */

/* Compact mode - more items per row */
@media (min-width: 1400px) {
    .story-grid.view-compact .col-story {
        width: 12.5%; /* 8 columns */
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .story-grid.view-compact .col-story {
        width: 14.285714%; /* 7 columns */
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .story-grid.view-compact .col-story {
        width: 16.666667%; /* 6 columns */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .story-grid.view-compact .col-story {
        width: 20%; /* 5 columns */
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .story-grid.view-compact .col-story {
        width: 25%; /* 4 columns */
    }
}

@media (max-width: 575px) {
    .story-grid.view-compact .col-story {
        width: 33.333333%; /* 3 columns */
    }
}

/* ====================
 * 5. MASONRY LAYOUT (Optional)
 * ==================== */

.story-grid.masonry {
    column-count: 6;
    column-gap: 20px;
}

.story-grid.masonry .col-story {
    width: 100%;
    display: inline-block;
    margin-bottom: 20px;
    break-inside: avoid;
}

@media (max-width: 1199px) {
    .story-grid.masonry {
        column-count: 5;
    }
}

@media (max-width: 991px) {
    .story-grid.masonry {
        column-count: 4;
    }
}

@media (max-width: 767px) {
    .story-grid.masonry {
        column-count: 3;
    }
}

@media (max-width: 575px) {
    .story-grid.masonry {
        column-count: 2;
    }
}

/* ====================
 * 6. GRID GAP UTILITIES
 * ==================== */

.story-grid.gap-sm {
    margin: 0 -5px;
}

.story-grid.gap-sm .col-story {
    padding: 0 5px;
    margin-bottom: 10px;
}

.story-grid.gap-lg {
    margin: 0 -15px;
}

.story-grid.gap-lg .col-story {
    padding: 0 15px;
    margin-bottom: 30px;
}

/* ====================
 * 7. CONTAINER WIDTHS
 * ==================== */

.container-fluid-custom {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 1400px) {
    .container-fluid-custom {
        padding: 0 30px;
    }
}

/* ====================
 * 8. NO GUTTERS OPTION
 * ==================== */

.story-grid.no-gutters {
    margin: 0;
}

.story-grid.no-gutters .col-story {
    padding: 0;
}

.story-grid.no-gutters .img-wrap {
    border-radius: 0;
    margin-bottom: 0;
}

/* ====================
 * 9. CENTERED GRID
 * ==================== */

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

/* ====================
 * 10. MOBILE OPTIMIZATIONS
 * ==================== */

@media (max-width: 767px) {
    .story-grid {
        margin: 0 -8px;
    }
    
    .story-grid .col-story {
        padding: 0 8px;
        margin-bottom: 16px;
    }
}

@media (max-width: 575px) {
    .story-grid {
        margin: 0 -6px;
    }
    
    .story-grid .col-story {
        padding: 0 6px;
        margin-bottom: 12px;
    }
}

/* ====================
 * 11. PRINT STYLES
 * ==================== */

@media print {
    .story-grid .col-story {
        width: 33.333333% !important;
        page-break-inside: avoid;
    }
    
    .img-wrap:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ====================
 * 12. ACCESSIBILITY - HIGH CONTRAST
 * ==================== */

@media (prefers-contrast: high) {
    .img-wrap {
        border: 2px solid #000;
    }
    
    .img-wrap .caption {
        background: #000;
        color: #fff;
    }
}

/* ====================
 * 13. FLEXBOX FALLBACK FOR OLD BROWSERS
 * ==================== */

@supports not (display: flex) {
    .story-grid {
        display: block;
    }
    
    .story-grid .col-story {
        display: inline-block;
        vertical-align: top;
    }
}

/* ====================
 * 14. GRID AUTO-FIT (Modern browsers)
 * ==================== */

.story-grid.auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.story-grid.auto-fit .col-story {
    width: 100%;
    padding: 0;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .story-grid.auto-fit {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 575px) {
    .story-grid.auto-fit {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ====================
 * 15. PERFORMANCE OPTIMIZATION
 * ==================== */

/* Use CSS containment for better performance */
.story-grid .col-story {
    contain: layout style paint;
}

/* Lazy load images with intersection observer */
.story-grid .col-story img[loading="lazy"] {
    content-visibility: auto;
}