/*
  Full-width background sections with color or background images
  These are intented for large full-width sections with a single background-color. Includes vertical padding.

  .page-block                  - default with vertical padding
  .page-block--white           - with white background
  .page-block--lowlight        - dark section, headings are white if class="lowlight__heading" added
  .page-block--light           - light grey section
  .page-block--image           - block with large bg image applied, shared image styles included. block-specific image to be included separately
  .page-block--border-top      - adds light grey 1px border to top

  Styleguide Page Blocks.
*/
.page-block {
  @include marketing-bg-colors;
  @include marketing-borders;
  padding: em($gutter * 3) 0;
  border-color: $color-grey-border-on--white;

  @include shopify-breakpoint($mobile) {
    padding: em($gutter * 2) 0;
  }
}

/*================ Slate BG Color ================*/
.page-block--lowlight {

  .section-heading {
    > h1,
    > h2 {
      color: $color-white;
    }
  }

  //this needs to be in here for cases of page-block--lowlight also inside a segment bg
  .lowlight__heading {
    > p:before {
      background-color: $color-grey-heading;
    }
  }
}

/*================ Sand BG page block ================*/
.page-block--sand {
  // For better contrast
  .section-heading__subhead {
    color: $color-grey-body;
  }
}

/*================ Blocks with BG images ================*/
.page-block--image {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

  > .page-width {
    height: 100%;
    z-index: 1;
  }
}