/**
 * min_core Grid System
 * =============================================================================
 * Framework-agnostic CSS Grid implementation
 * Works alongside Foundation, Tailwind, Bootstrap, or Bulma
 * =============================================================================
 */

/* =============================================================================
   CSS Custom Properties (Design Tokens)
   ============================================================================= */
:root {
    /* Grid Columns */
    --grid-columns: 12;

    /* Grid Gaps */
    --grid-gap-none: 0;
    --grid-gap-sm: 0.5rem;
    --grid-gap-md: 1rem;
    --grid-gap-lg: 1.5rem;
    --grid-gap-xl: 2rem;

    /* Breakpoints */
    --breakpoint-xs: 0;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-xxl: 1536px;

    /* Container Max Widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-xxl: 1400px;
}

/* =============================================================================
   Container Classes
   ============================================================================= */
.mincore-container {
    width: 100%;
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.mincore-container-fluid {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .mincore-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .mincore-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* =============================================================================
   CSS Grid Row
   ============================================================================= */
.mincore-row {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap-md);
}

/* Gap Variants */
.mincore-row--gap-none { gap: var(--grid-gap-none); }
.mincore-row--gap-sm { gap: var(--grid-gap-sm); }
.mincore-row--gap-md { gap: var(--grid-gap-md); }
.mincore-row--gap-lg { gap: var(--grid-gap-lg); }
.mincore-row--gap-xl { gap: var(--grid-gap-xl); }

/* =============================================================================
   Column Classes (Mobile First)
   ============================================================================= */

/* Base: Full width on mobile */
.mincore-col {
    grid-column: span 12 / span 12;
}

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

/* Small Breakpoint (sm: 640px) */
@media (min-width: 640px) {
    .mincore-col-sm-1 { grid-column: span 1 / span 1; }
    .mincore-col-sm-2 { grid-column: span 2 / span 2; }
    .mincore-col-sm-3 { grid-column: span 3 / span 3; }
    .mincore-col-sm-4 { grid-column: span 4 / span 4; }
    .mincore-col-sm-5 { grid-column: span 5 / span 5; }
    .mincore-col-sm-6 { grid-column: span 6 / span 6; }
    .mincore-col-sm-7 { grid-column: span 7 / span 7; }
    .mincore-col-sm-8 { grid-column: span 8 / span 8; }
    .mincore-col-sm-9 { grid-column: span 9 / span 9; }
    .mincore-col-sm-10 { grid-column: span 10 / span 10; }
    .mincore-col-sm-11 { grid-column: span 11 / span 11; }
    .mincore-col-sm-12 { grid-column: span 12 / span 12; }
}

/* Medium Breakpoint (md: 768px) */
@media (min-width: 768px) {
    .mincore-col-md-1 { grid-column: span 1 / span 1; }
    .mincore-col-md-2 { grid-column: span 2 / span 2; }
    .mincore-col-md-3 { grid-column: span 3 / span 3; }
    .mincore-col-md-4 { grid-column: span 4 / span 4; }
    .mincore-col-md-5 { grid-column: span 5 / span 5; }
    .mincore-col-md-6 { grid-column: span 6 / span 6; }
    .mincore-col-md-7 { grid-column: span 7 / span 7; }
    .mincore-col-md-8 { grid-column: span 8 / span 8; }
    .mincore-col-md-9 { grid-column: span 9 / span 9; }
    .mincore-col-md-10 { grid-column: span 10 / span 10; }
    .mincore-col-md-11 { grid-column: span 11 / span 11; }
    .mincore-col-md-12 { grid-column: span 12 / span 12; }
}

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

/* Extra Large Breakpoint (xl: 1280px) */
@media (min-width: 1280px) {
    .mincore-col-xl-1 { grid-column: span 1 / span 1; }
    .mincore-col-xl-2 { grid-column: span 2 / span 2; }
    .mincore-col-xl-3 { grid-column: span 3 / span 3; }
    .mincore-col-xl-4 { grid-column: span 4 / span 4; }
    .mincore-col-xl-5 { grid-column: span 5 / span 5; }
    .mincore-col-xl-6 { grid-column: span 6 / span 6; }
    .mincore-col-xl-7 { grid-column: span 7 / span 7; }
    .mincore-col-xl-8 { grid-column: span 8 / span 8; }
    .mincore-col-xl-9 { grid-column: span 9 / span 9; }
    .mincore-col-xl-10 { grid-column: span 10 / span 10; }
    .mincore-col-xl-11 { grid-column: span 11 / span 11; }
    .mincore-col-xl-12 { grid-column: span 12 / span 12; }
}

/* =============================================================================
   Predefined Grid Layouts (2-6 Columns)
   ============================================================================= */

/* 2 Columns Layout */
.mincore-grid-2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--grid-gap-md);
}

