/**
 * Maxim API Plugin - Grid System
 * Sistema di griglie responsive con gap gestiti
 * 
 * @version 2.0.0
 * @requires components-core.css
 * @changelog 2.0.0: Aggiunto gap management completo per tutte le colonne
 */

/* =========================================================================
   GRID SYSTEM BASE
   ========================================================================= */

.maxim-grid {
    display: grid;
    align-items: start;
    width: 100%;
}

/* =========================================================================
   GRID COLUMNS WITH GAPS
   ========================================================================= */

/* Auto-fit responsive grids */
.maxim-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--maxim-space-4);
}

.maxim-grid-auto-small {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--maxim-space-3);
}

.maxim-grid-auto-medium {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--maxim-space-4);
}

.maxim-grid-auto-large {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--maxim-space-5);
}

/* =========================================================================
   FIXED COLUMN GRIDS WITH SPECIFIC GAPS
   ========================================================================= */

/* 1 colonna */
.maxim-grid.cols-1 {
    grid-template-columns: 1fr;
    gap: var(--maxim-space-4);
}

/* 2 colonne */
.maxim-grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* 3 colonne */
.maxim-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* 4 colonne */
.maxim-grid.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* 5 colonne */
.maxim-grid.cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

/* 6 colonne */
.maxim-grid.cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

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

/* Grid centrata con max-width */
.maxim-grid-centered {
    max-width: var(--maxim-container-xlarge);
    margin-left: auto;
    margin-right: auto;
}

/* Varianti di dimensione per grid centrate */
.maxim-grid-centered-small {
    max-width: var(--maxim-container-small);
    margin-left: auto;
    margin-right: auto;
}

.maxim-grid-centered-medium {
    max-width: var(--maxim-container-medium);
    margin-left: auto;
    margin-right: auto;
}

