/* Careers Card */
.careers-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 0.75rem;
}

.career-card {
  --_event-card-body-inline-padding: 1rem;

  display: flex;
  flex-direction: column;
  padding: 1.125rem var(--_event-card-body-inline-padding);
  background-color: var(--white-clr);
  border: 1px solid #ddddeb;
  border-radius: 1.5rem;
  transition: 300ms ease;

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

  .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);
  }

  .btns {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
  }

  .career-card-department {
    display: flex;
    background-color: #fcfcff;
    color: #9496b1;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--white-clr-800);
    border-radius: 100vw;
    align-items: center;
    gap: 0.5rem;

    .career-card-icon {
      color: var(--secondary-clr-900);
      font-size: 1.5rem;
    }
  }

  .career-card-love-btn {
    width: 2.625rem;
    height: 2.625rem;
    align-content: center;
    background-color: var(--white-clr);
    color: var(--secondary-clr-900);
    font-size: 1.75rem;
    border-radius: 50%;
    border: 1px solid #ddddeb;

    .iconify {
      margin-inline: auto;
    }
  }

  .career-card-love-btn {
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-clr-700);
    transition: all 300ms ease;
    &:hover {
      color: var(--secondary-clr-900);
      background-color: hsl(from var(--secondary-clr-900) h s l / 0.1);
    }
  }

  header:first-of-type {
    /* padding-block: 1.5rem 0.75rem; */
    /* padding-block: 0.75rem 0.75rem; */
    /* margin-block: 0.75rem 0.5rem; */
    margin-block: 1rem 0.75rem;
    min-height: 3.75rem;
    line-height: 1.25;
  }

  .key-values-list {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;

    /* border-top: 1px solid #e8e8f7; */
    /* border-radius: 1rem; */
    /* padding: 1rem 0.75rem; */
    /* background-color: #fcfcff; */
    /* margin-block: 1.25rem 1rem; */
    padding: 1rem var(--_event-card-body-inline-padding);
    border-radius: 0.75rem;
    border: 1px solid var(--white-clr-800);
    background-color: #fcfcff;
  }

  .card-tags {
    margin-block: 0;
  }

  .key-value {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    span:first-child {
      font-size: var(--fs-300);
      line-height: 97%;
      color: #9496b1;
    }

    span:last-child {
      display: inline-flex;
      gap: 0.125rem;
      line-height: 97%;
      color: var(--tertiary-clr-900);
    }

    .iconify {
      color: var(--secondary-clr-900);
      font-size: 1rem;
    }
  }

  .cards-tag {
    display: block;
  }

  .btn-pill {
    --_btn-icon-size: 1.25rem;
    height: 2.875rem;
    flex: 1;
    gap: 0.625rem;

    .iconify {
      font-size: var(--_btn-icon-size);
    }
  }
}

.career-card-description {
  display: none;
  --_line-clamp: 3;
  line-height: 1.1;
  gap: 0.75rem;
  color: var(--secondary-clr-900);

  * {
    font-size: var(--fs-400);
  }
}

.career-card-pre-title {
  display: block;
  line-height: 1;
  color: var(--secondary-clr-900);
  border-radius: 100vw;
}

.career-card-title {
  display: block;
  /* margin-top: 0.75rem; */
  font-weight: 700;
  font-size: var(--fs-450);
  font-size: var(--fs-500);
  color: var(--text-clr-700);
  /* line-height: 1; */
}

.career-card-actions {
  order: -1;
  display: flex;
  justify-content: space-between;
}

/* End of Careers Card */