/* ============================================================
   Bootstrap 3 Grid — scoped to .csf-bs-grid
   Only the grid system, nothing else. Safe to use alongside
   any theme without affecting global styles.
   ============================================================ */

.csf-bs-grid *,
.csf-bs-grid *::before,
.csf-bs-grid *::after {
    box-sizing: border-box;
}

.csf-bs-grid .container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 768px) {
    .csf-bs-grid .container { width: 750px; }
}
@media (min-width: 992px) {
    .csf-bs-grid .container { width: 970px; }
}
@media (min-width: 1200px) {
    .csf-bs-grid .container { width: 1170px; }
}
@media (min-width: 1280px) and (max-width: 1500px) {
    .csf-bs-grid .container { width: 1050px; }
}
@media (min-width: 1024px) and (max-width: 1250px) {
    .csf-bs-grid .container { width: 900px; }
}

.csf-bs-grid .row {
    margin-left: -15px;
    margin-right: -15px;
}
.csf-bs-grid .row::before,
.csf-bs-grid .row::after {
    display: table;
    content: " ";
}
.csf-bs-grid .row::after {
    clear: both;
}

/* Base column styles */
.csf-bs-grid .col-xs-1,  .csf-bs-grid .col-xs-2,  .csf-bs-grid .col-xs-3,
.csf-bs-grid .col-xs-4,  .csf-bs-grid .col-xs-5,  .csf-bs-grid .col-xs-6,
.csf-bs-grid .col-xs-7,  .csf-bs-grid .col-xs-8,  .csf-bs-grid .col-xs-9,
.csf-bs-grid .col-xs-10, .csf-bs-grid .col-xs-11, .csf-bs-grid .col-xs-12,
.csf-bs-grid .col-sm-1,  .csf-bs-grid .col-sm-2,  .csf-bs-grid .col-sm-3,
.csf-bs-grid .col-sm-4,  .csf-bs-grid .col-sm-5,  .csf-bs-grid .col-sm-6,
.csf-bs-grid .col-sm-7,  .csf-bs-grid .col-sm-8,  .csf-bs-grid .col-sm-9,
.csf-bs-grid .col-sm-10, .csf-bs-grid .col-sm-11, .csf-bs-grid .col-sm-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

/* xs columns (always float) */
.csf-bs-grid .col-xs-1  { float: left; width: 8.33333333%; }
.csf-bs-grid .col-xs-2  { float: left; width: 16.66666667%; }
.csf-bs-grid .col-xs-3  { float: left; width: 25%; }
.csf-bs-grid .col-xs-4  { float: left; width: 33.33333333%; }
.csf-bs-grid .col-xs-5  { float: left; width: 41.66666667%; }
.csf-bs-grid .col-xs-6  { float: left; width: 50%; }
.csf-bs-grid .col-xs-7  { float: left; width: 58.33333333%; }
.csf-bs-grid .col-xs-8  { float: left; width: 66.66666667%; }
.csf-bs-grid .col-xs-9  { float: left; width: 75%; }
.csf-bs-grid .col-xs-10 { float: left; width: 83.33333333%; }
.csf-bs-grid .col-xs-11 { float: left; width: 91.66666667%; }
.csf-bs-grid .col-xs-12 { float: left; width: 100%; }

/* sm columns (768px+) */
@media (min-width: 768px) {
    .csf-bs-grid .col-sm-1  { float: left; width: 8.33333333%; }
    .csf-bs-grid .col-sm-2  { float: left; width: 16.66666667%; }
    .csf-bs-grid .col-sm-3  { float: left; width: 25%; }
    .csf-bs-grid .col-sm-4  { float: left; width: 33.33333333%; }
    .csf-bs-grid .col-sm-5  { float: left; width: 41.66666667%; }
    .csf-bs-grid .col-sm-6  { float: left; width: 50%; }
    .csf-bs-grid .col-sm-7  { float: left; width: 58.33333333%; }
    .csf-bs-grid .col-sm-8  { float: left; width: 66.66666667%; }
    .csf-bs-grid .col-sm-9  { float: left; width: 75%; }
    .csf-bs-grid .col-sm-10 { float: left; width: 83.33333333%; }
    .csf-bs-grid .col-sm-11 { float: left; width: 91.66666667%; }
    .csf-bs-grid .col-sm-12 { float: left; width: 100%; }

    /* sm push (for reverse layout) */
    .csf-bs-grid .col-sm-push-1  { left: 8.33333333%; }
    .csf-bs-grid .col-sm-push-2  { left: 16.66666667%; }
    .csf-bs-grid .col-sm-push-3  { left: 25%; }
    .csf-bs-grid .col-sm-push-4  { left: 33.33333333%; }
    .csf-bs-grid .col-sm-push-5  { left: 41.66666667%; }
    .csf-bs-grid .col-sm-push-6  { left: 50%; }
    .csf-bs-grid .col-sm-push-7  { left: 58.33333333%; }
    .csf-bs-grid .col-sm-push-8  { left: 66.66666667%; }
    .csf-bs-grid .col-sm-push-9  { left: 75%; }
    .csf-bs-grid .col-sm-push-10 { left: 83.33333333%; }
    .csf-bs-grid .col-sm-push-11 { left: 91.66666667%; }
    .csf-bs-grid .col-sm-push-0  { left: auto; }

    /* sm pull (for reverse layout) */
    .csf-bs-grid .col-sm-pull-1  { right: 8.33333333%; }
    .csf-bs-grid .col-sm-pull-2  { right: 16.66666667%; }
    .csf-bs-grid .col-sm-pull-3  { right: 25%; }
    .csf-bs-grid .col-sm-pull-4  { right: 33.33333333%; }
    .csf-bs-grid .col-sm-pull-5  { right: 41.66666667%; }
    .csf-bs-grid .col-sm-pull-6  { right: 50%; }
    .csf-bs-grid .col-sm-pull-7  { right: 58.33333333%; }
    .csf-bs-grid .col-sm-pull-8  { right: 66.66666667%; }
    .csf-bs-grid .col-sm-pull-9  { right: 75%; }
    .csf-bs-grid .col-sm-pull-10 { right: 83.33333333%; }
    .csf-bs-grid .col-sm-pull-11 { right: 91.66666667%; }
    .csf-bs-grid .col-sm-pull-0  { right: auto; }

    /* sm offset */
    .csf-bs-grid .col-sm-offset-1  { margin-left: 8.33333333%; }
    .csf-bs-grid .col-sm-offset-2  { margin-left: 16.66666667%; }
    .csf-bs-grid .col-sm-offset-3  { margin-left: 25%; }
    .csf-bs-grid .col-sm-offset-4  { margin-left: 33.33333333%; }
    .csf-bs-grid .col-sm-offset-5  { margin-left: 41.66666667%; }
    .csf-bs-grid .col-sm-offset-6  { margin-left: 50%; }
    .csf-bs-grid .col-sm-offset-0  { margin-left: 0%; }
}