//
// Category Tile
// -------------------------------------------------------------------

.category-tile {
  display: block;
  position: relative;
  width: 100%;
  margin: auto;
  border-radius: $border-radius-default;
  background: {
    position: center;
    size: cover;
    repeat: no-repeat;
  }
  text-decoration: none;
  overflow: hidden;

  // Overlay
  &::before {
    border-radius: $border-radius-default;
    @include overlay-block(2, $gray-darker, $category-tile-overlay-opacity);
    @include backface-visibility(hidden) ;
    @include transition(opacity .4s);
  }

  // Background image
  > .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: {
      position: center;
      size: cover;
      repeat: no-repeat;
    }
    z-index: 1;
    @include transform(translate3d(0, 0, 0));
    @include transform(scale(1));
    @include transition(all .6s);
  }

  // Title + text
  > .category-tile-info {
    position: relative;
    padding: $grid-vertical-step;
    padding-top: floor($grid-vertical-step * 1.2); // ~28px
    z-index: 5;
  }
  .category-tile-title {
    color: $light-color;
    font-size: $font-size-h2;
  }
  .category-tile-text {
    color: $light-color;
    font: {
      size: $font-size-sm;
      weight: normal;
    }
    opacity: 0;
    @include transform(translate3d(0, 12px, 0));
    @include transition(all .35s);
  }

  // :hover state
  &:hover {
    &::before {
      opacity: $category-tile-hover-overlay-opacity;
    }
    > .bg-image { @include transform(scale(1.07)); }
    .category-tile-text {
      opacity: 1;
      @include transform(translate3d(0, 0, 0));
    }
  }
}