/**
 * @file
 * Events 3 Up Feature
 *
 * Contains styles for Events 3 Up content object.
 */

 @use '_helper' as *;

.events3up {
  &__wrap {
    @media screen and (min-width: $break-large) {
      gap: 40px;
    }

    .events3up__item {
      @media screen and (min-width: $break-large) {
        flex: 0 0 calc((100% / 3) - (80px / 3));
      }
    }
  }

  &__item {
    margin-bottom: 20px;
    padding: 20px;
    position: relative;
    background-color: $color-blue-light;
    border-radius: 15px;
    transition: 0.1s color, 0.1s background-color;

    @media screen and (min-width: $break-medium) {
      margin: 0;
      padding: 30px;
    }

    @media screen and (min-width: $break-large) {
      padding: 25px 30px 30px;
    }

    &:hover {
      color: $color-white;
      background-color: $color-blue-dark;

      .events3up__title a {
        @include focus-light;
        color: $color-white;

        .last-word {
          gap: 16px;
        }
      }

      .events3up__location {
        color: $color-white;
      }
    }
  }

  &__date {
    margin-bottom: 10px;
  }
  
  &__month {
    margin-bottom: -4px;

    @media screen and (min-width: $break-large) {
      margin-bottom: -9px;
    }
  }

  &__day {
    @include date-number;
  }

  &__title {
    margin-bottom: 10px;

    h3 {
      margin: 0;
    }

    a {
      @include arrowCircle(20px, 25px, 30px, true);
      color: $color-black;
      transition: 0.1s color;

      .last-word {
        transition: 0.1s gap;
      }
    }

    h3, a {
      @include event-card;
    }
  }

  &__time {
    @media screen and (min-width: $break-large) {
      margin-bottom: 10px;
    }
  }

  &__location {
    @include body(true);
    color: $color-blue-dark;
    transition: 0.1s color;
  }
}