/**
 * @file
 * Faculty
 *
 * Contains styles for faculty detail and view modes.
 */

@use '_helper' as *;

.faculty {
  // Detail

  &--full {
    max-width: 898px;
    margin: 0 auto;
  }

  &__block {
    border-radius: 15px;
    background-color: $color-blue-light;
    padding: 20px;
    margin: 10px 0;

    @media screen and (min-width: $break-medium) {
      margin: 0 0 20px;
    }

    @media screen and (min-width: $break-large) {
      margin-bottom: 0;
    }
  }

  &__label {
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 0 10px;
    margin-bottom: 8px;

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

  &__resume {
    margin-top: 20px;

    @media screen and (min-width: $break-medium) {
      margin-top: 30px;
    }

    @media screen and (min-width: $break-large) {
      grid-row: 3;
      margin-top: 10px;
    }
  }

  &__content {
    margin-bottom: 60px;

    @media screen and (min-width: $break-large) {
      margin-bottom: 100px;
    }
  }

  &__image {
    max-width: 108px;

    @media screen and (min-width: $break-medium) {
      max-width: 43%;
      max-width: 38.6%;
    }

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

    img {
      border-radius: 6px;

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

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

  &__info {
    margin-bottom: 60px;

    @media screen and (min-width: $break-medium) {
      display: flex;
      gap: 0 40px;
      margin-bottom: 50px;
    }
  }

  &__contact {
    flex-grow: 1;

    @media screen and (min-width: $break-medium) and (max-width: ($break-large - 1)) {
      flex: 0 0 51.3%;
    }

    @media screen and (min-width: $break-large) {
      display: grid;
      gap: 20px;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto auto;
    }
  }

  // List
  &.faculty--listing {
    .faculty {
      &__item {
        display: flex;
        align-items: flex-start;
        margin: 0 0 2em;
      }

      &__image {
        flex: 0 0 auto;
        margin-right: 2em;
      }
    }
  }

  // Directory
  &.faculty--directory {
    .faculty__list {
      padding: 0 0 2.5em;

      @media (min-width: $break-medium) {
        padding: 0 0 0.4em;
      }

      @media (min-width: $break-large) {
        margin-top: 100px;
      }

    }
  }

  .heading-table {
    margin: 0 0 30px;

    @media (min-width: $break-medium) {
      margin: 0 0 50px;
    }

    @media (min-width: $break-large) {
      margin: 0 0 60px;
    }

    .toolbar {
      position: relative;

      @media (min-width: $break-medium) {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 20px;
        flex-wrap: wrap;
      }

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

    .clear-table {
      display: none;
    }

    .form__item {
      line-height: 1;
      position: relative;
      margin: 0 0 10px;
      max-width: inherit;

      @media (min-width: $break-medium) {
        width: calc(33.33% - 15px);
        margin: 0;
        gap: 5px;
      }

      @media (min-width: $break-large) {
        width: calc(21% - 15px);
      }

      label {
        text-transform: capitalize;
        font-size: rem(18px);
      }

      select {
        font-size: rem(18px);
      }

      &:nth-child(1),
      &:nth-child(3),
      &:nth-child(4) {
        display: none;
      }
    }

    .dataTables_filter {
      position: relative;
      flex-grow: 1;
      margin: 0;

      span {
        margin-bottom: 10px;
        display: block;

        @media screen and (min-width: $break-medium) {
          margin-bottom: 5px;
        }
      }

      input {
        background: url(../assets/icons/search-white.svg) no-repeat calc(100% - 20px) center;
      }

      @media (max-width: $break-large - 1px) {
        flex-basis: 100%;
      }

      @media (min-width: $break-large) {
        margin: 0;
        order: -1
      }

      .faculty-search-svg {
        width: 15px;
        height: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 20px;
        bottom: 14px;
        color: $color-blue-dark;
        pointer-events: none;
      }
    }
  }

  .wrapper-table {
    line-height: 1.2;

    @media (min-width: $break-large) {
      &:after {
        display: none;
      }
    }

    .table-holder {
      @media (min-width: $break-large) {
        overflow: hidden;
        margin-right: 0;
      }
    }

    table {
      width: 100% !important;
      border-collapse: collapse;
      border-spacing: 0;
    }

    a {
      color: $color-black;
    }

    th {
      @media (min-width: $break-medium) {
        padding: 0 0 18px;
        text-align: left;
      }
    }

    td {
      padding: 0;
      display: block;
      margin: 0 0 10px;
      border-bottom: 0;
      width: 100%;
      border-radius: 0;

      &:last-child {
        margin: 0;
      }

      a {
        background-image: none;
        word-break: break-word;
      }

      span {
        font-weight: 700;
        line-height: 1;
      }
    }


    td:first-child {
      border: 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.50);
      padding-bottom: 15px;
      margin-bottom: 15px;
      border-radius: 0;
    }

    td:nth-child(2) {
      display: none;
    }

    td:last-child {
      border: none;
    }


    tbody {
      display: block;

      @media (min-width: $break-medium) {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
      }

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

    thead {
      display: none;
    }

    tr {
      display: block;
      padding: 20px;
      margin-bottom: 20px;
      background-color: $color-blue-light;
      border-radius: 0 15px 15px 0;
      overflow: hidden;

      @media (min-width: $break-medium) {
        width: 100%;
        margin-bottom: 0;
        position: relative;
        padding: 25px;
        padding-left: 195px;
        padding-bottom: 40px;
        min-height: 230px;
        border-radius: 15px;
      }

      @media screen and (min-width: $break-x-large) {
        width: calc(50% - 20px);
        padding: 30px;
        padding-left: 200px;
      }

      h2 {
        margin-top: 0;
        margin-bottom: 10px;
      }

      &:last-child {
        margin: 0;
      }
    }


    img {
      width: 90px;
      margin-bottom: 20px;

      @media screen and (max-width: ($break-medium - 1)) {
        border-radius: 10px;
      }

      @media (min-width: $break-medium) {
        position: absolute;
        left: 0;
        width: 170px;
        top: 0;
        height: 100%;
        object-fit: cover;
      }
    }

    .row-section {
      display: flex;
      align-items: center;
      gap: 0 5px;

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

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

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

    }

    .row-label {
      display: block;
      margin: 0 0 3px;
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: 41%;
      max-width: 120px;

      @media (min-width: $break-medium) {
        display: none;
      }
    }

    .email,
    .link-name {
      position: relative;
      display: block;
      vertical-align: top;

    }

    .email {
      word-break: break-all;
      max-width: 85%;
    }

    h2 {
      @include faculty-name();
      color: $color-black;
      margin: 0;
      word-break: normal;
      overflow-wrap: anywhere;

      a {
        @include arrowCircle($sm: 25px, $md: 25px, $lg: 30px, $makeEntireCardClickable: false);
        @include faculty-name;
        word-break: normal;
        overflow-wrap: anywhere;

        .last-word span {
          transition: all 300ms;
        }

        &:hover {
          .last-word span {
            transform: translateX(4px);
          }
        }
      }
    }

    .link-name {
      text-transform: none;

      @media (min-width: $break-medium) {
        margin: 0 0 4px;
      }
    }

    .tel {
      font-weight: 800;
    }

    .type {
      display: none;
    }

    a:not(.link-name) {
      transition: 0.1s color;

      &:hover {
        color: $color-blue-dark;
      }
    }
  }
}

// hero
.hero--faculty-detail {
  .hero__title {
    @media screen and (min-width: $break-large) {
      @include h3;
    }
  }

  .hero__faculty-title {
    @include hero-eyebrow();
    margin-bottom: 4px;
    text-transform: uppercase;

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

    @media screen and (min-width: $break-large) {
      margin-top: 20px;
    }
  }
}