/**
 * @file
 * Directory Embed
 *
 * Styles for Directory Embed object.
 */

@use '_helper' as *;

.directory-embed {
  &__header {
    margin-bottom: 30px;
  }

  &__wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;

    @media screen and (min-width: $break-large) {
      flex-direction: row;
      gap: 40px;
      flex-wrap: wrap;
    }
  }

  &__card {
    padding: 20px;
    position: relative;
    color: $color-black;
    background-color: $color-blue-light;
    border-radius: 15px;
    transition: 0.1s color, 0.1s background-color;

    @media screen and (min-width: $break-medium) {
      padding: 0;
      display: flex;
    }

    @media screen and (min-width: $break-large) {
      flex: 0 0 calc(50% - 20px);
    }

    &:hover {
      color: $color-white;
      background-color: $color-blue-dark;

      a {
        @include focus-light;
        color: $color-white;

        .last-word {
          gap: 10px;

          @media screen and (min-width: $break-large) {
            gap: 15px;
          }
        }
      }

      ul {
        border-top-color: $color-white;

        a {
          @include hover-body-link($color-white);
        }
      }
    }
  }

  &__image {
    margin-bottom: 20px;
    width: 37%;

    @media screen and (min-width: $break-medium) {
      margin: 0;
      flex: 0 0 26.5%;
      width: unset;
    }

    @media screen and (min-width: $break-large) {
      flex-basis: 32.4%;
    }

    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      object-fit: cover;

      @media screen and (min-width: $break-medium) {
        border-radius: 15px 0 0 15px;
      }
    }
  }

  &__content {
    @media screen and (min-width: $break-medium) {
      padding: 25px;
      flex: 1;
    }

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

  &__name {
    margin-bottom: 3px;

    h3 {
      margin: 0;
    }

    a {
      @include arrowCircle(25px, 25px, 30px, true);
      color: $color-black;

      .last-word {
        gap: 5px;
        transition: 0.1s gap;

        @media screen and (min-width: $break-large) {
          gap: 10px;
        }
      }
    }

    h3,
    a {
      @include faculty-name;
    }
  }

  &__title {
    margin-bottom: 15px;
  }

  &__contact {
    margin: 0;
    padding: 15px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: solid 1px $color-black-50;
    transition: 0.1s border-top-color;

    li {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 5px;

      @media screen and (min-width: $break-medium) {
        gap: 10px;
      }

      &::before {
        content: none;
      }

      svg {
        width: 25px;
        min-width: 25px;
        height: 25px;

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

      a {
        position: relative;
        z-index: 2;
        word-break: break-all;
        color: $color-black;

        &::before {
          content: '';
          width: calc(100% + 30px);
          height: 100%;
          min-height: 25px;
          position: absolute;
          top: 50%;
          left: -30px;
          transform: translateY(-50%);

          @media screen and (min-width: $break-medium) {
            width: calc(100% + 35px);
            left: -35px;
          }

          @media screen and (min-width: $break-large) {
            width: calc(100% + 40px);
            min-height: 30px;
            left: -40px;
          }
        }
      }
    }
  }

  &__cta {
    margin-top: 30px;
  }
}