/*

##############################
### MOLECULE: format-cards ###
##############################

*/

@import '_extends.scss';
@import '_functions.scss';
@import '_mixins.scss';
@import '_variables.scss';

@import 'components/atoms/_color.scss';
@import 'components/atoms/_text.scss';

.#{utility('format-cards')} {
  grid-column: 3 / 23;
}

.#{organism('format-cards')} {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: stretch;
  margin-top: 20px;

  @media (min-width: 600px) {
    grid-column-gap: 30px;
  }

  &-card {
    $format-card: &;
    position: relative;
    grid-column: span 12;
    margin: 25px 0 0;
    border-radius: 10px;
    background-color: color('white');
    box-shadow: 0 15px 30px 0 rgba(0,0,0,.15);
    transition: transform 0.3s cubic-bezier(.25,.1,.25,1), box-shadow 0.3s cubic-bezier(.25,.1,.25,1);
    @media (min-width: 600px) {
      grid-column: span 6;
    }
    @media (min-width: 1024px) {
      grid-column: span 3;
    }

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 25px 60px 0 rgba(0,0,0,.1);
    }

    &-body {
      height: calc(100% - 47px);
      min-height: 145px;
      padding: 25px;
    }

    &-icon {
      position: absolute;
      left: 23px;
      top: 23px;
      height: 35px;
      width: 35px;
    }

    &-headline {
      @include txt-font-accent;
      margin: 6px auto 20px 45px;
    }

    &-link {
      height: 47px;
      padding: 10px;
      background-color: color('white');
      border-radius: 0 0 9px 9px;

      svg {
        fill: color('blue-ribbon');
      }

      &.#{molecule('lnk')}:hover {
        .#{molecule('lnk')}-icon,
        .#{molecule('lnk')}-text {
          transform: none;
        }
      }
    }

    &-ads,
    &-websites {
      #{$format-card}-copy,
      #{$format-card}-headline {
        color: color('white');
      }
      #{$format-card}-icon {
        fill: color('white');
      }
    }

    &-email,
    &-stories {
      #{$format-card}-copy,
      #{$format-card}-headline {
        @include color-stories;
      }

      #{$format-card}-icon {
        @include fill-stories;
      }
    }

    &-websites {
      @include gradient-websites;
    }

    &-stories {
      @include gradient-stories;
    }

    &-ads {
      @include gradient-ads;
    }

    &-email {
      @include gradient-e-mails;
    }
  }
}
