/**
 * 12-Column Grid System
 * Desktop: 960px, Tablet: 720px, Mobile: 360px
 * 
 * @package SiderMaker
 * @since 1.0.0
 */

/* Container */
.sm-container {
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.sm-container-full {
    width: 100%;
    max-width: 100%;
}

/* Row */
.sm-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

/* Columns */
.sm-col-1, .sm-col-2, .sm-col-3, .sm-col-4, .sm-col-5, .sm-col-6,
.sm-col-7, .sm-col-8, .sm-col-9, .sm-col-10, .sm-col-11, .sm-col-12 {
    position: relative;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 20px;
}

/* Desktop (960px) */
@media (min-width: 768px) {
    .sm-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .sm-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .sm-col-3 { flex: 0 0 25%; max-width: 25%; }
    .sm-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .sm-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .sm-col-6 { flex: 0 0 50%; max-width: 50%; }
    .sm-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .sm-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .sm-col-9 { flex: 0 0 75%; max-width: 75%; }
    .sm-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .sm-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .sm-col-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Tablet (720px max-width) */
@media (min-width: 481px) and (max-width: 767px) {
    .sm-container {
        max-width: 720px;
    }
    
    .sm-col-1, .sm-col-2, .sm-col-3, .sm-col-4,
    .sm-col-5, .sm-col-6, .sm-col-7, .sm-col-8,
    .sm-col-9, .sm-col-10, .sm-col-11, .sm-col-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Mobile (≤480px) */
@media (max-width: 480px) {
    .sm-container {
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .sm-row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .sm-col-1, .sm-col-2, .sm-col-3, .sm-col-4,
    .sm-col-5, .sm-col-6, .sm-col-7, .sm-col-8,
    .sm-col-9, .sm-col-10, .sm-col-11, .sm-col-12 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Section wrapper (100% width) */
.sm-section {
    width: 100%;
    position: relative;
}

.sm-section-inner {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* Utility classes */
.sm-section-padding {
    padding-top: 60px;
    padding-bottom: 60px;
}

@media (max-width: 767px) {
    .sm-section-padding {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}