//
// Homepage
// --------------------------------------------------
body.home {

}

.home-section {

}

// * --HIGHLIGHT TEXT *
.home-highlight-offer {
  margin: 5rem 0 2rem;
  p {
    font-weight: 500;
    font-size: 1.075em;
    margin-bottom: 0;
  }
}

// * --SLIDER *
.home-slider {
  .slides {
    .slide {
      min-height: 60vh;
      position: relative;
      overflow: hidden;
      &:hover, &:focus {
        outline: none;
        box-shadow: none;
      }
      .bg-slide {
        @extend .centered;
        height: 100%;
        width: 100%;
        font-family: 'object-fit: cover';
        object-fit: cover;
        z-index: 1;
        &.mobile {
          z-index: 2;
          display: block;
          @media screen and($bp-larger-than-phablet) {
            display: none;
            z-index: 1;
          }
        }
      }
      .slide-title {
        @extend .centered;
        z-index: 3;
        font-size: calc(1.7em + 1.7vw);
        font-family: $font-family-serif;
        letter-spacing: 2px;
        text-align: center;
        line-height: 1.15em;
        // top: 70%;
        @media screen and(max-width: $bp-phablet) {
          width: 80%;
        }
        @media screen and($bp-larger-than-mobile) {
          font-size: calc(1.3em + 1.3vw);
          line-height: 1.5em;
          // top: 50%;
        }
      }
      .btn {
        position: absolute;
        bottom: 3rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
      }
    }
  }
}

// * --INTRO *
.home-intro {
  margin: 10rem auto;
  @extend .custom-container;
  @extend .small;
  @media screen and($bp-larger-than-mobile) {
    text-align: center;
  }
  .section-title {
    position: relative;
    z-index: 0;
    letter-spacing: 2px;
    font-size: calc(1.85em + 1.85vw);
    @media screen and($bp-larger-than-mobile) {
      font-size: calc(1.3em + 1.3vw);
    }
    @media screen and($bp-larger-than-tablet) {
      font-size: calc(1.6em + 1.6vw);
    }
    span {
      z-index: 1;
      background-color: $white;
      @media screen and($bp-larger-than-mobile) {
        padding-left: 3rem;
        padding-right: 3rem;
      }
    }
    &:after {
      content:'';
      @extend .centered;
      height: 1px;
      width: 100%;
      background-color: $primary-color;
      z-index: -1;
      @media screen and(max-width: $bp-phablet) {
        display: none;
      }
    }
  }
  .intro-txt {
    max-width: 600px;
    margin: 3rem auto 0;
  }
}

