/* ==============================================
   Grid
============================================== */

/**
 * Responsive grid system that allows for the creation of flexible, mobile-first grids.
 * Grids are notated primarily by the parent grid unit, leaving classes on the children
 * entirely optional. This encourages rapid development and smoother integration with
 * the Drupal and WordPress.
 *
 * List Grid:
 *
    <ul class="grid halves">
      <li>
        ...
      </li>
      <li>
        ...
      </li>
    </ul>
 *
 *
 * Explicit Grid:
 *
    <div class="grid thirds">
      <div class="grid__item">
        ...
      </div>
      <div class="grid__item">
        ...
      </div>
      <div class="grid__item">
        ...
      </div>
    </div>
 *
 */

.grid {
  @extend .cf;
  padding: 0;
  list-style: none;
}

/**
 * Grid children can either be explicit `.grid__item` or immediate
 * children of a list grid.
 */
.grid > li,
.grid__item {
  width: 100%;
  margin-bottom: $page-gutter;
}

/**
 * Reverse grids allow for different source order.
 */
.grid--reverse {
  @extend .grid;
}


/**
 * Tight grids will not contain smaller/no gutters.
 */
.grid--tight {
  @extend .grid;
  margin-left: -$grid-tight-spacing!important;
  
  > li,
  .grid__item {
    margin-bottom: $grid-tight-spacing!important;
    padding-left: $grid-tight-spacing!important;
    padding-right: 0!important;
  }
}


@mixin grid-setup($breakpoint: "") {

  @if $breakpoint != "" {
    $breakpoint: "--#{$breakpoint}";
  }

  /**
   * These are row starting grid items and they need to clear the previous grid
   * element to ensure each row clears the previous row.
   *
   * [1] - Remove borders that may be present in divided or column grids.
   */
  .halves#{$breakpoint} > li:nth-child(2n+1),
  .halves#{$breakpoint} .grid__item:nth-child(2n+1),
  .thirds#{$breakpoint} > li:nth-child(3n+1),
  .thirds#{$breakpoint} .grid__item:nth-child(3n+1),
  .fourths#{$breakpoint} > li:nth-child(4n+1),
  .fourths#{$breakpoint} .grid__item:nth-child(4n+1),
  .fifths#{$breakpoint} > li:nth-child(5n+1),
  .fifths#{$breakpoint} .grid__item:nth-child(5n+1),
  .sixths#{$breakpoint} > li:nth-child(6n+1),
  .sixths#{$breakpoint} .grid__item:nth-child(6n+1) {
    border-left: none;  /* [1] */
    clear: left;
  }


  /**
   * Whole
   * Use `!important` so these styles win regardless
   * of its containing grid.
   */
  .grid__item--whole#{$breakpoint} {
    width: 100%!important;
    border-left: none!important;
    clear: left!important;
  }

  /**
   * Halves
   */
  .halves#{$breakpoint} {
    > li,
    .grid__item {width: 50%;}
  }

  .thirds#{$breakpoint} {
    > li,
    .grid__item {width: 33.33%;}
    .grid__item--span-2 {width: 66.66%;}
  }

  .fourths#{$breakpoint} {
    > li,
    .grid__item {width: 25%;}
    .grid__item--span-2 {width: 50%;}
    .grid__item--span-3 {width: 75%;}
  }

  .fifths#{$breakpoint} {
    > li,
    .grid__item {width: 20%;}
    .grid__item--span-2 {width: 40%;}
    .grid__item--span-3 {width: 60%;}
    .grid__item--span-4 {width: 80%;}
  }

  .sixths#{$breakpoint} {
    > li,
    .grid__item {width: 16.66%;}
    .grid__item--span-2 {width: 33.32%;}
    .grid__item--span-3 {width: 49.98%;}
    .grid__item--span-4 {width: 66.64%;}
    .grid__item--span-5 {width: 83.3%;}
  }

}


/**
 * Mobile first grids, where grids do not exist below tablet size.
 */
@include breakpoint("tablet-up", true) {
  .grid, {
    margin: 0 0 0 (-$page-gutter/2);

    > li,
    .grid__item {
      padding-right: $page-gutter/2;
      padding-left: $page-gutter/2;
      margin-bottom: $page-gutter;
      float: left;
    }
  }

  .grid--reverse {
    margin: 0 (-$page-gutter) 0 0;
    
    > li,
    .grid__item {
      float: right;
      margin-bottom: $page-gutter;
    }
  }

  /**
   * Create the baseline grid.
   */
  @include grid-setup();
}

/**
 * Tablet only grid.
 */
@include breakpoint("tablet-only") {
  @include grid-setup("tablet");
}

/**
 * Desktop only grid.
 */
@include breakpoint("desktop-up", true) {
  @include grid-setup("desktop");
}

/**
 * Mobile only grid.
 * Useful for persisting grids down to mobile sizes
 * in a mobile-first stylesheet.
 */
@include breakpoint("mobile-only") {
  @include grid-setup("mobile");
}