.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; */
  --_event-card-body-inline-padding: 0.875rem;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: 720px;
  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 {
    margin-bottom: 0;
  }

  .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-size: var(--fs-500);
        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; */
        order: 2;
        margin: 0 var(--_event-card-body-inline-padding);
        display: flex;
        align-items: center;
        /* justify-content: space-between; */
      }
    }

    .event-card-img {
      margin: var(--_event-card-body-inline-padding);
      /* border-top-left-radius: var(--_event-card-border-radius); */
      /* border-top-right-radius: var(--_event-card-border-radius); */
      border: 1px solid var(--white-clr-800);
      border-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: 240px;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }

  .event-card-top-header {
    /* padding: 1.125rem 1.5rem; */
    padding-inline: var(--_event-card-body-inline-padding);
    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 */

.event-start-date {
  z-index: 1;
  position: absolute;
  display: grid;
  gap: 0.5rem;
  place-items: center;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background-color: #fafafa;
  box-shadow: 0px 4px 12px 0px #00000026;
  top: calc(var(--_event-card-body-inline-padding) + 0.5rem);
  left: calc(var(--_event-card-body-inline-padding) + 0.5rem);

  span:first-child {
    font-family: Satoshi;
    font-weight: 900;
    font-style: Black;
    font-size: 32.3px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;

    color: var(--text-clr-700);
  }

  span:last-child {
    font-family: Satoshi;
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: var(--secondary-clr-900);
  }
}

/* .event-card-status {
  padding-inline: var(--_event-card-body-inline-padding);
  order: 2;
  display: flex;
  gap: 0.5rem;

  li {
    color: var(--_event-card-status-clr, var(--text-clr-700));

    &.online {
      --_event-card-status-clr: var(--secondary-clr-900);
    }

    &.expired {
      --_event-card-status-clr: #f42b3f;
    }
  }
} */