// ==========================================================================
// article.scss - article styles
// ==========================================================================

.article {
  &-meta-info {
    font-size: $font-size-xs;
    letter-spacing: .05em;
  }
}

.article-filter {
  margin-bottom: 6rem;
  &-list {
    &-item {
      margin-bottom: 1.4375rem;
      padding: 0;
      &:before {
        content: none;
      }
    }
  }
  &-title {
    font-weight: normal;
    margin-bottom: 3rem;
    text-transform: uppercase;
  }
}

.article-hero {
  margin-bottom: .375rem;
  position: relative;
  &:before {
    background: rgba(0, 0, 0, .5);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
  &-btn {
    @include media-breakpoint-down(sm) {
      padding-bottom: .75rem;
      padding-top: .75rem;
    }
    @include media-breakpoint-down(xs) {
      padding-bottom: .375rem;
      padding-top: .375rem;
    }
  }
  &-btn-scroll {
    animation: animation-article-hero-btn-scroll 1.5s infinite cubic-bezier(.54, .19, .54, .93) alternate;
    bottom: 2.5rem;
    color: $white;
    font-size: 1.25rem;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0);
    @keyframes animation-article-hero-btn-scroll {
      0%   { transform: translate(-50%, 0); }
      100% { transform: translate(-50%, 2rem); }
    }
  }
  &-text {
    color: $white;
    font-style: italic;
    font-size: 1.0625rem;
    letter-spacing: .1em;
    margin-bottom: 2rem;
    @include media-breakpoint-down(md) {
      font-size: .9375rem;
      margin-bottom: 1rem;
    }
    @include media-breakpoint-down(sm) {
      font-size: .675rem;
    }
  }
  &-text-container {
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  &-title {
    color: $white;
    font-size: 2.875rem;
    line-height: 1.26;
    margin-bottom: 2rem;
    text-transform: uppercase;
    @include media-breakpoint-down(md) {
      font-size: 2.25rem;
    }
    @include media-breakpoint-down(sm) {
      font-size: 1.875rem;
      margin-bottom: .5rem;
    }
    @include media-breakpoint-down(xs) {
      font-size: 1rem;
    }
  }
  .article-meta-info {
    color: $white;
    font-size: .875rem;
    letter-spacing: .05em;
    margin-bottom: 2rem;
    @include media-breakpoint-down(sm) {
      font-size: .675rem;
      margin-bottom: 1rem;
    }
  }
}

.article-slider {
  margin-bottom: 7.5rem;
  @include media-breakpoint-down(xs) {
    margin-bottom: 3.75rem;
  }
  &-item {
    cursor: pointer;
    height: 350px;
    position: relative;
    width: 925px;
    @include media-breakpoint-down(md) {
      height: 250px;
      width: 660px;
    }
    @include media-breakpoint-down(sm) {
      height: 175px;
      width: 462px;
    }
    @include media-breakpoint-down(xs) {
      height: 120px;
      width: 320px;
    }
    &:before {
      background: $black;
      bottom: 0;
      content: "";
      left: 0;
      opacity: .5;
      position: absolute;
      right: 0;
      top: 0;
      transition: opacity .2s;
    }
    &.swiper-slide-active {
      cursor: default;
      &:before {
        opacity: .2;
      }
      .article-slider-item-text-container {
        opacity: 1;
        visibility: visible;
      }
    }
    &-btn {
      @include media-breakpoint-down(sm) {
        padding-bottom: .75rem;
        padding-top: .75rem;
      }
      @include media-breakpoint-down(xs) {
        padding-bottom: .375rem;
        padding-top: .375rem;
      }
    }
    &-text {
      color: $white;
      font-style: italic;
      font-size: 1.0625rem;
      letter-spacing: .1em;
      margin-bottom: .5rem;
    }
    &-text-container {
      box-sizing: border-box;
      left: 0;
      opacity: 0;
      position: absolute;
      right: 0;
      text-shadow: 1px 1px 3px #000;
      top: 50%;
      transform: translateY(-50%);
      visibility: hidden;
    }
    &-title {
      color: $white;
      font-size: 2.875rem;
      line-height: 1.26;
      margin-bottom: 1.5rem;
      text-transform: uppercase;
      @include media-breakpoint-down(lg) {
        font-size: 2.25rem;
      }
      @include media-breakpoint-down(md) {
        font-size: 1.75rem;
        margin-bottom: .5rem;
      }
      @include media-breakpoint-down(sm) {
        font-size: 1rem;
        margin-bottom: .25rem;
      }
    }
    .article-meta-info {
      color: $white;
      font-size: .875rem;
      letter-spacing: .05em;
      margin-bottom: 1.5rem;
      @include media-breakpoint-down(md) {
        margin-bottom: 1rem;
      }
      @include media-breakpoint-down(sm) {
        font-size: .675rem;
      }
      @include media-breakpoint-down(xs) {
        margin-bottom: .25rem;
      }
    }
  }
  .swiper-button {
    &-next,
    &-prev {
      background: transparent;
      cursor: pointer;
      height: 2.375rem;
      position: absolute;
      top: 175px;
      width: 2.375rem;
      @include media-breakpoint-down(xs) {
        height: 1.75rem;
        width: 1.75rem;
      }
      &:hover {
        &:before,
        &:after {
          background: $brand-primary;
        }
      }
      &:before,
      &:after {
        background: $white;
        content: "";
        height: 2px;
        left: 0;
        position: absolute;
        top: 50%;
        transition: background .2s;
        width: 1.625rem;
        @include media-breakpoint-down(xs) {
          width: .75rem;
        }
      }
      &:before {
        margin-top: -1px;
      }
      @include media-breakpoint-down(md) {
        top: 125px;
      }
      @include media-breakpoint-down(sm) {
        top: 87px;
      }
      @include media-breakpoint-down(xs) {
        top: 60px;
      }
    }
    &-next {
      right: 2.5%;
      @include media-breakpoint-down(sm) {
        right: 1%;
      }
      &:before,
      &:after {
        left: .1875rem;
        transform-origin: 100% 50%;
        @include media-breakpoint-down(xs) {
          left: .375rem;
        }
      }
      &:before {
        transform: rotate(-45deg);
      }
      &:after {
        transform: rotate(45deg);
      }
    }
    &-prev {
      left: 2.5%;
      @include media-breakpoint-down(sm) {
        left: 1%;
      }
      &:before,
      &:after {
        left: .5625rem;
        transform-origin: 0 50%;
      }
      &:before {
        transform: rotate(45deg);
      }
      &:after {
        transform: rotate(-45deg);
      }
    }
  }
}

.article-teaser {
  margin-bottom: 5rem;
  &-text {
    font-weight: 300;
    letter-spacing: .1em;
    margin-bottom: 2.5rem;
  }
  &-title {
    font-size: 1.25rem;
    font-weight: normal;
    text-transform: uppercase;
  }
  .article-meta-info {
    font-size: .875rem;
    margin-bottom: 1rem;
  }
  .theme-list {
    margin-bottom: .5rem;
    &-item {
      font-size: $font-size-xs;
    }
  }
}