@import "../../../sass/webpack_deps";

.articles {
  margin: 0 auto $gutter;
}

.articles__heading {
  @include h1();
}

.articles__title {
  &::after {
    @media (min-width: $min-720) {
      margin-bottom: 3.4rem;
    }

    @media (min-width: $min-1024) {
      margin-bottom: 10rem;
    }
  }
}

.articles__list {
  margin-left: auto;
  margin-right: auto;
  max-width: 85rem;
}

.article {
  @include clearfix;

  &:not(:first-child) {
    @include divider(top);
    margin-top: 4.8rem;
    padding-top: 4.2rem;

    @media (min-width: $min-1024) {
      margin-top: 6rem;
      padding-top: 6.2rem;
    }
  }
}

.article__imagery {
  display: none;

  @media (min-width: $min-720) {
    display: inline-block;
    float: right;
    height: 27.1rem;
    vertical-align: top;
    width: 18.9rem;
  }
}

.article__imagery__image {
  @media (min-width: $min-720) {
    background-position: center center;
    background-size: cover;
    height: 100%;
    width: 100%;
  }
}

.article__info {
  @media (min-width: $min-720) {
    display: inline-block;
    float: left;
    padding-right: 4rem;
    vertical-align: top;
    width: calc(98% - 189px);
  }
}

.article__info__link {
  display: block;
}

.article__info__title {
  color: $titlegray;
  font-family: $benton-sans;
  font-size: 1.9rem;
  font-weight: $font-weight-semibold;
  letter-spacing: -.2px;
  line-height: (27 / 19);

  @media (min-width: $min-720) {
    font-size: 2.8rem;
    line-height: (40 / 28);
    margin-top: -.8rem;
  }
}

.article__info__teaser {
  color: $color-text;
  font-family: $benton-sans;
  font-size: 1.6rem;
  font-weight: $font-weight-medium;
  letter-spacing: .01rem;
  line-height: (24 / 16);
  margin-top: 1.9rem;

  @media (min-width: $min-720) {
    font-size: 2rem;
    line-height: (30 / 20);
    margin-top: 2.4rem;
  }

  &--small {
    color: $articles-blurb-color;

    @media (min-width: $min-720) {
      font-size: 1.8rem;
      line-height: (28 / 18);
    }
  }
}

.article__info__blurb {
  color: $articles-blurb-color;
  font-family: $benton-sans;
  font-size: 1.4rem;
  font-weight: $font-weight-medium;
  letter-spacing: .01rem;
  line-height: (24 / 14);
  margin-top: .8rem;

  @media (min-width: $min-720) {
    font-size: 1.6rem;
    line-height: (26 / 16);
    margin-top: 1rem;
  }

  .article__info__title + & {
    margin-top: 2rem;

    @media (min-width: $min-720) {
      margin-top: 2.5rem;
    }
  }
}

.article__info__author {
  display: inline-block;
  margin-top: 2.4rem;

  @media (min-width: $min-720) {
    margin-top: 3rem;
  }
}

.article__info__author__image {
  @include author-image(9999999em, "horizontal"); // massive number here because we don't want it resizing ever
  margin-right: 1rem;
}

.article__info__author__creds {
  display: inline-block;
  margin-top: .6rem;
  vertical-align: middle;
}

.article__info__author__creds__name {
  @include author-name($min-320);
}

.article__info__author__creds__title {
  @include author-title($min-320);
}

.articles__button-container {
  text-align: center;

  .articles__list + & {
    margin-top: 4.8rem;

    @media (min-width: $min-1024) {
      margin-top: 6rem;
    }
  }
}

.articles__more {
  @include see-more();
}