.card-tags {
  max-height: 74px;
  overflow-y: clip;
  margin-block: 1.125rem;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 0.375rem;
}

.card-tag {
  padding: 0.375rem 0.5rem;
  font-size: var(--_card-tag-fs, 0.75rem);
  font-weight: var(--_card-tag-fw, var(--fw-500));
  line-height: var(--_card-line-height, 0.97);
  color: var(--_card-clr, var(--text-clr-700));
  border-radius: 100vw;
  border: 1px solid var(--_card-border-clr, #c8cad9);
  background-color: var(--_card-bg-clr, #f8f8f9);

  &.affiliated {
    --_card-tag-fs: 0.875rem;
    --_card-clr: var(--text-clr-700);
    --_card-bg-clr: #def5e8;
    --_card-border-clr: #9ff7c5;

    padding: 0.375rem 0.75rem;
  }

  &.expired {
    --_card-tag-fs: 0.875rem;
    --_card-tag-fw: var(--fw-500);
    --_card-bg-clr: #f42b3f;
    --_card-border-clr: #f42b3f;

    display: flex;
    gap: 0.25rem;
    padding: 0.5rem;
    color: var(--white-clr);
    border-radius: 100vw;
  }

  &.physical {
    --_card-clr: var(--white-clr);
    --_card-bg-clr: var(--tertiary-clr-900);
    --_card-border-clr: #545f79;

    padding: 0.5rem;
  }

  &.online {
    --_card-clr: var(--white-clr);
    --_card-bg-clr: var(--secondary-clr-900);
    --_card-border-clr: #b23078;

    padding: 0.5rem;
  }

  &.physical,
  &.online {
    text-transform: capitalize;
  }
}

/* Event List */
.event-cards-list {
  --_event-card-border-radius: clamp(1.25rem, 2vw + 0.5rem, 1.5rem);
  --_event-card-body-inline-padding: 0.75rem;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: 620px;
  gap: 0.75rem;
}

.event-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-clr-800);
  border-radius: 1.5rem;
  background-color: var(--white-clr);
  border-radius: var(--_event-card-border-radius);
  transition: 300ms ease;
  /* contain: paint; */
  /* overflow: clip; */

  &:hover,
  &:focus-visible {
    box-shadow: 0px 0px 20px 2px hsl(from var(--text-clr-700) h s l / 0.15);

    .event-card-img img {
      scale: 1.15;
    }
  }

  h3 {
    --_line-clamp: 1;
  }
  .event-card-img {
    overflow: clip;

    img {
      transition: scale 500ms ease;
      transition: scale 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  }

  &:where(.expired) {
    .event-card-expired-header {
      position: relative;
      display: flex;
      flex-direction: column;

      h3 {
        font-size: var(--fs-450);
        font-weight: var(--fw-700);
        color: var(--text-clr-700);
        /* line-height: 1.2; */

        @media (width <=1024px) {
          font-size: 1.125rem;
        }
      }

      .card-tags {
        z-index: 1;
        position: absolute;
        inset-inline: 0;

        margin: var(--_event-card-body-inline-padding);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .event-card-img {
      border-top-left-radius: var(--_event-card-border-radius);
      border-top-right-radius: var(--_event-card-border-radius);

      img {
        border-color: var(--text-clr-700);
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
      }
    }

    .event-card-top-header {
      order: 3;
      padding-inline: calc(2 * var(--_event-card-body-inline-padding));
      background-color: var(--white-clr-850);
      border-bottom: 1px solid var(--white-clr-800);
    }

    .card-tag {
      svg {
        width: 0.75rem;
        height: 0.75rem;
      }
    }
  }

  .event-card-header {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    flex-shrink: 0;
    width: 100%;
    background-color: var(--text-clr-700);
    /* display: flex; */
    /* flex-direction: column; */
  }

  > *:not(header) {
    padding-inline: var(--_event-card-body-inline-padding);
  }

  .card-tags {
    margin-block: var(--_event-card-body-inline-padding);
  }

  .event-card-img img {
    height: 180px;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }

  .event-card-top-header {
    padding: 1.125rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white-clr);

    .card-tag {
      background-color: transparent;
      border-color: #454a70;
    }

    > .card-tag {
      color: var(--white-clr);
    }
  }

  header + .card-tags .card-tag {
    color: #090820;
  }

  .location-cards {
    padding-bottom: 1rem;
    /* min-height: 260px; */
    max-height: 260px;
    /* display: grid; */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 97%,
      transparent
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 90%,
      rgba(0, 0, 0, 0) 97%,
      transparent
    );
  }

  .location-card {
    padding: 1rem var(--_event-card-body-inline-padding);
    border-radius: 0.75rem;
    border: 1px solid var(--white-clr-800);
    background-color: #fcfcff;

    > *:not(:last-child) {
      padding-bottom: 1.125rem;
    }

    h4 {
      font-size: var(--fs-400);
      font-weight: var(--fw-400);
      line-height: 1.4;
      border-bottom: 1px solid var(--white-clr-800);
      margin-bottom: 1.125rem;
    }
  }

  .icon-text {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &.border {
      padding-bottom: 1rem;
      margin-bottom: 1rem;
      border-bottom: 1px solid #e8e8f7;
    }
  }

  .icon-key {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    justify-content: center;

    svg {
      width: 1rem;
      height: 1rem;
    }
  }

  .title {
    color: #a9a9b8;
    font-weight: var(--fw-500);
    font-size: var(--fs-300);
    line-height: 1;
  }

  .icon-value {
    color: #090820;
    font-weight: var(--fw-500);
    font-size: var(--fs-300);
    line-height: 1;
  }

  .btns {
    margin-top: auto;
    padding-bottom: var(--_event-card-body-inline-padding);
    display: flex;
    gap: 0.5rem;

    .btn-pill {
      gap: 0.625rem;
    }

    .iconify {
      font-size: 1.5rem;
    }
  }

  .btn-pill {
    --_btn-icon-size: 1.75rem;
    flex-grow: 1;
    height: 2.875rem;
    font-size: 0.875rem;
  }
}

/* End of Event List */