// Layout
// ==========================================================================

#wrapper {
  text-align: center;

  padding-bottom: $gutter;
  @include media(desktop) {
    padding-bottom: $gutter*3;
  }
}

// Use .outer-block to create a max width block of 1020px,
// Use .inner-block to create padding that matches the header and footer

// .outer-block,
#content {
  text-align: left;

  @include outer-block;
  @include contain-floats; // Repeated as %extend placeholder isn't supported
}

.inner-block {
  @include inner-block(margin);
}

// Ensure .inner-block doesn't inherit a margin here
// TODO: Change this in the govuk_template
#global-cookie-message .inner-block,
#global-header-bar .inner-block {
  margin: 0;
}


// ==========================================================================
// Phase banner
// ==========================================================================

.phase-banner-alpha  {
  @include phase-banner(alpha);
}
.phase-banner-beta  {
  @include phase-banner(beta);
}


// Grid layout
// ==========================================================================

// Usage:
// For two equal columns

// <div class="grid-wrapper">
//   <div class="grid grid-1-2">
//     <div class="inner-block">

//     </div>
//   </div>
//   <div class="grid grid-1-2">
//     <div class="inner-block">

//     </div>
//   </div>
// </div>

// Use .grid-wrapper to wrap and clear grid sections
.grid-wrapper {
  @include contain-floats;
  @include media(tablet){
    margin-left: 15px;
    margin-right: 15px;
  }
}

// Use .grid-divider to create borders dividing grid sections
.grid-divider {
  @include contain-floats;
  border-bottom: 1px solid $border-colour;
  margin-bottom: 20px;
  margin-left: 15px;
  margin-right: 15px;

  @include media(tablet){
    margin-left: 30px;
    margin-right: 30px;
  }
}

// 2. Grid units take 100% width, unless a .grid-width class is applied
.grid {
  float: left;
  width: 100%;
}

// Grid widths
.grid-1-4 {
  @include media(tablet) {
    width: 25%;
  }
}

.grid-1-3 {
  @include media(tablet) {
    width: 33.333333333%;
  }
}

.grid-1-2 {
  @include media(tablet) {
    width: 50%;
  }
}

.grid-2-3 {
  @include media(tablet) {
    width: 66.666666667%;
  }
}

.grid-3-4 {
  @include media(tablet) {
    width: 75%;
  }
}

// Grid 'inner-block' sets spacing between grid cells
.grid .inner-block {
  padding: 0;
  @include media(tablet) {
    margin: 0 $gutter-half;
  }
}


// Don't put .grid-wrapper inside .inner block
// There's no need for the extra containing div
// ** These styles are here in case you do, so we don't break the grid **

.inner-block {

  .grid-wrapper {
    padding: 0;

    margin-left: -15px;
    margin-right: -15px;
  }

  .grid-divider {
    margin-left: 0;
    margin-right: 0;
  }

}