@import "bourbon";
$font-size-base: 1rem;
$font-size-h2: 1.953rem;
$font-size-h3: 1.5rem;
$font-size-h4: 1.25rem;
//colors
$blue: #0DAFE0;
$orange: invert($blue);
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;

a.ext-link {
    position: relative;
    height: 100%;
    text-decoration: none;
    color: $gray-100;
    cursor: pointer;
    > div {
      position: relative;
      height: 100%;
      padding: 1rem 0;
    }
  }
  .title {
      font-size: $font-size-h4;
      text-transform: uppercase;
      line-height: 1;
      opacity: 1;
      position: relative;
  }
  .subtitle {
      color: $gray-400;
      font-size: .9rem;
      letter-spacing: .035rem;
      line-height: 1.125;
      margin: -.25rem 0 0;
      opacity: 0;
  }

.wrapper .row {
    flex-wrap: nowrap;
    justify-content: center;
    overflow: hidden;
    
    > div {
        height: 240px;
        overflow: hidden;
        @include transition-property(all);
        @include transition-duration(.7s);
        @include transition-timing-function(ease-in-out);

        // add image overlay for better contrast
        &:before {
            background: rgba($gray-900, 0.7);
            content: "";
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            @include transition-property(all);
            @include transition-duration(.2s);
        }
    }

    // when the row is hovered
    &:hover {
        > div {
            // overwrite widths of items when the row is hovered
            flex-basis: calc(100% * 1/6);
            flex-basis: 16.66%;
            max-width: calc(100% * 1/6);
            max-width: 16.66%;
        }
    }
    .item-wrapper {
        // set initial width of each item
        flex-basis: calc(100% * 1/3);
        flex-basis: 33.33%;
        max-width: calc(100% * 1/3);
        max-width: 33.33%;

        > div {
            height: 100%;
            position: relative;
            }

        > a {
            > div {
                position: relative;
                height: 100%;
                padding: 1rem 0;
            }
        }

        .description {
            p {
                width: calc(100% * 2/3);
                margin-top: 0;
                margin-bottom: 0;
                padding: 1rem 0;
                opacity: 0;
            }
        }

        // didn't change for each category icon out of laziness
        .category-icon {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            height: auto;
            font-size: 0.79rem;
            color: $blue;
            display: flex;
            align-items: center;
            padding: .35rem;
            opacity: .7;
            filter: grayscale(50%);
            &:after {
                content: '';
                display: block;
                margin-left: .5rem;
                background-repeat: no-repeat;
                -webkit-mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
                mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
                background-color: $blue;
                height: 20px;
                width: 21px;
            }
        }

        // when an individual item is hovered
        &:hover {
            // increase width of the item
            flex-basis: calc(100% * 2/3);
            flex-basis: 66.66%;
            max-width: calc(100% * 2/3);
            max-width: 66.66%;

            .title {
                font-size: $font-size-h2;
                color: $gray-900;
                text-shadow: none;
                @include transition-property(all);
                @include transition-duration(.4s);
                @include transition-timing-function(ease);
            }

            .subtitle {
                opacity: 1;
                color: $gray-700;
                @include transition-property(opacity);
                @include transition-duration(.2s);
                @include transition-timing-function(ease);
                @include transition-delay(.5s);
            }

            .category-icon {
                opacity: 1;
                filter: grayscale(0%);
            }

            .description {
                p {
                    opacity: 1;
                    color: $gray-900;
                    @include transition-property(opacity);
                    @include transition-duration(.2s);
                    @include transition-timing-function(ease);
                    @include transition-delay(.5s);
                }
            }

            // add white overlay
            &:before {
                background: rgba($gray-100, 0.8) !important;
                content: "";
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
}

// Mobile styles
.mobile-wrapper {
    height: initial;
    max-width: 320px;
    margin: 0 auto;
    .row {
        flex-direction: column;
        > div {
            position: relative;
            height: auto;
            max-width: none !important;
            flex-basis: 100% !important;
            // add image overlay for better contrast
            &:before {
                background: rgba($gray-900, 0.3);
                content: "";
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                @include transition-property(all);
                @include transition-duration(.2s);
            }
            &:first-child:hover {
                margin-left: initial;
            }
            &:last-child:hover {
                margin-right: initial;
            }
            > div {
                opacity: .7;
                position: relative;
                padding: 2rem 0;
                display: flex;
                justify-content: space-evenly;
                flex-direction: column;
                align-content: center;
            }

            // didn't change for each category icon out of laziness
            .category-icon {
                flex-direction: row;
                content: '';
                position: absolute;
                bottom: 0;
                right: 0;
                height: auto;
                font-size: 0.79rem;
                color: $blue;
                display: flex;
                align-items: center;
                padding: .35rem;
                opacity: .7;
                filter: grayscale(50%);
                &:after {
                    content: '';
                    display: block;
                    margin-left: .5rem;
                    background-repeat: no-repeat;
                    -webkit-mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
                    mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
                    background-color: $blue;
                    height: 20px;
                    width: 21px;
                }
            }
            .title {
              color: $gray-100;
            }
            .subtitle {
              opacity: 1;
              padding-bottom: 1rem;
              color: rgba(tint($blue, 60%), .9);
            }
            .description {
                padding-bottom: .5rem;
                p {
                    width: 100%;
                    opacity: 1;
                    color: $gray-600;
                }
                a {
                  color: $gray-600;
                }
            }
          // when an individual item is hovered
          &:active {
              > div {
                opacity: 1;
                @include transition-property(all);
                @include transition-duration(.4s);
                @include transition-timing-function(ease-out);
              }
              .title {
                  font-size: $font-size-h3;
                  color: $gray-100;
                  text-shadow: none;
                  @include transition-property(all);
                  @include transition-duration(.4s);
                  @include transition-timing-function(ease);
              }

              .subtitle {
                  opacity: 1;
                  color: tint($blue, 60%);
                  @include transition-property(opacity);
                  @include transition-duration(.3s);
                  @include transition-timing-function(ease);
              }

              .category-icon {
                  opacity: 1;
                  filter: grayscale(0%);
              }

              .description {
                  p {
                      opacity: 1;
                      color: $gray-100;
                      @include transition-property(opacity);
                      @include transition-duration(.3s);
                      @include transition-timing-function(ease);
                  }
                  a {
                      opacity: 1;
                      color: $gray-100;
                      letter-spacing: .06rem;
                      line-height: .9;
                      font-size: .9rem;
                      padding: .2rem .5rem .3rem;
                      background: rgba($gray-200, .1);
                      border: 1px solid rgba($gray-200, .2);
                      border-radius: 4px;
                  }
              }

              // add overlay
              &:before {
                  background: rgba($gray-900, 0.9);
                  content: "";
                  height: 100%;
                  width: 100%;
                  position: absolute;
                  top: 0;
                  left: 0;
              }
          }
        }
    }
}

// Center screen version titles
.container .row h4:first-of-type {
  text-align: center;
  margin: 0 auto;
  padding-bottom: 1rem;
}

// Add background images
.wrapper .row, .mobile-wrapper .row {
  &:first-child {
    > :nth-child(1) {
        background-color: darken(desaturate(adjust-hue($blue, 44), 72.11), 8.24);
        background-image: url("//themjcl.com/wp-content/uploads/2019/02/playr.jpg");
        background-position: center center;
        background-size: cover;
    }
    > :nth-child(2) {
        background-color: darken(desaturate(adjust-hue($blue, -180), 51.45), 15.69);
        background-image: url("//themjcl.com/wp-content/uploads/2019/02/encased.jpg");
        background-position: center center;
        background-size: cover;
    }
    > :nth-child(3) {
        background-color: darken(desaturate(adjust-hue($blue, -136), 55.70), 31.76);
        background-image: url("//themjcl.com/wp-content/uploads/2019/02/orthomovement.jpg");
        background-position: center center;
        background-size: cover;
    }
  }
  &:last-child {
    > :nth-child(1) {
        background-color: lighten(desaturate(adjust-hue($blue, 17), 37.63), 11.57);
        background-image: url("//themjcl.com/wp-content/uploads/2019/02/spyslide.jpg");
        background-position: center center;
        background-size: cover;
    }
    > :nth-child(2) {
        background: $gray-200;
        background-image: url("//themjcl.com/wp-content/uploads/2019/02/tapedesign.jpg");
        background-position: center center;
        background-size: cover;
    }
    > :nth-child(3) {
        background-color: darken(desaturate(adjust-hue($blue, 10), 33.77), 31.57);
        background-image: url("//themjcl.com/wp-content/uploads/2019/02/bolleraven.jpg");
        background-position: center center;
        background-size: cover;
    }
  }
}