/* Responsive Grid System - Lightweight CSS Grid based */
/* Can be used alongside existing styles without breaking changes */

:root {
    --grid-columns: 12;
    --grid-gap: 1rem;
    --container-max-width: 1200px;
}

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

.container-fluid {
    width: 100%;
    padding: 0 1rem;
}

/* Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
}

/* Grid 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; }

/* Responsive Breakpoints */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
    
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        grid-column: span 1;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .col-md-1 { grid-column: span 1; }
    .col-md-2 { grid-column: span 2; }
    .col-md-3 { grid-column: span 3; }
    .col-md-4 { grid-column: span 4; }
    .col-md-5 { grid-column: span 5; }
    .col-md-6 { grid-column: span 6; }
    .col-md-7 { grid-column: span 7; }
    .col-md-8 { grid-column: span 8; }
    .col-md-9 { grid-column: span 9; }
    .col-md-10 { grid-column: span 10; }
    .col-md-11 { grid-column: span 11; }
    .col-md-12 { grid-column: span 12; }
}

@media (min-width: 1025px) {
    .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; }
}

/* Centered Content Layout (for about and products pages) */
.content-centered {
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    max-width: 100%;
}

@media (max-width: 768px) {
    .content-centered {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .content-centered {
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
    }
}