// * --GRID *
.home-grid {
  .grid {
    width: 100%;
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
    .grid-element {
      height: 10rem;
      position: relative;
      z-index: 0;
      float: left;
      margin: 0;
      padding: 1.5rem;
      width: 100%;
      @media screen and($bp-larger-than-mobile) {
        height: 35rem;
      }
      @media screen and($bp-larger-than-tablet) {
        height: 26.5rem;
      }
      @media screen and($bp-larger-than-desktop) {
        height: 30.5rem;
      }
      @media screen and($bp-larger-than-desktophd) {
        height: 35.5rem;
      }
      a {
        display: inline-block;
        height: 100%;
        width: 100%;
        border: 4px solid $primary-color;
        transition: all .4s $easing;
      }
      &:hover {
        a {
          h3 {
            color: $white;
          }
        }
      }
      figure {
        position: absolute;
        overflow: hidden;
        z-index: -2;
        top: 1rem;
        right: 0rem;
        bottom: 1rem;
        left: 0rem;
        background-color: $primary-color;
        @media screen and($bp-larger-than-mobile) {
          top: 1.5rem;
          right: 1.5rem;
          bottom: 1.5rem;
          left: 1.5rem;
        }
      }
      img {
        @extend .centered;
        width: 100%;
        height: 100%;
        object-fit: cover;
        font-family: 'object-fit:cover';
        transition: all .4s $easing;
        display: none;
        @media screen and($bp-larger-than-mobile) {
          display: block;
        }
      }
      .text-container {
        @extend .centered;
        z-index: 1;
        text-align: center;
        width: 100%;
        color: $black;
        .grid-title {
          font-size: calc(1em + 1vw);
          letter-spacing: 1px;
          padding-bottom: 0;
          margin-bottom: 1rem;
          transition: all .4s $easing;
          @media screen and($bp-larger-than-mobile) {
            font-size: calc(.85em + .85vw);
          }
        }
      }
      &.boxed {
        a {
          border: none;
        }
        figure {
          border: 4px solid $primary-color;
          @media screen and($bp-larger-than-mobile) {
            background-color: #fffffa;
          }
        }
        &:before {
          content:'';
          position: absolute;
          display: none;
          z-index: -1;
          background-color: rgba(#e2d8b5, .65);
          transition: all .4s $easing;
          @media screen and($bp-larger-than-mobile) {
            top: 4rem;
            right: 4rem;
            bottom: 4rem;
            left: 4rem;
            display: block;
          }
        }
        &.longbox {
            @media screen and($bp-larger-than-tablet) {
            .text-container {
              z-index: 2;
              transform: translateY(-50%);
              left: 6rem;
              width: 30%;
              text-align: left;
              .grid-title {
                font-size: calc(1.15em + 1.15vw);
              }
            }
            figure {
              z-index: 2;
              img {
                width: 50%;
                transform: translateY(-50%);
                right: 0;
                object-fit: contain;
                font-family: 'object-fit:contain';
              }
              &:before {
                content:'';
                transition: all .4s $easing;
                position: absolute;
                top: 2.5rem;
                right: 2.5rem;
                bottom: 2.5rem;
                left: 2.5rem;
                z-index: -1;
                background-color: rgba(darken(#DDD9CD, 10%), .17);
              }
            }
            &:hover {
              figure {
                &:before {
                  top: 0rem;
                  right: 0rem;
                  bottom: 0rem;
                  left: 0rem;
                }
              }
            }
          }
        }
        &:hover {
          a {
            h3 {
              color: $black;
            }
          }
          &:before {
            top: 1.5rem;
            right: 1.5rem;
            bottom: 1.5rem;
            left: 1.5rem;
          }
        }
      }
      &:nth-of-type(1) {
        @extend .longbox;
        @media screen and($bp-larger-than-tablet) {
          width: 50%;
        }
      }
      &:nth-of-type(2) {
        @media screen and($bp-larger-than-tablet) {
          width: 25%;
        }
      }
      &:nth-of-type(3) {
        @media screen and($bp-larger-than-tablet) {
          width: 25%;
        }
      }
      &:nth-of-type(4) {
        @media screen and($bp-larger-than-tablet) {
          width: 25%;
        }
      }
      &:nth-of-type(5) {
        @media screen and($bp-larger-than-tablet) {
          width: 25%;
        }
      }
      &:nth-of-type(6) {
        @extend .longbox;
        @media screen and($bp-larger-than-tablet) {
          width: 50%;
        }
      }
      @media screen and(max-width: $bp-phablet) {
        width: 50%;
      }
      @media screen and(max-width: $bp-mobile) {
        width: 100%;
      }
    }
  }
}

// * --PRODUCTS *
.home-products {
  margin: 7.5rem 0 20rem;
  .section-title {
    position: relative;
    z-index: 0;
    letter-spacing: 2px;
    text-align: center;
    font-size: calc(1.85em + 1.85vw);
    @media screen and($bp-larger-than-mobile) {
      font-size: calc(1.3em + 1.3vw);
    }
    @media screen and($bp-larger-than-tablet) {
      font-size: calc(1.6em + 1.6vw);
    }
  }
  .slick-slide {
    height: auto;
  }
  .product-slides {
    margin: 7.5rem 0;
    list-style: none;
    @media screen and($bp-larger-than-mobile) {
      padding: 0 5rem;
    }
    .slide {
      &:hover, &:focus {
        outline: none;
        box-sizing: none;
      }
      figure {
        @media screen and(max-width: $bp-tablet) {
          width: 20rem;
          height: 20rem;
        }
        @media screen and(max-width: $bp-mobile) {
          width: 100%;
          height: 15rem;
        }
      }
      &.faded {
        img {
          opacity: .5;
        }
      }
    }
    .slick-arrow {
      &.slick-prev {
        left: 0;
        background-image: url('../images/arrow_left.png');
        z-index: 100;
        background-size: contain;
        background-repeat: no-repeat;
        &:before {
          display: none;
        }
      }
      &.slick-next {
        right: 0;
        background-image: url('../images/arrow_right.png');
        z-index: 100;
        background-size: contain;
        background-repeat: no-repeat;
        &:before {
          display: none;
        }
      }
    }
    .slick-dots {
      width: auto;
      bottom: -10rem;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      @media screen and(bp-larger-than-mobile) {
        width: auto;
      }
      li {
        margin: 0 .5rem;
        height: 1.25rem;
        width: 1.25rem;
        @media screen and(bp-larger-than-mobile) {
          margin: 0 1rem;
          height: 1.5rem;
          width: 1.5rem;
        }
        button {
          &:before {
            content:'';
            opacity: 1;
            position: absolute;
            top: 0.025rem;
            right: 0.025rem;
            bottom: 0.025rem;
            left: 0.025rem;
            background-color: $black;
            border-radius: 100%;
            padding: 0;
            height: auto;
            width: auto;
            border: 2px solid $black;
            transition: all .4s $easing
          }
        }
        &.slick-active {
          button {
            &:before {
              border-color: $primary-color;
              background-color: transparent;
            }
          }
        }
      }
    }
  }
}

// * --GOLDEN LINKS *
.home-gold {
  display: inline-block;
  width: 100%;
  margin-bottom: 10rem;
  &.double-link {
    position: relative;
    z-index: 0;
    &:after {
      content: '';
      @extend .centered;
      width: 1px;
      height: 100%;
      background-color: $gray-light;
      display: none;
      @media screen and($bp-larger-than-mobile) {
        display: block;
      }
    }
    .link-wrapper {
      text-align: center;
      @media screen and($bp-larger-than-mobile) {
        width: 50%;
        float: left;
      }
      a {
        @media screen and(max-width: $bp-mobile) {
          font-size: .9em;
        }
      }
    }
  }
  .link-wrapper {
    width: 100%;
    padding: 1.5rem 2.5rem;
    @media screen and($bp-larger-than-tablet) {
      padding: 2.5rem 5rem;
    }
    a {
      font-size: 1.1em;
      @media screen and(max-width: $bp-phablet) {
        width: 100%;
        min-width: 0;
      }
    }
    &:nth-of-type(1) {
      text-align: right;
      a {
        text-align: center;
      }
    }
    &:nth-of-type(2) {
      text-align: left;
      a {
        text-align: center;
      }
    }
  }
}

// * --PARTNERS *
.home-partners {
  display: table;
  width: 100%;
  align-items: center;
  text-align: center;
  margin-bottom: 10rem;
  .partner-teaser {
    display: inline-block;
    margin: 0 3.5rem;
    img {
      max-height: 7.5rem;
    }
  }
}
