// Responsive 3-column grid
//
// The `.layout-3col` layout is a responsive grid layout that is:
// - 1 column at mobile sizes
// - 2 columns at tablet sizes
// - 3 columns at desktop sizes
//
// The `.layout-3col` class is used on the container div for the layout. A *grid
// item* in the container can be created using one of the following classes:
//
// - `.layout-3col__full` : 3-column wide grid item; starts a new row
// - `.layout-3col__left-content` : 2-column wide grid item, spanning columns 1
//   and 2; starts a new row
// - `.layout-3col__right-content` : 2-column wide grid item, spanning columns 2
//   and 3; starts a new row
// - `.layout-3col__left-sidebar` : 1-column wide grid item spanning column 1;
//   starts a new row on tablet screens
// - `.layout-3col__first-left-sidebar` : 1-column wide grid item spanning column 1;
//   spans column 1 and starts a new row on tablet screens only
// - `.layout-3col__second-left-sidebar` : 1-column wide grid item spanning column 1;
//   spans column 2 on tablet screens only
// - `.layout-3col__right-sidebar` : 1-column wide grid item spanning column 3;
//   starts a new row on tablet screens
// - `.layout-3col__col-1` : 1-column wide grid item spanning column 1; starts a
//   new row
// - `.layout-3col__col-2` : 1-column wide grid item spanning column 2
// - `.layout-3col__col-3` : 1-column wide grid item spanning column 3; starts a
//   new row on tablet screens
// - `.layout-3col__col-4` : At tablet sizes, the `__col-x` grid items will form
//   an irregular layout of 2 items in the first row and 1 item in the second
//   row. The `__col-4` is a "hidden" item that does not appear on the
//   large-screen 3-column grid, but is a 1-column wide grid item spanning
//   column 2 on tablet screens.
// - `.layout-3col__col-x` : 1-column wide grid item spanning column 1; when
//   several of these are used inside a `.layout-3col__grid-item-container` or
//   `.layout-3col`, the first one is positioned like `__col-1`, the
//   second like `__col-2`, etc.
//
// There are 2 ways to do a nested grid:
// 1. Place a grid container div inside a grid item. Just apply the normal
//    classes to the nested grid container and its grid items.
// 2. The grid item's div is also the grid container for the nested grid. In
//    this case, the `.layout3-col__grid-item-container` class should be added
//    to the div to ensure its nested grid items align with the parent grid.
//
// Markup: layout-3col.twig
//
// Style guide: layouts.layout-3col

.layout-3col,
%layout-3col {
  // We set the context to flow, so that this container can be used in most
  // places in the HTML, i.e. it must be nested inside something that has
  // padding.
  @include zen-grid-container($context: flow);

  &__full,
  &__left-content,
  &__right-content,
  &__left-sidebar,
  &__right-sidebar,
  &__first-left-sidebar,
  &__second-left-sidebar,
  &__col-1,
  &__col-2,
  &__col-3,
  &__col-4,
  &__col-x {
    @include zen-new-row(both);
    @include zen-grid-item-base();
    @include zen-grid-item(1, 1);
  }

  @include zen-respond-to(m) {
    // Since our container's context is "flow" and we changed the gutter size,
    // we need to re-apply the container's negative left/right margins.
    @include zen-grid-container($context: flow);

    &__full,
    &__left-content,
    &__right-content,
    &__left-sidebar,
    &__right-sidebar {
      @include zen-grid-item(2, 1);
      // Since we changed the gutter size for this media query, we need to
      // re-apply the padding to every grid item.
      @include zen-apply-gutter-padding();
    }

    &__first-left-sidebar,
    &__col-1,
    &__col-3,
    &__col-x:nth-child(2n + 1) {
      @include zen-grid-item(1, 1);
      @include zen-apply-gutter-padding();
    }

    &__second-left-sidebar,
    &__col-2,
    &__col-4,
    &__col-x:nth-child(2n) {
      // Since this inherits from the mobile layout, we have to explicitly turn
      // off the new-row mixin.
      @include zen-new-row(none);
      @include zen-grid-item(1, 2);
      @include zen-apply-gutter-padding();
    }
  }

  @include zen-respond-to(xl) {
    &__full {
      @include zen-grid-item(3, 1);
    }

    &__left-content {
      @include zen-grid-item(2, 1);
    }

    &__right-content {
      @include zen-grid-item(2, 2);
    }

    &__left-sidebar,
    &__first-left-sidebar,
    &__second-left-sidebar {
      @include zen-new-row(right);
      @include zen-grid-item(1, 3, right);
    }

    &__right-sidebar {
      @include zen-new-row(right);
      @include zen-grid-item(1, 1, right);
    }

    &__col-1,
    &__col-x:nth-child(3n+1) {
      @include zen-new-row(both);
      @include zen-grid-item(1, 1);
    }

    &__col-2,
    &__col-x:nth-child(3n+2) {
      @include zen-new-row(none);
      @include zen-grid-item(1, 2);
    }

    &__col-3,
    &__col-x:nth-child(3n) {
      @include zen-new-row(none);
      @include zen-grid-item(1, 3);
    }

    &__col-4 {
      display: none;
    }
  }

  // Place last so it can override the padding of grid items.
  &__grid-item-container {
    @include zen-grid-container($context: grid-item);
  }
}