/*------------------------------------*\
  $BLOCK
\*------------------------------------*/

$highlights-background-color: #f6f6f6;

.block {
  margin: {
    top: 40px; /* 1 */
    bottom: 40px; /* 1 */
  }
  padding: 50px 0;
  float: left;
  width: 100%;
  clear: both;


  /**
   * 1. If it's the last block in a sequence remove the margin-bottom completely.
   */
  &:last-child {
    margin: {
      bottom: 0; /* 1 */
    }
  }


  &__title {
    margin-bottom: 30px;
    font-size: font-size(22);
    color: $dark-grey;
  }


  /**
   * Container for the highlights switcher
   */
  &--highlights {
    margin: {
      bottom: 0;
    }
    background: {
      color: $highlights-background-color;
    }

    .highlights-slider__slide {
      margin-right: 10px;
      width: 100%;

      @include mq(mq600) {
        display: flex;
      }
    }
  }


  /**
   * Container for the latest news and tweets
   */
  &--updates {
    margin: {
      top: 0;
      bottom: 0;
    }
    padding-bottom: 0;

    @include mq(mq600) {
      padding: 30px 0;
    }

    /**
     * 1. Remove the margin bottom from the newsletter module when its appended
     *    on mobile
     */
    .widget--newsletter {
      margin: {
        top: 40px; /* 1 */
        bottom: 0; /* 1 */
      }
    }
  }
}


/**
 * Latest news
 */
.latest-news {
  @include mq(mq600) {
    @include span(8 of 12);
  }

  &__title {
    margin-bottom: 20px;
    font-size: font-size(18);
  }

  /**
   * Overide some .post defaults
   */
  .last {
    margin-right: 0;
  }
}


/**
 * Tweets
 */
.tweets {
  @include mq(mq600) {
    @include span(last 4 of 12);
  }

  &__title {
    position: relative;
    top: -3px;
    margin-bottom: 15px;
    font: {
      family: $body-font;
      weight: 300;
      size: font-size(15);
    }
    color: $mid-grey;

    svg {
      position: relative;
      margin-right: 10px;
      top: 2px;
      width: 19px;
      height: 18px;
      fill: $brand;
    }
  }

  ul {
    margin: 0;
  }

  li {
    list-style: none;
  }

  p {
    font-size: font-size(15);

    &:first-child {
      margin-bottom: 0;
    }

    &.timePosted {
      padding-top: 10px;
      color: $mid-grey;
    }

    &.timePosted a {
      color: $mid-grey;
      text-decoration: none;
    }

    span {
      &:first-child, &:nth-child(3n) {
        display: none;
      }
    }

  }
}