@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";
@import "mixins/base.focus";

.o-member__stories {
  @include flex-display;
  flex: 100%;
}

// ------------------------------------
// Shared
// ------------------------------------

.o-member--story-list {
  width: 100%; // Fix for IE11, when component is nested inside of a grid column
  border: none;
  .u-wrapper {
    flex: 100%;
  }
  .c-card {
    border: none;
  }
}

// ------------------------------------
// Benefits
// ------------------------------------

// cards are the same height, regardless of menu/header type
$member-story-list-height: rem(100);
$member-story-list-article-height: rem(110);

// prevent the TGAM logo from overlapping onto the first card
.c-site-header--article {
  .o-member--story-list--benefits {
    margin: rem(10) auto 0 auto;
    height: $member-story-list-article-height;

    .o-member__stories {
      height: $member-story-list-article-height;
    }

    .u-wrapper {
      height: $member-story-list-article-height;
    }
  }
}

.o-member--story-list--benefits {
  display: none; // hidden on mobile
  margin: 0 auto;
  height: $member-story-list-height;

  .o-member__stories {
    display: flex;
    flex-wrap: wrap;
    flex: 100%;
    height: $member-story-list-height;
  }

  .u-wrapper {
    height: $member-story-list-height;

    &:first-child {
      // sass-lint:disable nesting-depth
      .c-card__link {
        &:hover,
        &:focus,
        &:active {
          .c-card__hed {
            padding-top: rem(15);
          }
        }
      }
      // sass-lint:enable nesting-depth

      .c-card__hed {
        padding-top: rem(15);
        background: transparent;
      }

      .c-indicator-icon {
        margin: 0 0 rem(5);
      }

      .c-indicator-icon__art {
        height: rem(16);
        width: rem(16);
        fill: $color-white;
      }
    }
  }

  .c-card {
    padding: 0;
    height: $member-story-list-height;
    background: rgba(0, 0, 0, 0.24);
  }

  .c-card__grid {
    display: block;
    height: $member-story-list-height;
  }

  .c-card__link {
    overflow: hidden;
    height: $member-story-list-height;
  }

  .c-card__content {
    height: $member-story-list-height;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .c-card__hed {
    margin-bottom: 0;
    background: rgba(0, 0, 0, 0.83);
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    transition: padding 1s;
  }

  .c-card__hed-text {
    @include font-gm-sans-bold;
    display: block;
    padding: rem(5);
    text-transform: uppercase;
    letter-spacing: rem(1);
    line-height: 1;
    font-size: rem(14.4);
    background-color: transparent;
    color: $color-white;
  }

  .c-card__dek {
    @include font-gm-sans;
    font-size: rem(11);
    display: none; // revealed on hover
    padding: 0 rem(10);
    color: $color-white;
    text-align: center;
  }
}

// transition on hover
.o-member--story-list--benefits {
  *::before,
  *::after {
    z-index: -1;
  }

  .u-wrapper {
    &::before,
    &::after,
    .c-card__hed::before,
    .c-card__hed::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 0;
      background-color: rgba(0, 0, 0, 0.42);
      transition: 0.4s ease-in-out;
    }

    &::after,
    .c-card__hed::before {
      top: auto;
      bottom: 0;
    }
  }

  .c-card__hed {
    &::after {
      transition-delay: 0.4s;
    }
  }

  .c-card__content {
    transition: transform 0.5s ease-in-out;
  }

  // anchor
  .c-card__link {
    transition: border-bottom 0.5s ease-in-out;
    border-bottom: 0 solid $color-red-500;

    &:focus {
      @include focus-outline-inverted;
    }

    &:visited {
      .c-card__hed-text {
        color:  $color-white;
        text-decoration: none;
      }
    }
    &:hover,
    &:focus {
      .c-card__hed-text {
        text-decoration: none;
      }
    }
    &:active {
      .c-card__hed-text {
        color:  $color-white;
        text-decoration: none;
      }
    }

    &:hover,
    &:focus,
    &:active {
      filter: grayscale(4%);
      border-bottom-width: rem(2);

      &::before,
      &::after,
      .c-card__hed::before,
      .c-card__hed::after {
        height: $member-story-list-height;
      }

      .c-card__hed {
        padding-top: rem(30);
        background: transparent;
      }

      .c-card__dek {
        display: block;
      }

      .c-card__content {
        transform: scale(1.1); // bg image
      }
    }
  }
}
