/*******************************************************************************
 * divine.layout.scss
 *
 * Styling of the "divine" layout demonstrating the golden rule and asymmetric
 * grids with Singularity.
 ******************************************************************************/
@import "compass";
@import "breakpoint";
@import "singularitygs";

// Set consistent vertical and horizontal spacing units.
$vert-spacing-unit: 20px;
$horz-spacing-unit: 1em;

// Set breakpoint values.
$tab  : 700px;
$desk : 1250px;

// Set Singularity grid variables.
$grids: 1;
$grids: add-grid(25 15 at $tab);
$grids: add-grid(25 15 9 at $desk);

$gutters: 1/3;

.l-page {
  width: 95%;
  max-width: 110em;
  margin: 0 auto;
}

.l-header,
.l-main {
  @include pie-clearfix;
  margin-bottom: $vert-spacing-unit;
}

@include breakpoint($tab) {
  /* Header Area */
  .l-branding {
    @include grid-span(1, 1);
  }
  .l-region--header {
    @include grid-span(1, 2);
  }
  .l-region--navigation {
    clear: both;
  }

  /* Content Area */
  .l-content {
    @include grid-span(2, 1);
  }

  /* Sidebars */
  .has-one-sidebar {
    .l-region--sidebar-first,
    .l-region--sidebar-second {
      @include grid-span(2, 1);
    }
  }
  .has-two-sidebars {
    .l-region--sidebar-first {
      @include isolation-span(1, 1, 'both');
    }
    .l-region--sidebar-second {
      @include grid-span(1, 2);
    }
  }
}

@include breakpoint($desk, true) {
  /* Header Area */
  .l-header {
    @include pie-clearfix;
  }
  .l-branding {
    @include grid-span(1, 1);
  }
  .l-region--header {
    @include grid-span(2, 2);
  }
  .l-region--navigation {
    clear: both;
  }

  /* Content Area */
  .l-content {
    @include grid-span(1, 1);
  }

  /* Sidebars */
  .has-one-sidebar {
    .l-region--sidebar-first,
    .l-region--sidebar-second {
      @include grid-span(2, 2);
    }
  }
  .has-two-sidebars {
    .l-region--sidebar-first {
      @include grid-span(1, 2);
    }
    .l-region--sidebar-second {
      @include grid-span(1, 3);
    }
  }
}
