@import "_functions";
@import "_mixins";
@import "_variables";

.block.block-lb-related-events {
  background: linear-gradient(118.46deg, var(--wsPrimaryColor, #006B6B) 56.84%, var(--wsSecondaryColor, #01A490) 96.61%);
  overflow: hidden;
  padding: 40px 0;
  margin: 0;

  @include media-breakpoint-up('md') {
    padding: 80px 0 70px;
    margin: 0;
  }

  .section-description {
    text-align: center;
    margin-bottom: 40px;

    @include media-breakpoint-up('md') {
      margin-bottom: 50px;
    }

    h3 {
      color: var(--ylb-color-white, white);;
      font-family: var(--ylb-font-family-cachet, Verdana), sans-serif;
      font-size: 35px;
      line-height: 40px;

      @include media-breakpoint-up('md') {
        font-size: 50px;
        line-height: 65px;
      }
    }

    p {
      color: var(--y-color-white, white);
      font-size: 18px;
      line-height: 28px;
      font-weight: 400;
    }
  }

  .items > .related-events {
    display: flex;
    flex-wrap: wrap;

    @include media-breakpoint-up('md') {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
    }

    @include media-breakpoint-up('xl') {
      grid-template-columns: repeat(3, 1fr);
    }

    .views-row {
      width: 100%;
      margin-bottom: 40px;

      @include media-breakpoint-up('md') {
        margin-bottom: 0;
      }

      article {
        position: relative;
        background: var(--ylb-color-white, white);

        &.node--view-mode-related-content {
          padding-top: 0;

          > div {
            display: flex;
            flex-direction: column;

            .field-header-image {
              border-radius: 8px 8px 0 0;
              overflow: hidden;
              order: -1;
              margin-bottom: 0;
            }

            .related-event-date--month {
              font-family: var(--ylb-font-family-verdana, Verdana), sans-serif;
              font-size: 14px;
              font-weight: 700;
              text-align: center;
              text-transform: uppercase;
            }

            .wrapper-field-tags {
              gap: 15px;
              margin-top: 20px;

              .field-tags {
                font-size: 14px;
                background: unset;
                font-family: var(--ylb-font-family-verdana, Verdana), sans-serif;
              }
            }

            h3 {
              text-align: left;
              a {
                color: var(--wsPartnerColor, #2F2F2F);
              }
            }

            .field-item {
              text-align: left;
              font-size: 18px;
              font-weight: 400;
            }

            .related-event-time,
            .related-event-location {
              gap: 10px;
            }
          }
        }
      }
    }
  }

  .link {
    margin-top: 80px;
    text-align: center;

    a {
      font-family: var(--ylb-font-family-cachet, Verdana), sans-serif;
      font-weight: 500;
      border-radius: 10px;
      background: var(--ylb-color-white, white);
      padding: 10px 15px;
      color: var(--wsPartnerColor, #2F2F2F);
      font-size: 24px;
      line-height: 24px;
    }
  }
}
