/* ==========================================
   MODERN CSS GRID SYSTEM
   ==========================================*/

/* CSS Custom Properties */
:root {
    --grid-columns: 12;
    --grid-gap: 1rem;
    --grid-gap-sm: 0.5rem;
    --grid-gap-lg: 1.5rem;

    --container-max-width: 1200px;
    --container-padding: 1rem;

}






/* Container */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
}

.container-fluid {
    width: 100%;
    padding: 0 var(--container-padding);
}

.container-100 {
     max-width: var(--container-max-width);
     width: none;
    padding: 0 var(--container-padding);
    margin: 0 auto;
}

/* Grid System */
.row {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
    width: 100%;
    margin: 0;
}

/* Gap variations */
.row.gap-none { gap: 0; }
.row.gap-sm { gap: var(--grid-gap-sm); }
.row.gap-lg { gap: var(--grid-gap-lg); }

/* Auto-fit for responsive columns */
.row.auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.row.auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* Column system */
[class*="col-"] {
    grid-column: span 1;
    min-width: 0; /* Prevents overflow */
}

/* Desktop columns */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Auto sizing */
.col-auto { grid-column: auto; }
.col-fill { grid-column: 1 / -1; }

/* Offset system */
.col-offset-1 { grid-column-start: 2; }
.col-offset-2 { grid-column-start: 3; }
.col-offset-3 { grid-column-start: 4; }
.col-offset-4 { grid-column-start: 5; }
.col-offset-5 { grid-column-start: 6; }
.col-offset-6 { grid-column-start: 7; }
.col-offset-7 { grid-column-start: 8; }
.col-offset-8 { grid-column-start: 9; }
.col-offset-9 { grid-column-start: 10; }
.col-offset-10 { grid-column-start: 11; }
.col-offset-11 { grid-column-start: 12; }

/* Order system */
.col-order-1 { order: 1; }
.col-order-2 { order: 2; }
.col-order-3 { order: 3; }
.col-order-4 { order: 4; }
.col-order-5 { order: 5; }
.col-order-first { order: -1; }
.col-order-last { order: 13; }

/* Alignment utilities */
.col-align-start { align-self: start; }
.col-align-center { align-self: center; }
.col-align-end { align-self: end; }
.col-align-stretch { align-self: stretch; }

.col-justify-start { justify-self: start; }
.col-justify-center { justify-self: center; }
.col-justify-end { justify-self: end; }
.col-justify-stretch { justify-self: stretch; }


/* ==========================================
   TABLET RESPONSIVE (max-width: 1199px)
   ==========================================*/