@media (min-width: 768px) {
    .mincore-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3 Columns Layout */
.mincore-grid-3 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--grid-gap-md);
}

@media (min-width: 640px) {
    .mincore-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .mincore-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 4 Columns Layout */
.mincore-grid-4 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--grid-gap-md);
}

@media (min-width: 640px) {
    .mincore-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .mincore-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 5 Columns Layout */
.mincore-grid-5 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap-md);
}

@media (min-width: 768px) {
    .mincore-grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .mincore-grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* 6 Columns Layout */
.mincore-grid-6 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap-md);
}

@media (min-width: 640px) {
    .mincore-grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .mincore-grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* =============================================================================
   Grid Demo Styling
   ============================================================================= */
.mincore-grid-demo {
    padding: 2rem 0;
}

.mincore-grid-demo h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.grid-demo__row {
    display: grid;
    gap: 1rem;
}

.grid-demo--2cols .grid-demo__row {
    grid-template-columns: repeat(1, 1fr);
}

.grid-demo--3cols .grid-demo__row {
    grid-template-columns: repeat(1, 1fr);
}

.grid-demo--4cols .grid-demo__row {
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
    .grid-demo--2cols .grid-demo__row {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-demo--3cols .grid-demo__row {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-demo--4cols .grid-demo__row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-demo--4cols .grid-demo__row {
        grid-template-columns: repeat(4, 1fr);
    }
}

.grid-demo__col {
    padding: 1.5rem 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    text-align: center;
    border-radius: 0.5rem;
    font-weight: 500;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid-demo__col:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* =============================================================================
   Utility Classes
   ============================================================================= */

/* Flexbox Utilities */
.mincore-flex { display: flex; }
.mincore-flex-wrap { flex-wrap: wrap; }
.mincore-flex-nowrap { flex-wrap: nowrap; }
.mincore-flex-row { flex-direction: row; }
.mincore-flex-col { flex-direction: column; }
.mincore-justify-start { justify-content: flex-start; }
.mincore-justify-center { justify-content: center; }
.mincore-justify-end { justify-content: flex-end; }
.mincore-justify-between { justify-content: space-between; }
.mincore-justify-around { justify-content: space-around; }
.mincore-items-start { align-items: flex-start; }
.mincore-items-center { align-items: center; }
.mincore-items-end { align-items: flex-end; }
.mincore-items-stretch { align-items: stretch; }

/* Gap Utilities */
.mincore-gap-0 { gap: 0; }
.mincore-gap-1 { gap: 0.25rem; }
.mincore-gap-2 { gap: 0.5rem; }
.mincore-gap-3 { gap: 0.75rem; }
.mincore-gap-4 { gap: 1rem; }
.mincore-gap-5 { gap: 1.25rem; }
.mincore-gap-6 { gap: 1.5rem; }
.mincore-gap-8 { gap: 2rem; }

/* =============================================================================
   Reduced Motion Support
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .grid-demo__col {
        transition: none;
    }

    .grid-demo__col:hover {
        transform: none;
    }
}

/* =============================================================================
   Print Styles
   ============================================================================= */
@media print {
    .mincore-row {
        display: block;
    }

    .mincore-col,
    [class*="mincore-col-"] {
        width: 100%;
        max-width: 100%;
    }

    .grid-demo__col {
        background: #eee !important;
        color: #000 !important;
        box-shadow: none !important;
    }
}