Event Teaser

.event {
  &__top__corner {
    position: absolute;
    background: transparent;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 100px 0 0;
    border-color: $white transparent transparent transparent;
    z-index: $zindex-dropdown;
    left: -1px;
    top: -1px;
  }

  &__top__icon {
    position: absolute;
    width: 28px;
    height: 28px;
    z-index: $zindex-sticky;

    .icon {
      fill: $secondary;
    }

    .social-share ul {
      padding: 22.5px 0;
    }
  }

  &__date--small ,
  &__location {
    color: $gray-light;
    padding-right: 0;

    @include mq($breakpoint-lg) {
      padding-right: $space-lg;
    }
    
    svg {
      fill: #d9e3e7;
    }
  }

  &__date {
    
    &--big {
      align-self: center;
    }

    &--day {
      font-size: $font-size-xxxl;
      font-weight: $font-weight-light;
    }

    &--month {
      font-size: $font-size-xl;
      font-weight: $font-weight-bold;
      text-transform: uppercase;
    }

  }
}

.event__teaser {
  border-bottom: $border-width-thick solid $gray-lighter;
  margin: $space-xl $space-md;

  @include mq($breakpoint-lg) {
    grid-template-columns: 360px 1fr;
    margin: 0 $space-md;
    padding: $space-xl 0;
  }

  &__inner {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 220px;
    position: relative;

    @include mq($breakpoint-lg) {
      height: 360px;
    }
  }

  &--left {
    padding: 0;
    margin-bottom: $space-lg;

    @include mq($breakpoint-lg) {
      margin-bottom: 0;
      }
  }

  &--right {
    padding: 0;

    @include mq($breakpoint-lg) {
      padding: 0 $space-lg;

      &.hide-desc {
        height: 360px;
        overflow: hidden;
        position: relative;
        transition: $transition-base;

        .event__teaser__more {
          display: block;
        }

        &.opened {
          height: auto;
          transition: $transition-base;

          .event__teaser__more {
            display: none;
          }

          &::after {
            content: none;
          }
        }

        &::after {
          background: linear-gradient(to top, white 0%, rgba(255, 255, 255, 0.3) 100%);
          content: '';
          height: 100px;
          position: absolute;
          bottom: 0;
          width: 100%;
        }
      }
    }
  }

  &__image {
    left: 0;
    position: absolute;

    @include mq-only($breakpoint-mob) {
      width: 100%;
    }

    @include mq($breakpoint-lg) {
      margin-bottom: 0;
    }
    
    img {
      @include mq-only($breakpoint-mob) {
        height: 220px;
        width: 100%;
      }
    }

    max-height: 220px;

    @include mq($breakpoint-lg) {
      max-width: 360px;
      max-height: 360px;
    }
  }

  &__title {
    color: $primary-dark;
    font-weight: $font-weight-normal;
    margin-bottom: 0;
    text-align: center;

    @include mq-only($breakpoint-mob) {
      font-size: 1.125rem;
    }

    @include mq($breakpoint-lg) {
      text-align: left;
    }
}

  &__details {
    margin: $space-xs 0;
    text-align: center;

    @include mq($breakpoint-lg) {
      text-align: left;
    }

    .icon {
      margin-right: $space-xs;
    }

  }

  &__detail {
    display: block;

    @include mq($breakpoint-lg) {
      display: inline;
    }

    span,
    svg {
      display: inline-block;
      vertical-align: middle;
    }

    svg {
      @include mq-only($breakpoint-mob) {
        display: none;
      }
    }
  }

  &__description {
    height: 0;
    overflow: hidden;
    transition: $transition-base;
    
    &.opened {
      height: auto;
      margin-bottom: $space-md;
      transition: $transition-base;
    }

    @include mq($breakpoint-lg) {
      height: auto;
    }
  }

  &__more {
    display: none;

    @include mq($breakpoint-lg) {
      background: $white;
      position: absolute;
      bottom: 0;
      width: calc(100% - 2.5rem);
      z-index: 1;

      div {
        background-color: $white;
        color: $secondary;
        cursor: pointer;
        font-size: $font-size-base;
        font-weight: $font-weight-normal;
        margin: 0 auto;
        padding: $space-xs;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        width: 33.33333%;

        &::before,
        &::after {
          background-color: $secondary-light;
          content: '';
          height: 2px;
          position: absolute;
          top: 50%;
          width: 100%;
        }

        &::before {
          left: -100%;
          margin-left: $space-md;
        }

        &::after {
          margin-right: $space-md;
          right: -100%;
        }
      }
    }
  }
  
  .btn {
    @include mq-only($breakpoint-mob) {
      width: 100%;
    }
  }

  .open-desc {
    cursor: pointer;
    text-align: right;

    @include mq($breakpoint-lg) {
      display: none;
    }

    &.opened {
      border-bottom: $border-width-thick solid $gray-lighter;
      margin-bottom: $space-md;

      .icon {
        transform: rotate(180deg);
        transition: $transition-base;
      }
    }

    .icon {
      height: 1rem;
      margin: 0 $space-md $space-md 0;
      transition: $transition-base;
      width: 1rem;
    }
  }
}


/**
 * Circle 
 */
.circle {
  position: relative;
  display: flex;
}

 .circle__inner {
  align-self:center;
  display: flex;
  height: 140px;
  width: 140px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: $primary-dark;
  color: white;
  align-content: center;
  justify-content: center;
  opacity: 0.9;

   @include mq($breakpoint-lg) {
     height: 200px;
     width: 200px;
   }
}

// Events list
.page__events {
  .main {
    .event__teaser:last-child {
       margin-bottom: $space-xl;
    }
  }
}