/**
 * Professor 페이지 스타일
 *
 * 교수 프로필, Biography, Education, Experience, Professional Activity, Awards
 */

/* ==================== Professor 컨테이너 ==================== */
.professor-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--full-width);
  margin: auto;

  & .profile-shel {
    width: var(--full-width);
    background-image: radial-gradient(circle farthest-corner at 10% 20%, #e1ecf7 42%, rgba(92, 202, 238, 0.41) 93.6%);
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;

    & .profile {
      display: flex;
      flex-direction: row;
      align-items: end;
      justify-content: center;
      width: var(--content-width);
      max-width: var(--content-max-width);
      height: 100%;
      gap: 50px;

      & .profile-img {
        & img {
          width: auto;
          height: 320px;
          object-fit: cover;
        }
      }

      & .profile-text {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: end;
        width: auto;
        padding-bottom: 15px;
        gap: 2px;

        & p {
          padding: 0;
          margin: 0;
        }

        & a {
          text-decoration: none;
          transition: opacity 0.2s ease;

          &:hover {
            opacity: 0.7;
          }
        }

        & .name {
          font-size: 36px;
          font-weight: 700;
          color: #111;
          letter-spacing: -0.5px;
        }

        & .info {
          font-size: 14px;
          color: #666;
          font-weight: 500;
          margin-bottom: 6px;
        }

        & .department-1 {
          font-size: 16px;
          color: #333;
          line-height: 1.5;
          margin-bottom: 20px;
        }

        & .contact-title {
          font-size: 14px;
          font-weight: 700;
          color: #999;
          text-transform: uppercase;
          letter-spacing: 1.2px;
          margin-top: 0px;
          margin-bottom: 6px;
        }

        & .mini {
          display: flex;
          flex-direction: row;
          align-items: start;
          gap: 8px;
          margin-bottom: 8px;

          & img {
            width: 18px;
            height: 18px;
            margin-top: 2px;
            flex-shrink: 0;
          }

          & .more {
            font-size: 13px;
            color: #444;
            line-height: 1.5;
          }
        }

        & .more-box {
          display: flex;
          flex-direction: row;
          gap: 12px;
          margin-top: 10px;

          & a {
            text-decoration: none;
            transition: all 0.2s ease;

            &:hover {
              transform: translateX(2px);
              opacity: 1;
            }
          }

          & .mini-box {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 6px;
            transition: all 0.2s ease;

            &:hover {
              background-color: rgba(255, 255, 255, 0.9);
              box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            }

            & img {
              width: 24px;
              height: 24px;
            }

            & .more-text {
              font-size: 14px;
              font-weight: 700;
              color: #333;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }

  & .text-box {
    width: var(--content-width);
    max-width: var(--content-max-width);
    margin: 0 auto;

    & .title {
      margin-top: 30px;
      font-size: 24px;
    }

    & .b-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: start;
      width: var(--full-width);

      & .b-box-mini {
        flex-grow: 1;
      }

      & img {
        width: auto;
        height: 260px;
        margin-left: 20px;
        margin-bottom: 20px;
        object-fit: cover;
        border-radius: 10px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
      }
    }

    & .text-part {
      display: flex;
      flex-wrap: wrap;
      margin: 0;

      & .date {
        margin: 0;
        margin-left: 20px;
        margin-bottom: 20px;
        width: 160px;
        font-size: 15px;
        font-weight: 700;
        color: #003876;
      }
    }

    & .text {
      margin: 0;
      margin-left: 20px;
      margin-bottom: 20px;
      font-size: 15px;
      font-weight: 600;

      & strong {
        color: #003876;
      }
    }
  }

  & .lecture-box {
    width: var(--content-width);
    max-width: var(--content-max-width);
    margin: 0 auto;

    & .title {
      margin-top: 30px;
      font-size: 24px;
    }

    & .text-part {
      display: flex;
      flex-direction: row;
      width: var(--full-width);

      & .text-1 {
        width: 250px;
        min-width: 250px;
        font-size: 15px;
        font-weight: 600;
        color: #fb8500;
      }

      & .text-2 {
        flex: 1;
        font-size: 15px;
        font-weight: 600;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
    }
  }
}

/* ==================== 반응형: 1100px 이하 ==================== */
@media screen and (max-width: 1100px) {
  .professor-container {
    & .profile-shel {
      height: auto;
      padding: 30px 0;

      & .profile {
        flex-direction: column;
        align-items: center;
        gap: 20px;

        & .profile-img {
          & img {
            width: 100%;
            max-width: 270px;
            height: auto;
          }
        }

        & .profile-text {
          width: 100%;
          align-items: center;
          text-align: center;
          padding-bottom: 0;

          & .mini {
            justify-content: center;
          }

          & .more-box {
            justify-content: center;
            flex-wrap: wrap;
          }
        }
      }
    }

    & .text-box {
      & .title {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 24px;
      }

      & .b-box {
        & img {
          display: none;
        }
      }

      & .text-part {
        flex-direction: column !important;
        align-items: flex-start;

        & .date {
          margin: 0;
          margin-bottom: 2px;
          width: 100%;
          font-size: 15px;
          font-weight: 700;
          color: #003876;
        }
      }

      & .text {
        margin: 0;
        margin-bottom: 20px;
        font-size: 15px;
        font-weight: 600;
        width: 100%;
      }
    }

    & .lecture-box {
      & .title {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 24px;
      }

      & .text-part {
        flex-direction: column !important;
        align-items: flex-start;

        & .text-1 {
          margin-bottom: 8px;
          width: 100%;
        }

        & .text-2 {
          margin-top: 0;
          width: 100%;
        }
      }
    }
  }
}