@import '../abstracts/_mixins';

.main section:only-of-type.section__events {
  max-height: 100vh;

  .event__wrapper--title {
    padding-top: 16rem;
  }
  ul.quicktabs-tabs {
    padding-top: var(--spacing-7);
  }
  .event__wrapper--row-wrapper {
    max-height: calc(100vh - 16.3rem);
    margin-top: 16.3rem;
    padding-top: 0;
  }
  .event__wrapper--date {
    max-height: 100vh;
  }
  .event__overlay {
    margin-top: 6.4rem;
  }
}

@include mq-768 {
  .main section:only-of-type.section__events {
    ul.quicktabs-tabs {
      padding-top: 11.5rem;
    }
    .event__wrapper--row-wrapper {
      margin-top: 8rem;
      height: calc(100vh - 36.6rem);
    }
  }
}


.section__events {
  position: relative;
  height: 100vh;
  max-height: 84rem;
  padding: 0;
  color: var(--inverted-text-color);
  overflow: hidden;
  background: #333333;

  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: calc(-50vw - 66rem);
    width: 100vw;
    height: 100%;
    background: #242424;
    z-index: 0;
  }

  &.active {
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100%;
      background: var(--black);
      opacity: 0.7;
      z-index: 2;
    }
    .event__background {
      filter: blur(var(--blur));
    }
    .quicktabs-tabpage {
      filter: blur(var(--blur));
    }
    .event__wrapper--title {
      z-index: 100;
    }
  }
  .quicktabs-tabpage {
    position: relative;
    height: 100%;
    transition: filter 360ms ease;
    z-index: 1;
  }
  ul.quicktabs-tabs {
		position: absolute;
		top: 20rem;
		z-index: 9;
		
		li {
		  position: relative;
		  margin-bottom: var(--spacing-1);
      padding: 0;
		  background: none;
		  font-size: var(--font-size-14);
		  font-weight: 800;
		  text-transform: uppercase;
		  color: var(--inverted-color);
		  border-radius: var(--border-radius);
		  cursor: pointer;
		  display: block;
		  text-shadow: 0 0 6.6rem rgba(33,33,33,0.88);
		  
		  &.active {
			color: var(--event-filter-active-color);
    }
    &:hover {
        color: var(--event-filter-hover-color);
      }
      &:before {
        content: none;
      }

      a {
        color: inherit;
      }
		
	   }
	}
  .event__tabs.quicktabs-tabs {
    position: static;
    top: initial;
    z-index: initial;
  }

  .wrapper--1 {
    z-index: initial;
    
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: var(--spacing-4);
      width: calc(100% - var(--spacing-4));
      height: 100%;
      background: linear-gradient(
        to left,
        rgba(33, 33, 33, 1) 18%,
        rgba(33, 33, 33, 0.07) 94%,
        rgba(255, 255, 255, 0) 100%
      );
    }
  }
  .event {
    &__background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100%;
      background-image: var(--event-listing-background-image), var(--gradient-background);
      background-repeat: no-repeat;
      background-position: left calc(-50vw + 82.5rem / 2) center;
      background-size: cover;
      transform: scale(1.1);
      transition: filter 360ms ease;
    }

    &__tabs {
      margin-bottom: var(--spacing-4);

      &-title {
        position: relative;
        margin-bottom: var(--spacing-2);
        font-weight: var(--font-weight-black);
        display: inline-block;

        &:after {
          content: '';
          position: absolute;
          bottom: -0.4rem;
          left: 0;
          width: 100%;
          border-bottom: var(--border-width-1) solid var(--white);
          z-index: 10;
        }
      }

      li {
        position: relative;
        margin-bottom: var(--spacing-1);
        padding-left: 0;
        background: none;
        font-size: var(--font-size-14);
        font-weight: var(--font-weight-black);
        text-transform: uppercase;
        color: var(--inverted-text-color);
        border-radius: var(--border-radius);
        cursor: pointer;
        display: block;
        text-shadow: 0 0 6.6rem rgba(33, 33, 33, 0.88);
        transition: color 360ms ease;

        &:before {
          content: none;
        }

        &.active {
          color: var(--event-filter-active-color);
        }
        &:hover,
        &:focus {
          color: var(--event-filter-hover-color);
        }

        .heading--7:after {
          content: '';
          position: absolute;
          bottom: -0.4rem;
          left: 0;
          width: var(--spacing-6);
          border-bottom: var(--border-width-1) solid var(--white);
          z-index: 10;
        }
      }

      a {
        color: inherit;
      }

      button {
        text-align: left;
      }
    }

    &__wrapper {
      &--title {
        position: relative;
        width: 29.01%;
        height: 100%;
        padding-top: var(--spacing-10);
        float: left;
        z-index: 2;

        .heading--2 {
          font-weight: var(--font-weight-black);
          line-height: var(--line-height-3);
          text-transform: uppercase;
        }
      }
      &--row {
        position: relative;
      }

      &--row-wrapper {
        position: relative;
        width: 55.83%;
        height: 100vh;
        max-height: 84rem;
        padding-top: 9.8rem;
        overflow-y: auto;
        float: left;

        .event__row {
          width: 100%;
          min-height: 11rem;
          margin-bottom: var(--spacing-2);
          margin-left: 0;
          background: #2d2d2d;
          border-radius: var(--border-radius) 0 0 var(--border-radius);

          & + .event__row--date {
            margin-top: var(--spacing-5);
          }

          &:last-of-type:not(:first-of-type) {
            margin-bottom: 3rem;
          }

          &--date {
            margin-bottom: var(--spacing-3);
            font-size: var(--font-size-24);
            font-weight: var(--font-weight-black);
            line-height: var(--line-height-3);
            text-transform: uppercase;
          }

          .column {
            margin: 0;
            align-self: stretch;

            &__wrapper {
              height: 100%;
            }
            &--1 {
              width: 18.61%;
              padding: var(--spacing-2);
            }
            &--2 {
              position: relative;
              width: 25.4%;
              padding: 0;
              background: var(--black);
              overflow: hidden;

              .image-wrapper {
                height: 100%;
                
                img {
                  height: 100%;
                  margin-bottom: 0;
                  object-fit: cover;
                }
              }
                
            }
            &--3 {
              position: relative;
              width: 55.97%;
              padding: var(--spacing-2);
              background: #3a3a3a;
            }
          }

          .event__date {            
            .heading--6 {
              margin-bottom: 0;
              font-weight: var(--font-weight-black);
              line-height: var(--line-height-2);
              text-transform: uppercase;
            }
            p {
              margin-bottom: 0;
            }
            sup {
              top: -0.8rem;
              vertical-align: sub;
            }
          }

          .event__title {
            margin-bottom: 0;
            padding-bottom: 3.1rem;
            font-size: var(--font-size-20);
            font-weight: var(--font-weight-black);
            line-height: var(--line-height-2);

            a {
              color: inherit;

              &:hover,
              &:focus {
                text-decoration: none;
              }
            }
          }
          .event__location {
            position: static;
            bottom: var(--spacing-2);
            left: var(--spacing-2);
            margin-bottom: 0;
            font-weight: 300;
          }
        }
      }
      &--date {
        position: relative;
        width: 15.15%;
        height: 100vh;
        max-height: 84rem;
        float: right;
        background: #202020;
        font-size: var(--font-size-16);
        font-weight: 300;
        line-height: 1;
        text-align: center;
        text-transform: uppercase;
        transition: color 360ms ease;
        z-index: 1;

        .js-date-toggle {
          margin: var(--spacing-4) 0;
          cursor: pointer;

          &:hover,
          &:focus {
            color: var(--inverted-text-color);
          }

          a {
            text-decoration: none;
          }
        }
        .js-date-toggle.active {
          font-weight: var(--font-weight-black);
        }
      }
    }

    &__overlay {
      position: absolute;
      top: 0;
      left: 29.01%;
      width: calc(100% - 29.01%);
      height: 100%;
      padding: 9.8rem var(--spacing-4) 0 0;
      z-index: 101;
      display: none;

      &.active {
        display: block;
      }

      &-title {
        margin-bottom: var(--spacing-3);
        font-size: var(--font-size-24);
        font-weight: var(--font-weight-black);
        line-height: var(--line-height-3);
        text-transform: uppercase;
      }
      &-close {
        position: absolute;
        top: var(--spacing-6);
        right: var(--spacing-4);
        cursor: pointer;

        i {
          font-size: var(--font-size-24);
        }
      }
    }

    &__filter {
      columns: 2;      

      &-wrapper {
        position: relative;
        height: 74%;
        margin-bottom: var(--spacing-4);
        overflow-y: auto;
      }

      &-item {
        width: calc(100% - var(--spacing-4));
        margin-left: var(--spacing-2);
        font-size: var(--font-size-14);
      }

      li {
        width: 100%;
        padding-left: 0;
        display: block;

        &:before {
          content: none;
        }
      }
      .checkbox {
        width: 1.3rem;
        height: 1.3rem;
        margin-top: 0.5rem;
        float: left;
        border: var(--border-width-1) solid var(--black);
      }
      // &-item {
      //   @extend .search__tools--filter-item;
      // }
    }
  }

  &--header {
    max-height: 100vh;

    .wrapper--1 {
      height: 100%;
      padding-top: 8rem;
    }

    .event__wrapper {
      &--title,
      &--row-wrapper {
        max-height: calc(100vh - 8rem);
      }
      &--row-wrapper {
        max-height: calc(100vh - 18.9rem);
        margin-top: 10.9rem;
        padding-top: 0;

        .event__row--group {
          padding-top: 0;
        }
      }
      &--date {
        max-height: 62rem;
      }
    }
    .event__overlay {
      padding-top: 18.1rem;

      &-close {
        top: 12rem;
      }
    }
  }
}

