@use '_helper' as *;

.news-events {
  @include swipe($type: "watercolor", $direction: "left");
  margin-bottom: 0;
  padding-top: 40px;
  padding-bottom: 40px;

  @media screen and (min-width: $break-medium) {
    padding-top: 0;
    padding-bottom: 80px;
  }

  @media screen and (min-width: $break-large) {
    padding-bottom: 130px;
    padding-top: 0;
  }

  h2 {
    margin-bottom: 20px;

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

  &__inner {
    @media screen and (min-width: $break-large) {
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: auto auto;
      gap: 0 45px;
      max-width: calc($content-max - 58px * 2);
      margin: 0 auto;
    }
  }

  &__header {
    @media screen and (min-width: $break-large) {
      grid-column: 1 / 3;
      margin-bottom: 10px;
    }
  }

  &__section-cta {
    display: flex;
    gap: 0 10px;
    margin-bottom: 40px;

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

  &__news-items {
    margin-bottom: 40px;

    @media screen and (min-width: $break-medium) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 30px;
    }

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

  .blog3up__card {
    margin-bottom: 30px;

    @media screen and (min-width: $break-large) {
      aspect-ratio: auto;
      margin-bottom: 0;
    }

    h3 {
      line-height: 135%;
    }

    &:first-child {
      @media screen and (min-width: $break-medium) {
        aspect-ratio: 638 / 373;
        grid-column: 1 / 3;
        margin-bottom: 0;
      }

      @media screen and (min-width: $break-large) {
        aspect-ratio: auto;
        padding: 40px 30px;

        .blog3up__title h3 a,
        .blog3up__title h3 {
          font-size: rem(26px);

        }
      }
    }

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

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


  &__events-items {
    @media screen and (min-width: $break-medium) {
      display: flex;
      margin: 0 -12px;
    }

    @media screen and (min-width: $break-large) {
      flex-direction: column;
      grid-row: 2 / 3;
      grid-column: 2;
      margin: 0;
    }
  }

  .events3up__item {
    background: transparent;
    padding: 0 0 20px;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.50);

    &:hover {
      .events3up__title a {
        @include focus-dark;
        color: $color-blue-dark;
      }

      .events3up__title a .last-word span {
        transform: translateX(4px);
      }

      .events3up__date {
        color: $color-blue-dark;
      }

      events3up__day {
        color: $color-blue-dark;
      }
    }

    @media screen and (min-width: $break-medium) {
      border-right: 1px solid rgba(0, 0, 0, 0.50);
      border-bottom: 0;
      padding: 0 12px;
    }

    @media screen and (min-width: $break-large) {
      border-bottom: 1px solid rgba(0, 0, 0, 0.50);
      border-right: 0;
      padding: 0 0 40px;
      margin-bottom: 40px;
    }

    &:last-child {
      border: 0;

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

  .events3up__month {
    transition: 0.1s color;

    @media screen and (min-width: $break-large) {
      font-size: rem(18px);
    }
  }

  .events3up__day {
    font-size: rem(50px);
    transition: 0.1s color;

    @media screen and (min-width: $break-large) {
      font-size: rem(70px);
    }
  }

  .events3up__title h3 a {
    color: $color-black;
    font-size: rem(20px);

    @media screen and (max-width: $break-medium - 1) {
      line-height: 1.26;
    }

    @media screen and (min-width: $break-large) {
      font-size: inherit;
    }

    .last-word span {
      transition: all .1s;
    }
  }
}

.cta-bar,
.homepage-goals,
.home-icon-list,
.home-support,
.home-icon-list {
  &:has(+.news-events) {
    margin-bottom: 0;

    .home-support__links {
      // 1200 and 300px are svg width and height, defined in swipe mixin
      padding-bottom: calc(((100vw / 1200px) * 300px) + 50px) !important; // where 50 is the additional spacing needed to meet design - adjust as needed
    }
  }

  &+.news-events {
    @include swipe($type: "watercolor", $direction: "left"); // , $vertPosOffset: calc(-1 * (100svw * 0.06))
    margin-top: 0 !important;
  }
}