// ==========================================================================
// Base – Mobile-First Minimal Grid
// ==========================================================================

// Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/
.clear:before, .clear:after { content: " "; display: table; } .clear:after { clear: both; }
.row:before, .row:after { content: ""; display: table; } .row:after { clear: both; }

.row {
  position: relative;
  margin-left: -15px;
  margin-right: -15px;
}

// Mobile Container
.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
.container-full {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}
// Tablet Container
@media only screen and (min-width: @tablet-breakpoint) {
  .container, .container-full {
    width: @tablet-container;
  }
  .tablet-container {
    width: @tablet-container;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  .tablet-container-full {
    width: @tablet-container;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}
// Desktop Container
@media only screen and (min-width: @desktop-breakpoint) {
  .container, .container-full {
    width: @desktop-container;
  }
  .desktop-container {
    width: @desktop-container;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  .desktop-container-full {
    width: @desktop-container;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}
// HD Container
@media only screen and (min-width: @hd-breakpoint) {
  .container, .container-full {
    width: @hd-container;
  }
  .hd-container {
    width: @hd-container;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  .hd-container-full {
    width: @hd-container;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

// Mobile-first Grid Columns - Global Rules
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-1-4, .col-1-3, .col-1-2 {
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  float: left;
}

// Grid
.generate-grid (12);
.generate-grid (@index) when (@index > 0) {
  .generate-grid (@index - 1);
  .col-@{index} {
    width: @index / 12 * 100%;
  }
}
.col-1-4 { width: 3 / 12 * 100%; }
.col-1-3 { width: 4 / 12 * 100%; }
.col-1-2 { width: 6 / 12 * 100%; }

// Mobile Helpers
.hide-mobile { display: none; }
.show-mobile { display: block; }
.show-mobile-inline-block { display: inline-block; }
.show-mobile-inline { display: inline; }

// Tablet Grid
@media only screen and (min-width: @tablet-breakpoint) {

  // Tablet Helpers
  .hide-tablet { display: none; }
  .show-tablet { display: block; }
  .show-tablet-inline-block { display: inline-block; }
  .show-tablet-inline { display: inline; }
  .tablet-no-padding { padding: 0; }
}

// Desktop Grid
@media only screen and (min-width: @desktop-breakpoint) {
  
  // Desktop Helpers
  .hide-desktop { display: none; }
  .show-desktop { display: block; }
  .show-desktop-inline-block { display: inline-block; }
  .show-desktop-inline { display: inline; }
  .desktop-no-padding { padding: 0; }
}

// HD Grid
@media only screen and (min-width: @hd-breakpoint) {

  // HD Helpers
  .hide-hd { display: none; }
  .show-hd { display: block; }
  .show-hd-inline-block { display: inline-block; }
  .show-hd-inline { display: inline; }
  .hd-no-padding { padding: 0; }
}