/**
 * Capital Chronicle - Grid Layout System
 * 
 * This file implements a mobile-first, responsive 12-column grid system
 * that serves as the foundation for all content modules.
 * 
 * Key improvements:
 * 1. Mobile-first approach with single column by default
 * 2. Balanced, efficient layouts that utilize full grid width
 * 3. Consistent spacing handled by gap property
 * 4. Modular, reusable utility classes
 */

/* Main Grid Container */
.homepage-content {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: single column by default */
    gap: 24px; /* Space between elements */
    max-width: 1440px; /* Maximum width for the content */
    margin: 0 auto; /* Center the content horizontally */
    padding: 0 16px; /* Horizontal padding for smaller screens */
    width: 100%; /* Ensure the grid takes full width up to max-width */
}

/* Mobile-First Grid Approach */
/* By default, all elements span the full width on mobile */
[class*="grid-col-span-"] {
    grid-column: 1 / -1; /* Full width by default on mobile */
}

/* Tablet and Desktop Grid */
@media screen and (min-width: 768px) {
    .homepage-content {
        grid-template-columns: repeat(12, 1fr); /* 12-column grid on tablet+ */
        padding: 0 24px; /* Slightly larger padding on larger screens */
    }
    
    /* Grid Column Span Classes */
    /* These classes determine how many columns an element should span */
    
    /* Full width (spans all 12 columns) */
    .grid-col-span-12 {
        grid-column: span 12;
    }
    
    /* Three-quarters width (spans 9 columns) */
    .grid-col-span-9 {
        grid-column: span 9;
    }
    
    /* Two-thirds width (spans 8 columns) */
    .grid-col-span-8 {
        grid-column: span 8;
    }
    
    /* Half width (spans 6 columns) */
    .grid-col-span-6 {
        grid-column: span 6;
    }
    
    /* One-third width (spans 4 columns) */
    .grid-col-span-4 {
        grid-column: span 4;
    }
    
    /* Quarter width (spans 3 columns) */
    .grid-col-span-3 {
        grid-column: span 3;
    }
    
    /* Two columns width */
    .grid-col-span-2 {
        grid-column: span 2;
    }
}

/* Specific Balanced Layout Patterns */
@media screen and (min-width: 768px) {
    /* Layout: 8-4 split (main content + sidebar) */
    .grid-layout-main-sidebar {
        display: contents; /* Allow children to participate in parent grid */
    }
    
    .grid-layout-main-sidebar > .grid-main {
        grid-column: span 8;
    }
    
    .grid-layout-main-sidebar > .grid-sidebar {
        grid-column: span 4;
    }
    
    /* Layout: 6-6 even split */
    .grid-layout-even {
        display: contents;
    }
    
    .grid-layout-even > .grid-half {
        grid-column: span 6;
    }
    
    /* Layout: 4-4-4 three equal columns */
    .grid-layout-thirds {
        display: contents;
    }
    
    .grid-layout-thirds > .grid-third {
        grid-column: span 4;
    }
}

/* Responsive Grid Adjustments for Different Screen Sizes */
/* Small Tablets (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .homepage-content {
        gap: 20px; /* Slightly smaller gap on tablets */
    }
    
    /* Optional tablet-specific adjustments */
    .grid-tablet-full {
        grid-column: 1 / -1 !important; /* Force full width on tablets */
    }
    
    /* Common tablet patterns */
    .grid-tablet-half {
        grid-column: span 6 !important;
    }
}

/* Larger Desktops (1200px and above) */
@media screen and (min-width: 1200px) {
    .homepage-content {
        gap: 32px; /* Larger gap on very large screens */
    }
}

/* Grid Row Utilities */
.grid-row-gap-small {
    margin-bottom: 24px;
}

.grid-row-gap-medium {
    margin-bottom: 48px;
}

.grid-row-gap-large {
    margin-bottom: 72px;
}

/* Grid Row Container */
.grid-row {
    display: contents; /* This allows child elements to participate in the parent grid */
    margin-bottom: 48px; /* Space between logical row groups */
}