@import "../page-layout-base";
//
// Four Regions 12--3-9--12-CP
//
// Double split row type layout. This layout splits 4 regions over 3 rows.
// The major difference of the CP version of this layout is the position
// of the second and third regions is reversed, with the third region pulled
// accross to the left to make a "left sidebar", while the second region is 9
// grid cols wide and more of a "main content" type region.
//
// In narrow screens the third region will be below the second, not above, thus
// the second region is the one we want to "prioritise".
//
//
// Appearance:
//
//   -------------------------------------
//  | First (12)                          |
//  |-------------------------------------|
//  | third (3) | Second (9)              |
//  |-------------------------------------|
//  | Fourth (12)                         |
//   -------------------------------------
//  Key: region (grid columns)
//
// ---------------------------------------------------------------------------

.fourcol-source-ordered-12--3-9--12 {

  // Two active regions.
  .hr--2-3 {
    .l-r {
      &:first-child {
        width: span(9 of 12);
        order: 2;
      }

      &:last-child {
        width: span(3 of 12);
        order: 1;
      }
    }
  }

  // No layout required if only these are active, because the first
  // and last regions span 12 columns and that must be reliable
  // for sites with wide content relying on that width being available.
  .hr--1-2,
  .hr--1-3,
  .hr--1-4,
  .hr--2-4,
  .hr--3-4 {
    .l-r {}
  }

  // Three active regions.
  .hr--1-2-3 {
    .l-r {
      &:first-child {
        order: 1;
      }

      &:nth-child(2) {
        width: span(9 of 12);
        order: 3;
      }

      &:last-child {
        width: span(3 of 12);
        order: 2;
      }
    }
  }

  .hr--2-3-4 {
    .l-r {
      &:first-child {
        width: span(9 of 12);
      }

      &:nth-child(2) {
        width: span(3 of 12);
      }
    }
  }

  // Four active regions.
  .arc--4 {
    .l-r {
      &:first-child {
        order: 1;
      }

      &:nth-child(2) {
        width: span(9 of 12);
        order: 3;
      }

      &:nth-child(3) {
        width: span(3 of 12);
        order: 2;
      }

      &:last-child {
        order: 4;
      }
    }
  }
}