
/**
 * Page content
 */

.page-content {
  flex: 1 0 auto;

  @include media-query(large) {
    > .page-content-wrapper {
      display: flex;
      align-items: stretch;

      & > .side-bar {
        flex-shrink: 0;
        flex-basis: 380px;
      }

      & > .main.sidebar {
        flex-basis: 100%;
        flex-shrink: 1;
        border-left: 1px solid rgba(var(--front), 0.1);
        min-height: 90vh;
        overflow: hidden;

        .edit-link {
          max-width: 800px;
          margin-left: auto;
          margin-right: auto;
        }
      }
    }
  }

}

.page-heading {
  max-width: 1000px;
  margin: $spacing-unit*2 0 $spacing-unit/2 0;
  @include relative-font-size(4);
  line-height:1em;
  font-weight:600;

  @include media-query(medium-down) {
     @include relative-font-size(3);
  }
}


.hero {
  background-image: url('/assets/images/home/hero.png');
  background-size: cover;
  background-position: center;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -10;
  margin-top: -82px;
  padding-top: 82px;
  @include media-query(small) {
    margin-top: -62px;
    padding-top: 62px;
  }
}


.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 3rem 3rem;

    @include media-query(small) {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      grid-gap: 1rem 1rem;
    }
}

.grid-item {
  display:block;
}


.grid.entry-points {
  .grid-item {
    background: #f7f7f7;
    padding: $spacing-unit;
    padding-top: calc(45% - (#{$spacing-unit} / 2));
    @include media-query(small) {
      padding: $spacing-unit / 3;
      padding-top: calc(45% - (#{$spacing-unit} / 3));
    }
  }
  h2 {
    margin: 0;
  }
  a:hover{
    text-decoration: none;
  }
}




.post-list-heading {
  @include relative-font-size(1.75);
}

.post-list {
  margin-left: 0;
  list-style: none;
  margin: $spacing-unit*4 0;

  > li {
    margin-bottom: $spacing-unit;
  }
}

.post-meta {
  font-size: $small-font-size;
  color: $brand-color;
}

.post-link {
  display: block;
  @include relative-font-size(1.5);
}

.edit-link {
  display: block;
  @include relative-font-size(0.8);

  @include media-query(medium-down) {
    margin-top: $spacing-unit/2;
    margin-left: $spacing-unit/2;
    margin-right: $spacing-unit/2;
  }

  @include media-query(large) {
    margin-top: $spacing-unit;
  }
}

/**
 * Posts
 */

.main {
  &.sidebar {
    @include media-query(small) {
      padding-bottom: $spacing-unit*2;
    }

    @include media-query(medium-up) {
      padding-bottom: $spacing-unit * 6;
    }
  }

  &:not(.sidebar) {
    @include media-query(small) {
      padding-bottom: $spacing-unit;
    }

    @include media-query(medium-up) {
      padding-bottom: $spacing-unit*3;
    }
  }

  &:not(.-no-top-padding) {
    @include media-query(small) {
      padding-top: $spacing-unit;
    }

    @include media-query(medium-up) {
      padding-top: $spacing-unit*4;
    }
  }
}

.post-title,
.post-content h1,
article.guide h1,
.post-content .h1,
article.guide .h1 {
  @include relative-font-size(2.625);
  letter-spacing: -1px;
  line-height: 1.15;

  @include media-query(large) {
    @include relative-font-size(2.625);
  }
}

.post-content,
article.guide {
  h1,
  .h1 {
    margin-top: $spacing-unit * 1;

    @include media-query(medium-up) {
      margin-top: $spacing-unit * 2;
    }
  }

  h2, h3, h4, h5, h6,
  .h2, .h3, .h4, .h5, .h6 {
    margin-top: 0;

    &::before {
      display: block;
      content: '';
      width: 0;
      visibility: hidden;
      position: relative;
      z-index: -1;
      pointer-events: none;
    }
  }

  h2, h3,
  .h2, .h3 {
    &::before {
      height: $spacing-unit * 3;
      margin-top: -$spacing-unit * 2;
    }

    @include media-query(medium-up) {
      &::before {

      }
    }
  }

  h4, h5, h6,
  .h4, .h5, .h6 {
    &::before {
      height: $spacing-unit * 3;
      margin-top: -$spacing-unit * 2;
    }

    @include media-query(medium-up) {
      &::before {

      }
    }
  }

  h2, .h2 {
    @include relative-font-size(1.75);

    @include media-query(large) {
      @include relative-font-size(2);
    }
  }

  h3, .h3 {
    @include relative-font-size(1.375);

    @include media-query(large) {
      @include relative-font-size(1.625);
    }
  }

  h4, .h4 {
    @include relative-font-size(1.25);
  }

  h5, .h5 {
    @include relative-font-size(1.125);
  }

  h6, .h6 {
    @include relative-font-size(1.0625);
  }
}

/**
 * Pagination navbar
 */
.pagination {
  margin-bottom: $spacing-unit;
  display: table;
  margin: 0 auto;

  li {
    float: left;
    margin: 5px 10px 5px 0;

    &:last-of-type {
      margin-right: 0
    }

    a {
      display: block;
      padding: $spacing-unit / 4;
      border: 1px solid $border-color-01;
      &:hover { border-color: $border-color-02 }
    }
  }

  li {
    a, div {
      min-width: 41px;
      text-align: center;
      box-sizing: border-box;
    }

    div {
      display: block;
      padding: $spacing-unit / 4;
      border: 1px solid transparent;

      &.pager-edge {
        color: $border-color-01;
        border: 1px dashed;
      }
    }
  }
}



/**
 * Grid helpers
 */
@include media-query(large) {
  .one-half {
    width: calc(50% - (#{$spacing-unit} / 2));
  }
}
