.section_upcoming_events {
  padding-block: var(--custom_padding_top, 100px) var(--custom_padding_bottom, 100px);

  * {
    margin-block: 0px;
    line-height: 1.25;
  }
  h2 {
    font-size: var(--text-heading-2);
    font-weight: var(--font-weight-base);
  }
  h3 {
    font-size: var(--text-heading-5);
    font-weight: var(--font-weight-base);
  }
  .section_header {
    text-align: center;
    margin-bottom: 2rem;
    h2 {
      margin-block: 0.5rem;
    }
  }
  .content_container {
    display: flex;
    flex-wrap: wrap;
    gap: 6rem;
  }

  .sidebar {
    flex: 0 0 200px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .sidebar_content {
      position: sticky;
      top: min(var(--header-height, 110px), 130px);
      list-style: none;
    }
    li {
      margin-block: 0;
      padding-block: 0;
    }
    .sidebar_title {
      font-size: var(--event_month_title_size, 17px);
      font-weight: 700;
      padding-block: 0 0.75rem;
      background: unset;
      border: unset;
      border-bottom: solid 1px currentColor;
      text-align: left;
      padding-inline: 0;
      width: 100%;
    }
    .sidebar_month {
      font-size: var(--event_month_size, 17px);
      text-transform: uppercase;
      cursor: pointer;
      text-decoration: none;
      border-bottom: solid 1px currentColor;
      width: 100%;
      display: block;
      padding-block: 0.5rem 0.75rem;
      margin-block: 0.5rem 0;
      font-weight: 500;
    }
  }

  .card_container {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: calc(-1 * var(--event_month_container_padding, 50px));
    margin-bottom: calc(-1 * var(--event_month_container_padding, 50px));

    .event_month {
      padding-block: 0 var(--event_month_container_padding, 50px);
      margin-block: var(--event_month_container_padding, 50px) 0;
      display: flex;
      flex-direction: column;
      gap: var(--event_month_container_padding, 50px);
      .month_name {
        font-size: var(--event_month_name_size, 30px);
        line-height: 1;
        font-weight: 700;
        text-align: center;
      }
      .event_item {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 2rem;
        overflow: hidden;

        .event_time {
          flex: 0 0 125px;
          font-weight: 600;
          display: flex;
          flex-direction: column;
          gap: 1rem;
          justify-content: center;
          .event_day {
            font-size: var(--event_day-size, 17px);
            text-transform: uppercase;
            text-align: center;
          }
          .event_date {
            font-size: var(--event_date-size, 98px);
            text-align: center;
            line-height: 1;
          }
        }
        .media_container {
          flex: 0 0 300px;
          img {
            width: 100%;
            height: auto;
            display: block;
            height: 175px;
            object-fit: cover;
          }
        }
        .text_container {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 15px;
          height: auto;
          position: relative;
          a:has(> .event_title) {
            text-decoration: none;
            color: inherit;
          }
          .event_title {
            font-size: var(--event_title-size, 17px);
            font-weight: 700;
            font-family: var(--font-family-base);
          }
          .event_location {
            display: flex;
            gap: 1rem;
            p {
              font-size: var(--event_title-size, 17px);
              line-height: 1.4;
            }
            svg path {
              fill: currentColor;
            }
          }
        }
        .text_container.overflow_gradient::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 30px;
          pointer-events: none;
          background: linear-gradient(to top, var(--background-primary) 10%, transparent 100%);
          @supports (background: color-mix(in srgb, white 0%)) {
            background: linear-gradient(
              to bottom,
              color-mix(in srgb, var(--background-primary) 0%, transparent),
              color-mix(in srgb, var(--background-primary) 100%, transparent)
            );
          }
        }
        .link_container {
          --icon_size: 30px;
          flex: 0 0 calc(var(--icon_size) + 6px * 2);
          height: 100%;
          display: flex;
          align-items: flex-start;

          a {
            width: calc(var(--icon_size) + 6px * 2);
            height: calc(var(--icon_size) + 6px * 2);
            padding: 6px;
            svg {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .event_month:not(:has(.event_item)) {
      display: none;
    }
  }
}

@media screen and (max-width: 1399px) {
  .section_upcoming_events {
    .content_container {
      gap: 2rem;

      .card_container {
        .event_month {
          .event_item {
            gap: 1rem;
            .media_container {
              flex: 0 0 250px;
            }
            .link_container {
              margin-inline-start: 1rem;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1099px) {
  .section_upcoming_events {
    .content_container {
      gap: 2rem;
      .card_container {
        .event_month {
          .event_item {
            position: relative;
            .event_time {
              position: absolute;
              bottom: 10px;
              left: 10px;
              color: white;
              text-shadow:
                0px 0px 10px #00000030,
                0px 0px 20px black;
              gap: 0.5rem;
              .event_day {
                font-size: var(--event_day-size, 17px);
                text-transform: uppercase;
                text-align: center;
                font-weight: 600;
                text-shadow:
                  0 0 10px black,
                  0 0 20px black;
                letter-spacing: 2px;
              }
              .event_date {
                line-height: 0.75;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 999px) {
  html {
    --additional-custom-offset: 90px;
  }
  :root .section_upcoming_events,
  :root .stacked-component {
    --custom_padding_top: 50px;
    --custom_padding_bottom: 50px;
  }
  .section_upcoming_events {
    .content_container {
      gap: 2rem;
      .sidebar {
        min-width: 100%;
        /* position: sticky;
        top: 80px;
        left: 0; */
        z-index: 1;
        background-color: var(--background-primary);
        box-shadow: 0px -20px 0px 0px var(--background-primary);
        .sidebar_content {
          padding-inline-start: 0;
          display: flex;
          flex-wrap: wrap;
          gap: 1rem;
          padding-block: 1rem;
          transition: all ease 0.3s;
          overflow: hidden;
          // box-shadow: 0px 0px 10px 0px #00000040;
          width: calc(100% + 2 * var(--container-padding));
          margin-left: calc(-1 * var(--container-padding));
          padding-inline: var(--container-padding);

          .sidebar_title {
            width: 100%;
          }

          .sidebar_title::before,
          .sidebar_title::after {
            content: '';
            position: absolute;
            top: 1.5rem;
            width: 0.6rem;
            height: 1px;
            background: currentColor;
            transition: all ease 0.4s;
            right: calc(var(--container-padding) + 0.4rem);
            transform: rotate(-45deg);
          }

          .sidebar_title::after {
            right: calc(var(--container-padding) + 0rem);
            transform: rotate(45deg);
          }

          li {
            flex: 1 1 calc(50% - 1rem);
            a {
              padding: 0.5rem 0rem;
              margin-block-start: 0px;
            }
          }
        }
        .sidebar_content:not(.visible) {
          height: 52px;

          .sidebar_title::before {
            right: calc(var(--container-padding) + 0rem);
          }
          .sidebar_title::after {
            right: calc(var(--container-padding) + 0.4rem);
          }
        }
      }
      .card_container {
        .event_month {
          .event_item {
            position: relative;
            .event_time {
              position: absolute;
              bottom: 10px;
              left: 10px;
              color: white;
              text-shadow:
                0px 0px 10px #00000030,
                0px 0px 20px black;
              gap: 0.5rem;
              .event_day {
                font-size: var(--event_day-size, 17px);
                text-transform: uppercase;
                text-align: center;
                font-weight: 600;
                text-shadow:
                  0 0 10px black,
                  0 0 20px black;
                letter-spacing: 2px;
              }
              .event_date {
                line-height: 0.75;
              }
            }
          }
        }
      }
    }
  }
}

@media (min-width: 599px) and (max-width: 1024px) {
  .section_upcoming_events {
    .card_container {
      .event_month {
        .text_container {
          div:last-child {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 599px) {
  .section_upcoming_events {
    .content_container {
      .card_container {
        .event_month {
          .event_item {
            flex-wrap: wrap;
            .event_time {
              top: 60px;
              bottom: unset;
              height: max-content;
            }
            .text_container {
              flex: 1 0 350px;
              height: auto;
            }
            .media_container {
              flex: 1 0 350px;
            }
            .link_container {
              position: absolute;
              top: 10px;
              right: 10px;
            }
          }
        }
      }
    }
  }
}

.event_month:has(~ .event_month > .event_item) {
  border-bottom: solid 1px currentColor;
}

.section_upcoming_events:not(:has(.event_month#january .event_item))
  .content_container:not(.show_empty_months)
  li:has([href='#january']) {
  display: none;
}
.section_upcoming_events:not(:has(.event_month#february .event_item))
  .content_container:not(.show_empty_months)
  li:has([href='#february']) {
  display: none;
}
.section_upcoming_events:not(:has(.event_month#march .event_item))
  .content_container:not(.show_empty_months)
  li:has([href='#march']) {
  display: none;
}
.section_upcoming_events:not(:has(.event_month#april .event_item))
  .content_container:not(.show_empty_months)
  li:has([href='#april']) {
  display: none;
}
.section_upcoming_events:not(:has(.event_month#may .event_item))
  .content_container:not(.show_empty_months)
  li:has([href='#may']) {
  display: none;
}
.section_upcoming_events:not(:has(.event_month#june .event_item))
  .content_container:not(.show_empty_months)
  li:has([href='#june']) {
  display: none;
}
.section_upcoming_events:not(:has(.event_month#july .event_item))
  .content_container:not(.show_empty_months)
  li:has([href='#july']) {
  display: none;
}
.section_upcoming_events:not(:has(.event_month#august .event_item))
  .content_container:not(.show_empty_months)
  li:has([href='#august']) {
  display: none;
}
.section_upcoming_events:not(:has(.event_month#september .event_item))
  .content_container:not(.show_empty_months)
  li:has([href='#september']) {
  display: none;
}
.section_upcoming_events:not(:has(.event_month#october .event_item))
  .content_container:not(.show_empty_months)
  li:has([href='#october']) {
  display: none;
}
.section_upcoming_events:not(:has(.event_month#november .event_item))
  .content_container:not(.show_empty_months)
  li:has([href='#november']) {
  display: none;
}
.section_upcoming_events:not(:has(.event_month#december .event_item))
  .content_container:not(.show_empty_months)
  li:has([href='#december']) {
  display: none;
}