@use '_helper' as *;

.program3up {
  .column--three {
    @media screen and (min-width: $break-medium) {
      flex-wrap: wrap;
      justify-content: flex-start;
    }
  }

  &__short-message {
    color: $color-blue-dark;
    font-size: rem(12px);
    padding: 2px 7px;
    border: 1px solid $color-blue;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    border-radius: 3px;
    background-color: $color-blue-light;

    @media screen and (min-width: $break-large) {
      font-size: rem(14px);
    }
  }

  &__card {
    padding: 30px 20px;
    position: relative;
    @include cardArrowCornerHover;

    @media screen and (min-width: $break-medium) {
      padding: 30px;
      min-height: 270px;
    }

    @media screen and (min-width: $break-large) {
      padding: 30px 20px 60px;
    }

    &:hover {
      color: $color-white;

      .program3up__card__degree {
        border-bottom-color: rgba(255,255,255,0.5);
      }

      a {
        color: $color-white;
      }

      .background-wrapper {
        background-color: $color-blue-dark;
      }
    }

    .background-wrapper {
      border-radius: 15px;
      background-color: $color-blue-light;
      transition: all .1s;
    }

    &__degree {
      display: flex;
      align-items: baseline;
      gap: 0 8px;
      @include body-small();
      border-bottom: 1px solid rgba(0,0,0,0.5);
      padding-bottom: 20px;
      margin-bottom: 20px;
      &__abbr {
        @include program-chip-card();
        background-color: $color-blue;
        color: $color-white;
        padding: 0 7px;
        border-radius: 3px;
        height: 18px;
        display: inline-block;

        @media screen and (min-width: $break-large) {
          height: 24px;
          width: 50px;
          text-align: center;
        }
      }
    }

    h3 {
      margin: 0 0 10px;
      @include program-card();
      a {
        font: inherit;
        color: $color-black;
        text-decoration: none;

        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: calc(100% + 1px);
          height: calc(100% + 1px);
          z-index: 1;
        }
      }
    }
  }

  &__info {
    display: flex;
    align-items: center;
    gap: 0 6px;
    @include body-small();
  }

  &__cta {
    margin: 30px 0 0;
  }
}