/**
 * MODERN GRID SYSTEM 2026
 * Implements 2026 best practices for grid layouts
 * - 12-column desktop, 4-column mobile
 * - 8-point grid spacing system
 * - Mobile-first responsive design
 * - CSS Grid for layout, Flexbox for components
 * - Semantic HTML structure support
 */

/* ====== 8-POINT GRID SYSTEM ====== */
:root {
    /* 8-point spacing scale */
    --spacing-1: 8px;   /* 1 × 8 */
    --spacing-2: 16px;  /* 2 × 8 */
    --spacing-3: 24px;  /* 3 × 8 */
    --spacing-4: 32px;  /* 4 × 8 */
    --spacing-5: 40px;  /* 5 × 8 */
    --spacing-6: 48px;  /* 6 × 8 */
    --spacing-8: 64px;  /* 8 × 8 */
    --spacing-10: 80px; /* 10 × 8 */
    --spacing-12: 96px; /* 12 × 8 */
    
    /* Grid gutters (8-point based) */
    --gutter-mobile: var(--spacing-2);   /* 16px */
    --gutter-tablet: var(--spacing-3);   /* 24px */
    --gutter-desktop: var(--spacing-3);  /* 24px */
    
    /* Grid margins */
    --margin-mobile: var(--spacing-2);   /* 16px */
    --margin-tablet: var(--spacing-3);   /* 24px */
    --margin-desktop: var(--spacing-4);  /* 32px */
}

/* ====== MAIN GRID CONTAINER ====== */
/* Mobile-first: 4-column grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter-mobile);
    padding: 0 var(--margin-mobile);
    width: 100%;
    max-width: 100%;
}

/* Tablet: 8-column grid */
@media (min-width: 600px) and (max-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(8, 1fr);
        gap: var(--gutter-tablet);
        padding: 0 var(--margin-tablet);
    }
}

/* Desktop: 12-column grid */
@media (min-width: 1025px) {
    .grid-container {
        grid-template-columns: repeat(12, 1fr);
        gap: var(--gutter-desktop);
        padding: 0 var(--margin-desktop);
        max-width: 1320px;
        margin: 0 auto;
    }
}

/* ====== GRID AREAS (Semantic Layout) ====== */
.page-layout {
    display: grid;
    grid-template-areas:
        "navbar"
        "header"
        "main"
        "footer";
    grid-template-rows: auto auto 1fr auto;
    min-height: 100vh;
}

/* Navbar spans full width */
.navbar {
    grid-area: navbar;
    grid-column: 1 / -1;
}

/* Header/Hero spans full width */
header,
.hero-section,
#home {
    grid-area: header;
    grid-column: 1 / -1;
}

/* Main content area */
main {
    grid-area: main;
    grid-column: 1 / -1;
}

/* Footer spans full width */
footer {
    grid-area: footer;
    grid-column: 1 / -1;
}

/* ====== GRID COLUMN SPANS ====== */
/* Mobile: 4-column spans */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }

/* Tablet: 8-column spans */
@media (min-width: 600px) and (max-width: 1024px) {
    .col-t-1 { grid-column: span 1; }
    .col-t-2 { grid-column: span 2; }
    .col-t-3 { grid-column: span 3; }
    .col-t-4 { grid-column: span 4; }
    .col-t-5 { grid-column: span 5; }
    .col-t-6 { grid-column: span 6; }
    .col-t-7 { grid-column: span 7; }
    .col-t-8 { grid-column: span 8; }
}

/* Desktop: 12-column spans */
@media (min-width: 1025px) {
    .col-d-1 { grid-column: span 1; }
    .col-d-2 { grid-column: span 2; }
    .col-d-3 { grid-column: span 3; }
    .col-d-4 { grid-column: span 4; }
    .col-d-5 { grid-column: span 5; }
    .col-d-6 { grid-column: span 6; }
    .col-d-7 { grid-column: span 7; }
    .col-d-8 { grid-column: span 8; }
    .col-d-9 { grid-column: span 9; }
    .col-d-10 { grid-column: span 10; }
    .col-d-11 { grid-column: span 11; }
    .col-d-12 { grid-column: span 12; }
}

/* ====== COMMON LAYOUT PATTERNS ====== */

/* Main content with sidebar */
.main-with-sidebar {
    display: grid;
    gap: var(--gutter-desktop);
}

@media (min-width: 1025px) {
    .main-with-sidebar {
        grid-template-columns: 8fr 4fr; /* 8 columns main, 4 columns sidebar */
    }
}

/* Three-column layout */
.three-column {
    display: grid;
    gap: var(--gutter-mobile);
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .three-column {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gutter-tablet);
    }
}

@media (min-width: 1025px) {
    .three-column {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--gutter-desktop);
    }
}

/* Four-column layout (cards, features) */
.four-column {
    display: grid;
    gap: var(--gutter-mobile);
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .four-column {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gutter-tablet);
    }
}

@media (min-width: 1025px) {
    .four-column {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--gutter-desktop);
    }
}

/* ====== BENTO BOX GRID (2026 Trend) ====== */
.bento-grid {
    display: grid;
    gap: var(--gutter-mobile);
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(200px, auto);
}

@media (min-width: 600px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gutter-tablet);
    }
}

@media (min-width: 1025px) {
    .bento-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--gutter-desktop);
        grid-auto-flow: dense; /* Fill gaps automatically */
    }
    
    /* Varied sizes for visual interest */
    .bento-item-large {
        grid-column: span 2;
        grid-row: span 2;
    }
    
    .bento-item-wide {
        grid-column: span 2;
    }
    
    .bento-item-tall {
        grid-row: span 2;
    }
}

/* ====== FLEXBOX FOR COMPONENTS ====== */
/* Use Flexbox inside grid items for alignment */
.navbar,
.nav-links,
.hero-content,
.card-content,
.footer-content {
    display: flex;
    align-items: center;
}

.nav-links {
    gap: var(--spacing-2);
    flex-wrap: nowrap;
}

/* ====== CONTAINER QUERIES (2026 Feature) ====== */
@container (min-width: 400px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 600px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ====== GRID UTILITIES ====== */

/* Full width */
.full-width {
    grid-column: 1 / -1;
}

/* Center content */
.center-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Gap utilities (8-point system) */
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }

/* ====== RESPONSIVE IMAGES IN GRID ====== */
.grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9; /* Maintain aspect ratio */
}

/* ====== STICKY SECTIONS ====== */
.sticky-sidebar {
    position: sticky;
    top: 80px; /* Below navbar */
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

/* ====== ACCESSIBILITY ====== */
/* Logical reading order */
.grid-container > * {
    order: 0;
}

/* Ensure touch targets are 44px minimum */
@media (max-width: 768px) {
    button,
    a,
    .interactive {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ====== PRINT STYLES ====== */
@media print {
    .grid-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }
    
    .navbar,
    .sidebar,
    footer {
        display: none;
    }
}