.quicktabs-hide {
  display: none;
}

@media only screen and (max-width: 1455px) {
  .section__events {
    .wrapper--1 {
      padding-right: 0;
    }
  }
}
@media only screen and (max-width: 1210px) {
  .section__events {
    .event__background {
      background-position: left calc(-50vw + 78vw / 2) center;
    }
  }
}

@include mq-768 {
  .section__events {
    background-position: center;

    .event__background {
      background-position: left center;
    }

    .wrapper--1 {
      &:before {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      ul.quicktabs-tabs {
        top: 14.5rem;

        li {
          display: inline-block;
          margin-right: var(--spacing-4);
        }
      }
    }

    .event__tabs--group {
      width: 33.33%;
      float: left;
    }

    .event__wrapper {
      &--title {
        width: 100%;
        height: auto;
        max-height: initial;
        padding-top: var(--spacing-6);
        padding-right: 19%;
      }

      &--row-wrapper {
        width: 81%;
        height: 56.4vh;
        margin-top: 8rem;
        padding-top: 0;

        .event__row {
          &--group {
            padding: 0;
          }
        }
      }

      &--row {
        .event__row {
          .column {
            margin: 0;
          }
        }
      }
      &--date {
        width: 19%;
        margin: 0;
        margin-top: -13.6rem;
      }
    }

    &--header {
      .wrapper--1 {
        padding-top: var(--spacing-9);
      }
      .event__wrapper--row-wrapper {
        height: 65.1vh;
      }
    }

    .event__overlay {
      position: absolute;
      top: 34rem;
      left: 0;
      width: 100%;
      height: 54%;
      padding: var(--spacing-4) var(--spacing-4) 0;
    }
  }
}

@include mq-480 {
  .section__events {
    height: 120vh;

    .wrapper--1 {
      padding-right: var(--spacing-4);

      &:before {
        background: linear-gradient(
          to top,
          rgba(32, 32, 32, 1) 18%,
          rgba(32, 32, 32, 0.07) 94%,
          rgba(255, 255, 255, 0) 100%
        );
      }

      ul.quicktabs-tabs {
        top: 14rem;
      }
    }

    .event__wrapper {
      &--row-wrapper {
        width: 100%;
        height: calc(100vh - 11.6rem);
        margin-top: 7rem;
        padding-top: 0;
      }

      &--title {
        padding-right: 0;

        .heading--2 + p {
          visibility: hidden;
        }
      }

      &--row {
        width: 100%;
        height: 80vh;
        max-height: initial;
        padding-top: 0;

        .event__row {
          height: initial;

          .column {
            align-self: stretch;

            &__three {
              padding: 0;
            }
            &--1 {
              width: 100%;
              margin: 0;
              background: #3a3a3a;
              order: 0;
            }
            &--2 {
              display: none;
            }
            &--3 {
              width: 100%;
              padding: var(--spacing-2);
              background: #2d2d2d;
              order: 1;
            }
          }
          .event__location {
            position: static;
          }
        }
      }
      &--date {
        display: none;
      }
    }

    .event__overlay {
      position: absolute;
      top: 32.6rem;
      left: 0;
      width: 100%;
      height: 48rem;
      padding: var(--spacing-4);
      overflow-y: scroll;

      &-close {
        top: var(--spacing-4);
      }
    }
    .event__filter-wrapper {
      height: 66%;
    }

    &--header {
      max-height: 120vh;

      .event__wrapper--row-wrapper {
        height: 33.8vh;
      }
      .event__overlay {
        top: 38rem;
      }
    }
  }
}
@include mq-320 {
  .section__events {
    height: 100vh;

    .event__tabs {
      padding-right: var(--spacing-2);
    }

    .event__wrapper {
      &--row-wrapper {
        height: calc(100vh - 24.6rem);
      }
    }

    &--header {
      .event__wrapper--row-wrapper {
        height: 52.2vh;
      }
    }
  }
}