/* Responsive Grid System - 6-3-2-1 Pattern */

/* Base Grid Classes */
.grid-6 {
    display: grid;
    gap: var(--spacing-md);
    width: 100%;
}

/* Mobile gap override */
@media (max-width: 480px) {
    .grid-6,
    .grid-4-to-6,
    .grid-3-2-1 {
        gap: var(--spacing-md);  /* 19.2px gap on mobile */
    }
}

/* Default: 1 column on mobile */
.grid-6 {
    grid-template-columns: 1fr;
}

/* Small screens: 2 columns */
@media (min-width: 640px) {
    .grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium screens: 3 columns */
@media (min-width: 768px) {
    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large screens: 6 columns */
@media (min-width: 1280px) {
    .grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Alternative patterns for sections that need different breakpoints */
.grid-4-to-6 {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: 1fr;
}

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

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

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

/* Grid for main content sections */
.grid-responsive {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
}

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

/* Add 960px breakpoint for better venture card layout */
@media (min-width: 960px) {
    .grid-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

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

/* Utility classes for span */
.col-span-2 {
    grid-column: span 2;
}

.col-span-3 {
    grid-column: span 3;
}

.col-span-4 {
    grid-column: span 4;
}

.col-span-6 {
    grid-column: span 6;
}

.col-span-full {
    grid-column: 1 / -1;
}

/* Responsive span utilities */
@media (min-width: 768px) {
    .md\:col-span-2 {
        grid-column: span 2;
    }
    
    .md\:col-span-3 {
        grid-column: span 3;
    }
}

/* Medium-large breakpoint for better venture layout */
@media (min-width: 960px) {
    .ml\:col-span-1 {
        grid-column: span 1;
    }
    
    .ml\:col-span-2 {
        grid-column: span 2;
    }
    
    .ml\:col-span-3 {
        grid-column: span 3;
    }
}

@media (min-width: 1280px) {
    .lg\:col-span-2 {
        grid-column: span 2;
    }
    
    .lg\:col-span-3 {
        grid-column: span 3;
    }
    
    .lg\:col-span-4 {
        grid-column: span 4;
    }
}

/* Apply to existing sections */
.skills-grid,
.expertise-grid,
.services-grid,
.case-studies-grid {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .skills-grid,
    .expertise-grid,
    .services-grid,
    .case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .skills-grid,
    .expertise-grid,
    .services-grid,
    .case-studies-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .skills-grid,
    .expertise-grid,
    .services-grid,
    .case-studies-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    
    /* Special handling for featured items */
    .case-study-card.featured,
    .service-card.featured {
        grid-column: span 3;
    }
    
    .expertise-card.primary {
        grid-column: span 2;
    }
}

/* Responsive utilities */
@media (min-width: 640px) {
    .sm\:col-span-1 { grid-column: span 1; }
    .sm\:col-span-2 { grid-column: span 2; }
    .sm\:col-span-3 { grid-column: span 3; }
    .sm\:col-span-full { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
    .md\:col-span-1 { grid-column: span 1; }
    .md\:col-span-2 { grid-column: span 2; }
    .md\:col-span-3 { grid-column: span 3; }
    .md\:col-span-full { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
    .ml\:col-span-1 { grid-column: span 1; }
    .ml\:col-span-2 { grid-column: span 2; }
    .ml\:col-span-3 { grid-column: span 3; }
    .ml\:col-span-full { grid-column: 1 / -1; }
}

@media (min-width: 1280px) {
    .lg\:col-span-1 { grid-column: span 1; }
    .lg\:col-span-2 { grid-column: span 2; }
    .lg\:col-span-3 { grid-column: span 3; }
    .lg\:col-span-4 { grid-column: span 4; }
    .lg\:col-span-5 { grid-column: span 5; }
    .lg\:col-span-6 { grid-column: span 6; }
    .lg\:col-span-full { grid-column: 1 / -1; }
}

/* Mobile gap adjustments */
@media (max-width: 768px) {
    .grid-6,
    .grid-4-to-6,
    .grid-responsive,
    .skills-grid,
    .expertise-grid,
    .services-grid,
    .case-studies-grid {
        gap: var(--spacing-sm);  /* Will use new 12px */
    }
}

@media (max-width: 480px) {
    .grid-6,
    .grid-4-to-6,
    .grid-responsive,
    .skills-grid,
    .expertise-grid,
    .services-grid,
    .case-studies-grid {
        gap: var(--spacing-xs);  /* Will use new 4px */
    }
}