@media (max-width: 1199px) {
    
    :root {
        --grid-gap: 0.75rem;
        --container-padding: 1rem;
    }
    
    .row {
        gap: var(--grid-gap);
    }

    /* Reset all columns to full width by default */
    [class*="col-"]:not([class*="col-m-"]) {
        grid-column: span 12;
    }
    
    /* Tablet specific columns */
    .col-m-1 { grid-column: span 1; }
    .col-m-2 { grid-column: span 2; }
    .col-m-3 { grid-column: span 3; }
    .col-m-4 { grid-column: span 4; }
    .col-m-5 { grid-column: span 5; }
    .col-m-6 { grid-column: span 6; }
    .col-m-7 { grid-column: span 7; }
    .col-m-8 { grid-column: span 8; }
    .col-m-9 { grid-column: span 9; }
    .col-m-10 { grid-column: span 10; }
    .col-m-11 { grid-column: span 11; }
    .col-m-12 { grid-column: span 12; }
    
    /* Tablet offset system */
    .col-m-offset-1 { grid-column-start: 2; }
    .col-m-offset-2 { grid-column-start: 3; }
    .col-m-offset-3 { grid-column-start: 4; }
    .col-m-offset-4 { grid-column-start: 5; }
    .col-m-offset-5 { grid-column-start: 6; }
    .col-m-offset-6 { grid-column-start: 7; }
    
    /* Tablet order system */
    .col-m-order-1 { order: 1; }
    .col-m-order-2 { order: 2; }
    .col-m-order-3 { order: 3; }
    .col-m-order-first { order: -1; }
    .col-m-order-last { order: 13; }
    
    /* Tablet alignment */
    .col-m-align-start { align-self: start; }
    .col-m-align-center { align-self: center; }
    .col-m-align-end { align-self: end; }
    
    /* Auto-fit adjustments */
    .row.auto-fit { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .row.auto-fill { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

} /* @MEDIA TABLET */

/* ==========================================
   MOBILE RESPONSIVE (max-width: 767px)
   ==========================================*/
@media (max-width: 767px) {
    
    :root {
        --grid-gap: 0.5rem;
        --container-padding: 0.75rem;
    }
    
    .row {
        gap: var(--grid-gap);
    }

    /* Reset all columns to full width by default */
    [class*="col-"]:not([class*="col-s-"]) {
        grid-column: span 12;
    }
    
    /* Mobile specific columns */
    .col-s-1 { grid-column: span 1; }
    .col-s-2 { grid-column: span 2; }
    .col-s-3 { grid-column: span 3; }
    .col-s-4 { grid-column: span 4; }
    .col-s-5 { grid-column: span 5; }
    .col-s-6 { grid-column: span 6; }
    .col-s-7 { grid-column: span 7; }
    .col-s-8 { grid-column: span 8; }
    .col-s-9 { grid-column: span 9; }
    .col-s-10 { grid-column: span 10; }
    .col-s-11 { grid-column: span 11; }
    .col-s-12 { grid-column: span 12; }
    
    /* Mobile offset system */
    .col-s-offset-1 { grid-column-start: 2; }
    .col-s-offset-2 { grid-column-start: 3; }
    .col-s-offset-3 { grid-column-start: 4; }
    .col-s-offset-4 { grid-column-start: 5; }
    .col-s-offset-5 { grid-column-start: 6; }
    .col-s-offset-6 { grid-column-start: 7; }
    
    /* Mobile order system */
    .col-s-order-1 { order: 1; }
    .col-s-order-2 { order: 2; }
    .col-s-order-3 { order: 3; }
    .col-s-order-first { order: -1; }
    .col-s-order-last { order: 13; }
    
    /* Mobile alignment */
    .col-s-align-start { align-self: start; }
    .col-s-align-center { align-self: center; }
    .col-s-align-end { align-self: end; }
    
    /* Auto-fit adjustments */
    .row.auto-fit { grid-template-columns: 1fr; }
    .row.auto-fill { grid-template-columns: 1fr; }

} /* @MEDIA MOBILE */

/* ==========================================
   SMALL MOBILE (max-width: 480px)
   ==========================================*/
@media (max-width: 480px) {
    
    :root {
        --grid-gap: 0.25rem;
        --container-padding: 0.5rem;
    }
    
    .row {
        gap: var(--grid-gap);
    }

    /* Force all columns to full width on small screens */
    /*
    [class*="col-"] {
        grid-column: span 12;
    }
    */
    /* Only allow specific small mobile columns */
    .col-xs-6 { grid-column: span 6; }
    .col-xs-12 { grid-column: span 12; }

} /* @MEDIA SMALL MOBILE */

/* ==========================================
   UTILITY CLASSES
   ==========================================*/

/* Display utilities */
.d-grid { display: grid; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-none { display: none; }

/* Responsive display */
@media (max-width: 1199px) {
    .d-m-none { display: none; }
    .d-m-block { display: block; }
    .d-m-grid { display: grid; }
    .d-m-flex { display: flex; }
}

@media (max-width: 767px) {
    .d-s-none { display: none; }
    .d-s-block { display: block; }
    .d-s-grid { display: grid; }
    .d-s-flex { display: flex; }
}

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Spacing utilities */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

/* Margin/Padding directions */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 3rem; }

/* Width utilities */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }
.w-auto { width: auto; }

/* Height utilities */
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.h-auto { height: auto; }

/* Aspect ratio utilities */
.aspect-ratio-1-1 { aspect-ratio: 1/1; }
.aspect-ratio-16-9 { aspect-ratio: 16/9; }
.aspect-ratio-4-3 { aspect-ratio: 4/3; }
.aspect-ratio-3-2 { aspect-ratio: 3/2; }

/* Position utilities */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* Overflow utilities */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

/* Border radius utilities */
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 1rem; }
.rounded-full { border-radius: 50%; }
.rounded-none { border-radius: 0; }

/* ==========================================
   ADVANCED LAYOUT SYSTEMS
   ==========================================*/

/* Semantic Layout Areas */
.layout-main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header"
        "content"
        "footer";
    min-height: 100vh;
}

.layout-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header"
        "content sidebar"
        "footer footer";
    min-height: 100vh;
    gap: 2rem;
}