.maxim-grid-centered-large {
    max-width: var(--maxim-container-large);
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================================
   GRID GAP VARIATIONS (Classes legacy)
   ========================================================================= */

/* Supporto per classi gap esistenti */
.maxim-grid.gap-0 { gap: 0; }
.maxim-grid.gap-1 { gap: var(--maxim-space-1); }
.maxim-grid.gap-2 { gap: var(--maxim-space-2); }
.maxim-grid.gap-3 { gap: var(--maxim-space-3); }
.maxim-grid.gap-4 { gap: var(--maxim-space-4); }
.maxim-grid.gap-5 { gap: var(--maxim-space-5); }
.maxim-grid.gap-6 { gap: var(--maxim-space-6); }
.maxim-grid.gap-8 { gap: var(--maxim-space-8); }

/* Alias semantici */
.maxim-grid.gap-small { gap: var(--maxim-space-3); }
.maxim-grid.gap-medium { gap: var(--maxim-space-5); }
.maxim-grid.gap-large { gap: var(--maxim-space-6); }

/* =========================================================================
   GRID CHILD ELEMENTS
   ========================================================================= */

/* Rimuovi margini da tutti gli elementi diretti nella griglia */
.maxim-grid > * {
    margin: 0;
}

/* Specifico per card - rimuovi TUTTI i margini quando in griglia */
.maxim-grid > .maxim-card {
    margin: 0 !important;
}

/* =========================================================================
   FRACTIONAL GRIDS
   ========================================================================= */

.maxim-grid-cols-sidebar {
    grid-template-columns: 300px 1fr;
    gap: var(--maxim-space-6);
}

.maxim-grid-cols-sidebar-reverse {
    grid-template-columns: 1fr 300px;
    gap: var(--maxim-space-6);
}

.maxim-grid-cols-2-1 {
    grid-template-columns: 2fr 1fr;
    gap: var(--maxim-space-5);
}

.maxim-grid-cols-1-2 {
    grid-template-columns: 1fr 2fr;
    gap: var(--maxim-space-5);
}

.maxim-grid-cols-3-1 {
    grid-template-columns: 3fr 1fr;
    gap: var(--maxim-space-5);
}

.maxim-grid-cols-1-3 {
    grid-template-columns: 1fr 3fr;
    gap: var(--maxim-space-5);
}

/* =========================================================================
   GRID ROWS
   ========================================================================= */

.maxim-grid-rows-auto {
    grid-auto-rows: auto;
}

.maxim-grid-rows-min {
    grid-auto-rows: min-content;
}

.maxim-grid-rows-max {
    grid-auto-rows: max-content;
}

.maxim-grid-rows-fr {
    grid-auto-rows: 1fr;
}

/* =========================================================================
   GRID ALIGNMENT
   ========================================================================= */

/* Justify Items (horizontal alignment of items within cells) */
.maxim-grid-justify-start {
    justify-items: start;
}

.maxim-grid-justify-center {
    justify-items: center;
}

.maxim-grid-justify-end {
    justify-items: end;
}

.maxim-grid-justify-stretch {
    justify-items: stretch;
}

/* Align Items (vertical alignment of items within cells) */
.maxim-grid-align-start {
    align-items: start;
}

.maxim-grid-align-center {
    align-items: center;
}

.maxim-grid-align-end {
    align-items: end;
}

.maxim-grid-align-stretch {
    align-items: stretch;
}

/* Justify Content (horizontal alignment of grid) */
.maxim-grid-justify-content-start {
    justify-content: start;
}

.maxim-grid-justify-content-center {
    justify-content: center;
}

.maxim-grid-justify-content-end {
    justify-content: end;
}

.maxim-grid-justify-content-between {
    justify-content: space-between;
}

.maxim-grid-justify-content-around {
    justify-content: space-around;
}

.maxim-grid-justify-content-evenly {
    justify-content: space-evenly;
}

/* Align Content (vertical alignment of grid) */
.maxim-grid-align-content-start {
    align-content: start;
}

.maxim-grid-align-content-center {
    align-content: center;
}

.maxim-grid-align-content-end {
    align-content: end;
}

.maxim-grid-align-content-between {
    align-content: space-between;
}

.maxim-grid-align-content-around {
    align-content: space-around;
}

.maxim-grid-align-content-evenly {
    align-content: space-evenly;
}

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

/* Column span */
.maxim-col-span-1 { grid-column: span 1; }
.maxim-col-span-2 { grid-column: span 2; }
.maxim-col-span-3 { grid-column: span 3; }
.maxim-col-span-4 { grid-column: span 4; }
.maxim-col-span-5 { grid-column: span 5; }
.maxim-col-span-6 { grid-column: span 6; }
.maxim-col-span-full { grid-column: 1 / -1; }

/* Row span */
.maxim-row-span-1 { grid-row: span 1; }
.maxim-row-span-2 { grid-row: span 2; }
.maxim-row-span-3 { grid-row: span 3; }
.maxim-row-span-4 { grid-row: span 4; }
.maxim-row-span-5 { grid-row: span 5; }
.maxim-row-span-6 { grid-row: span 6; }
.maxim-row-span-full { grid-row: 1 / -1; }

/* Grid item self alignment */
.maxim-self-start { align-self: start; }
.maxim-self-center { align-self: center; }
.maxim-self-end { align-self: end; }
.maxim-self-stretch { align-self: stretch; }

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

/* =========================================================================
   RESPONSIVE GRID SYSTEM
   ========================================================================= */

/* Large screens and below (max-width: 1200px) */
@media (max-width: 1200px) {
    /* 6 colonne → 3 colonne */
    .maxim-grid.cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
    
    /* 5 colonne → 3 colonne */
    .maxim-grid.cols-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

/* Tablet and below (max-width: 1024px) */
@media (max-width: 1024px) {
    /* 4 colonne → 2 colonne */
    .maxim-grid.cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
    
    .maxim-large\:grid-cols-1 { grid-template-columns: 1fr; }
    .maxim-large\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .maxim-large\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    
    .maxim-large\:col-span-1 { grid-column: span 1; }
    .maxim-large\:col-span-2 { grid-column: span 2; }
    .maxim-large\:col-span-full { grid-column: 1 / -1; }
}

/* Mobile and below (max-width: 768px) */
@media (max-width: 768px) {
    /* Tutte le griglie → 1 colonna su mobile */
    .maxim-grid[class*="cols-"] {
        grid-template-columns: 1fr;
        gap: var(--maxim-space-4);
    }
    
    /* Mantieni griglie specifiche per mobile se richiesto */
    .maxim-medium\:grid-cols-1 { grid-template-columns: 1fr; }
    .maxim-medium\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    
    .maxim-medium\:col-span-1 { grid-column: span 1; }
    .maxim-medium\:col-span-full { grid-column: 1 / -1; }
}

/* Small mobile (max-width: 640px) */
@media (max-width: 640px) {
    .maxim-small\:grid-cols-1 { grid-template-columns: 1fr; }
    
    /* Gap ancora più piccolo su schermi molto piccoli */
    .maxim-grid {
        gap: var(--maxim-space-3);
    }
}

/* =========================================================================
   SPECIAL GRID LAYOUTS
   ========================================================================= */

/* Dashboard stats grid */
.maxim-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--maxim-space-4);
}

/* Product grid */
.maxim-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--maxim-space-5);
}

/* Form grid */
.maxim-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--maxim-space-4);
}

@media (max-width: 768px) {
    .maxim-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Settings grid */
.maxim-settings-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--maxim-space-6);
}

@media (max-width: 768px) {
    .maxim-settings-grid {
        grid-template-columns: 1fr;
    }
}