/* ==========================================================================
   Card extends and mixins
   ========================================================================== */
// @import "modules/author-meta";

/* ==========================================================================
   Card
   ========================================================================== */

$card-border-color: $light-gray;

.card {
  background-color: $white;
  border: 1px solid $card-border-color;
  margin-bottom: $global-margin;
  font-family: $body-font-family;
  transition: transform 0.5s ease-out, box-shadow 0.5s ease-out;
  @extend %fadeInUp;

  > a {
    @include grid-row();
    color: $black;
  }

  &--meta {
    &-below {
      .card__meta {
        border-top: 1px solid $card-border-color;
      }
    }

    &-above {
      .card__meta {
        border-bottom: 1px solid $card-border-color;
      }
    }
  }

  &__image {
    display: inline-block;
    overflow: hidden;

    @include breakpoint (large) {
      background: map-deep-get($foundation-palette, secondary);
      background: -moz-linear-gradient(45deg, map-deep-get($foundation-palette, secondary) 0%, map-deep-get($foundation-palette, tertiary) 100%);
      background: -webkit-linear-gradient(45deg, map-deep-get($foundation-palette, secondary) 0%,map-deep-get($foundation-palette, tertiary) 100%);
      background: linear-gradient(45deg, map-deep-get($foundation-palette, secondary) 0%,map-deep-get($foundation-palette, tertiary) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='map-deep-get($foundation-palette, secondary)', endColorstr='map-deep-get($foundation-palette, tertiary)',GradientType=1 );
    }

    img {
      margin-bottom: 0;
      border-radius: 0;
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
  }

  &__body {
    @include grid-column(12);
    padding: $global-padding;
  }

  &__headline {
    > * {
      font-family: $body-font-family;
      font-weight: bold;
    }
  }

  &--image-right {
    .card {
      &__body {
        @include grid-column(12);
        @include breakpoint (medium) {
          @include grid-column(8);
        }
      }
      &__image {
        @include grid-column(12);
        @include breakpoint (medium) {
          @include grid-column(4);
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
      }
    }
  }

  &:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 15px 0 rgba(0,0,0,0.25);

    .card__image {
      img {
        opacity: 0.8;
        transform: scale(1.1);
      }
    }
  }
}