/**
 * Grid System
 * Based on Renault Digital Standard Guide - Page 25
 * Bootstrap 3.4 compatible with Renault specifications
 */

/* ============================================
   DESKTOP GRID - No Bleed < 1440px
   ============================================ */

@media (min-width: 1440px) {
    .container {
        max-width: 1216px;
        padding-left: 112px;
        padding-right: 112px;
    }
    
    .row {
        margin-left: -16px; /* Half of gutter */
        margin-right: -16px; /* Half of gutter */
    }
    
    [class*="col-"] {
        padding-left: 16px; /* Half of gutter */
        padding-right: 16px; /* Half of gutter */
    }
    
    /* Column widths based on 12-column grid, 72px columns, 32px gutters */
    .col-xs-1 { width: calc((1216px / 12) * 1 - 32px); }
    .col-xs-2 { width: calc((1216px / 12) * 2 - 32px); }
    .col-xs-3 { width: calc((1216px / 12) * 3 - 32px); }
    .col-xs-4 { width: calc((1216px / 12) * 4 - 32px); }
    .col-xs-5 { width: calc((1216px / 12) * 5 - 32px); }
    .col-xs-6 { width: calc((1216px / 12) * 6 - 32px); }
    .col-xs-7 { width: calc((1216px / 12) * 7 - 32px); }
    .col-xs-8 { width: calc((1216px / 12) * 8 - 32px); }
    .col-xs-9 { width: calc((1216px / 12) * 9 - 32px); }
    .col-xs-10 { width: calc((1216px / 12) * 10 - 32px); }
    .col-xs-11 { width: calc((1216px / 12) * 11 - 32px); }
    .col-xs-12 { width: calc(1216px - 32px); }
}

/* ============================================
   TABLET GRID - No Bleed < 800px
   ============================================ */

@media (min-width: 800px) and (max-width: 1439px) {
    .container {
        max-width: 736px;
        padding-left: 32px;
        padding-right: 32px;
    }
    
    .row {
        margin-left: -16px; /* Half of gutter */
        margin-right: -16px; /* Half of gutter */
    }
    
    [class*="col-"] {
        padding-left: 16px; /* Half of gutter */
        padding-right: 16px; /* Half of gutter */
    }
    
    /* Column widths based on 8-column grid, 64px columns, 32px gutters */
    .col-sm-1 { width: calc((736px / 8) * 1 - 32px); }
    .col-sm-2 { width: calc((736px / 8) * 2 - 32px); }
    .col-sm-3 { width: calc((736px / 8) * 3 - 32px); }
    .col-sm-4 { width: calc((736px / 8) * 4 - 32px); }
    .col-sm-5 { width: calc((736px / 8) * 5 - 32px); }
    .col-sm-6 { width: calc((736px / 8) * 6 - 32px); }
    .col-sm-7 { width: calc((736px / 8) * 7 - 32px); }
    .col-sm-8 { width: calc(736px - 32px); }
}

/* ============================================
   MOBILE GRID - No Bleed < 343px
   ============================================ */

@media (max-width: 799px) {
    .container {
        max-width: 343px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .row {
        margin-left: -16px; /* Half of gutter */
        margin-right: -16px; /* Half of gutter */
    }
    
    [class*="col-"] {
        padding-left: 16px; /* Half of gutter */
        padding-right: 16px; /* Half of gutter */
    }
    
    /* Column widths based on 3-column grid, 93px columns, 32px gutters */
    .col-xs-1 { width: calc((343px / 3) * 1 - 32px); }
    .col-xs-2 { width: calc((343px / 3) * 2 - 32px); }
    .col-xs-3 { width: calc(343px - 32px); }
}

/* ============================================
   GRID SPECIFICATIONS SUMMARY
   ============================================

   Desktop (< 1440px):
   - Total width: 1216px
   - Offset: 112px (both sides)
   - Columns: 12
   - Gutter: 32px
   - Column width: 72px

   Tablet (< 800px):
   - Total width: 736px
   - Offset: 32px (both sides)
   - Columns: 8
   - Gutter: 32px
   - Column width: 64px

   Mobile (< 343px):
   - Total width: 343px
   - Offset: 16px (both sides)
   - Columns: 3
   - Gutter: 32px
   - Column width: 93px

*/