.layout-sidebar-left {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
    min-height: 100vh;
    gap: 2rem;
}

.layout-full-width {
    display: grid;
    grid-template-columns: 1fr;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* Layout Areas */
.area-header { grid-area: header; }
.area-content { grid-area: content; }
.area-sidebar { grid-area: sidebar; }
.area-footer { grid-area: footer; }

/* WordPress specific layouts */
.wp-layout-blog {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
}

.wp-layout-archive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.wp-layout-single {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
}

/* ==========================================
   COMPONENT GRIDS
   ==========================================*/

/* Card Grid Systems */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.card-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.card-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.card-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Masonry-like grid */
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    grid-auto-rows: max-content;
}

/* Featured grid layouts */
.featured-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
}

.featured-grid > :first-child {
    grid-row: 1 / -1;
}

/* Magazine style grid */
.magazine-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 200px);
    gap: 1rem;
}

.magazine-grid .featured {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}

.magazine-grid .secondary {
    grid-column: 4 / 7;
    grid-row: 1 / 2;
}

/* ==========================================
   WORDPRESS SPECIFIC COMPONENTS
   ==========================================*/

/* Post Grid */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.post-item {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.post-meta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    font-size: 0.9rem;
    color: #666;
}

/* Widget Areas */
.widget-area {
    display: grid;
    gap: 2rem;
}

.widget {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Navigation Grids */
.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.nav-mega {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 2rem;
}

/* Form Grids */
.form-grid {
    display: grid;
    gap: 1rem;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: grid;
    gap: 0.5rem;
}

.form-group.span-2 {
    grid-column: span 2;
}

.form-group.span-3 {
    grid-column: span 3;
}

/* ==========================================
   RESPONSIVE LAYOUT HELPERS
   ==========================================*/

/* Responsive containers */
.container-sm { max-width: 576px; margin: 0 auto; }
.container-md { max-width: 768px; margin: 0 auto; }
.container-lg { max-width: 992px; margin: 0 auto; }
.container-xl { max-width: 1200px; margin: 0 auto; }
.container-xxl { max-width: 1400px; margin: 0 auto; }

/* Responsive grid helpers */
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width, 250px), 1fr));
    gap: var(--grid-gap);
}

/* Dynamic grid sizes */
.grid-auto-250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-auto-300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-auto-350 { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
.grid-auto-400 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }

/* Aspect ratio containers */
.aspect-container {
    position: relative;
    overflow: hidden;
}

.aspect-container > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================
   SECTION LAYOUTS
   ==========================================*/

/* Hero sections */
.hero-section {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 4rem 2rem;
    text-align: center;
}

.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
    min-height: 80vh;
}

/* Content sections */
.content-section {
    display: grid;
    gap: 3rem;
    padding: 4rem 0;
}

.content-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.content-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Feature sections */
.feature-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 3rem 0;
}

.feature-item {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ==========================================
   ADVANCED RESPONSIVE BREAKPOINTS
   ==========================================*/

/* Extra large screens */
@media (min-width: 1400px) {
    .col-xl-1 { grid-column: span 1; }
    .col-xl-2 { grid-column: span 2; }
    .col-xl-3 { grid-column: span 3; }
    .col-xl-4 { grid-column: span 4; }
    .col-xl-5 { grid-column: span 5; }
    .col-xl-6 { grid-column: span 6; }
    .col-xl-7 { grid-column: span 7; }
    .col-xl-8 { grid-column: span 8; }
    .col-xl-9 { grid-column: span 9; }
    .col-xl-10 { grid-column: span 10; }
    .col-xl-11 { grid-column: span 11; }
    .col-xl-12 { grid-column: span 12; }
    
    .card-grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .card-grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Large screens */
@media (min-width: 1200px) and (max-width: 1399px) {
    .col-lg-1 { grid-column: span 1; }
    .col-lg-2 { grid-column: span 2; }
    .col-lg-3 { grid-column: span 3; }
    .col-lg-4 { grid-column: span 4; }
    .col-lg-5 { grid-column: span 5; }
    .col-lg-6 { grid-column: span 6; }
    .col-lg-7 { grid-column: span 7; }
    .col-lg-8 { grid-column: span 8; }
    .col-lg-9 { grid-column: span 9; }
    .col-lg-10 { grid-column: span 10; }
    .col-lg-11 { grid-column: span 11; }
    .col-lg-12 { grid-column: span 12; }
}