/*------------------------------------*\
  Components > Post Card
\*------------------------------------*/

.c-post-card {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  margin-bottom: double($base-spacing-unit) + half($base-spacing-unit);

  &-wrap {
    display: flex;
  }

  &__media {
    overflow: hidden;
    background-color: $bg-gray;
  }

  &__image {
    display: block;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: $global-border-radius;
    transition: all $global-transition ease-in-out;

    &.js-fadein {
      opacity: 0;
    }

    &.is-inview {
      opacity: 1;
    }

    &:before {
      transition: $global-transition;
      position: absolute;
      top: 0;
      height: 100%;
      width: 100%;
      content: '';
      background-color: $color-black;
      opacity: 0;
    }

    &:after {
      display: block;
      content: '';
      width: 100%;
      padding-bottom: 75%;
    }
  }

  &__content {
    flex-grow: 1;
  }

  &__content--raw {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: double($base-spacing-unit);
    background-color: $bg-gray;
  }

  &__tags {
    float: left;
    padding-left: half($base-spacing-unit);
    margin-top: $base-spacing-unit;
    margin-bottom: half($base-spacing-unit) + quarter($base-spacing-unit);
    border-left: 2px solid $color-brand;
    line-height: 1;
    font-size: $font-size-tiny;
    text-transform: uppercase;
    letter-spacing: $global-letter-spacing;

    .rtl & {
      letter-spacing: unset;
    }

    a {
      text-transform: uppercase;
      color: $color-brand;
      margin-right: quarter($base-spacing-unit);
      margin-left: quarter($base-spacing-unit);

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

      @include attention() {
        text-decoration: underline;
      }
    }
  }

  &__share-icon {
    width: 20px;
    height: 20px;
    vertical-align: top;
  }

  &__title-link {
    border-bottom: 1px solid transparent;
    transition: border-bottom $global-transition ease-in-out;
  }

  &__title {
    clear: both;
    margin-bottom: $base-spacing-unit - half(quarter($base-spacing-unit));
    font-size: $font-size-base;
    font-weight: $font-weight-bold;
    word-break: break-word;
    transition: $global-transition;
  }

  &__meta {
    line-height: 1;
    font-size: $font-size-tiny;
    color: $color-gray;
    text-transform: uppercase;
    letter-spacing: $global-letter-spacing;

    .rtl & {
      letter-spacing: unset;
    }
  }

  &__author {
    display: inline-block;

    a {
      color: $color-gray;

      @include attention() {
        color: $color-text;
      }
    }

    &:before {
      content: '/';
      display: inline-block;
      padding-left: quarter($base-spacing-unit);
      margin-right: half($base-spacing-unit);
    }
  }

  &--featured {
    &__icon {
      display: none;
      position: absolute;
      bottom: $base-spacing-unit;
      left: $base-spacing-unit;
      fill: $color-white;
      background-color: rgba($color-black, .05);

      .sticky & { display: block; }
    }
  }

  @include attention() {
    .c-post-card__image {
      transform: scale(1.01);
    }

    .c-post-card__image:before {
      opacity: .1;
    }

    .c-post-card__title-link {
      color: $color-text;
      border-bottom: 1px solid $color-text;
    }
  }
}

// Home Page Second Post Card

.c-post-card--half {
  @include mq($from: desktop) {
    .c-post-card__image:after {
      padding-bottom: 118%;
    }
  }
}

// Home Page First Wide Post Card

.c-post-card--first {
  @include mq($from: desktop) {
    .c-post-card__image:after {
      padding-bottom: 56.25%;
    }
  }
}