// ====================================================
// ROLE PAGES
//

.role-index {
  header.page-header {
    h1 {
      @include bold-48;
    }
  }

  .article-container {
    margin: 0 1em;
    @include media(desktop) {
      margin: 0 2em;
    }
  }

  // Primary links
  .primary-links {
    @include grid(3);
    margin-bottom: 2em;

    div{
      @include box-sizing(border-box);
    }

    .link-list {
      @include media(tablet) {
        width: 50%;
      }

      @include media(desktop) {
        width: (100%/3);
      }

      li {
        a {
          display: inline;
          width: auto;
        }
      }

      @include media(desktop) {
        // Run lists over two columns
        &.wide {
          width: 66.5%;
          li {
            display: inline-block;
            width: 48.3%;

            &:nth-child(odd){
              margin-right: 1em;
            }
          }
        }
      }
    }
  }

  h3 {
    @include bold-24;
    border-top: 3px solid $main-colour;

    padding-top: 0.5em;
    margin-top: 1em;

    @include media(desktop) {
      @include core-19;
      border: none;
    }
  }

  .link-list {
    border-bottom: 0;

    // Big blocky version for hero promo
    &.hero{
      padding: 0;
      border-top: 0 solid;
      a{
        padding: 1em;
        display: block;
        background-color: $main-colour;
        text-decoration: none;
        > *{
          margin-top: 0;
        }
        h3, p{
          color: white;
          padding-top: 0;
        }
        p{
          @include core-19;
          text-decoration: underline;
          margin-bottom: 0;
        }
        &:hover{
          background-color: darken($main-colour, 10%);
          -webkit-transition: background-color .25s linear;
          transition: background-color .25s linear;
        }
        &:link,
        &:visited{
          -webkit-transition: background-color .1s linear;
          transition: background-color .1s linear;
        }
      }
      h3{
        @include bold-48;
        margin-bottom: 0.5em;
        border: 0;
      }
    }
  }

  .more-guides {
    margin-bottom: 2em;
  }

  .role-links {
    margin-bottom: 2em;

    @include media(tablet) {
      
    }
  }

  .all-guides {
    @include core-19;
    margin-bottom: 2em;
  }
}