/*
* Hover Cards
*
* Hover cards used to display important sections with
* additional information and allow for users to click
* on the entire card to initiate action.
*/

.card {
  background: $white;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
  box-sizing: border-box;
  float: left;
  height: 194px;
  margin-bottom: $unit * 3;
  min-width: 216px;
  padding-bottom: $unit * 6;
  position: relative;
  transition: box-shadow .5s;

  &:hover {
    border: 2px solid $blue-500;
    box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
    text-decoration: none;

    h2 {
      color: $blue-500;
      padding: (($unit * 2) - 2) (($unit * 2) - 2) 0 (($unit * 2) - 2);
    }

    p {
      color: $blue-grey-600;
      padding: 0 (($unit * 2) - 2);
    }

    footer {
      line-height: ($unit * 6) - 4;
      padding: 0 (($unit * 2) - 2);
    }
  }


  h2 {
    color: $blue-grey-500;
    font-size: 20px;
    font-weight: 400;
    line-height: $unit * 3;
    margin: 0 0 $unit 0;
    padding: ($unit * 2) ($unit * 2) 0 ($unit * 2);
    text-transform: none;
  }

  p {
    color: $blue-grey-400;
    font-size: 13px;
    line-height: $unit * 3;
    padding: 0px ($unit * 2);
    margin: 0;
  }

  footer {
    bottom: 0;
    border-top: 1px solid $blue-grey-50;
    box-sizing: border-box;
    line-height: $unit * 6;
    left: 0;
    padding: 0 ($unit * 2);
    position: absolute;
    right: 0;

    a {
      color: $blueberry;
      font-size: 13px;
    }
  }
}