@use '../variables' as *;

// ==================== Mentor 导师页面样式 ====================

.mentor-page {
  min-width: 12.8rem;
  font-size: 0.14rem;
  width: 100%;
  height: var(--app-height, 100vh);
  background: $bg-main;
  overflow: hidden;

  // 主体区域（SideNav 固定宽 2rem，主内容左移让出空间）
  &__body {
    flex: 1;
    height: 100%;
    overflow: hidden;
  }

  // 左侧主内容区
  &__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;

    min-width: 0;
  }

  // 顶部标题 + 搜索框
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.16rem;
    flex-shrink: 0;
    background: #fff;
    padding: 0.16rem 0.24rem;
  }

  &__title-wrap {
    display: flex;
    align-items: center;
    gap: 0.08rem;
  }

  &__title-icon {
    color: $accent;
    font-size: 0.18rem;
  }

  &__title {
    font-size: 0.18rem;
    font-weight: 600;
    color: $text-dark;
    line-height: 1.4;
  }

  &__subtitle {
    font-size: 0.12rem;
    color: $text-middle;
    margin-top: 0.02rem;
  }

  // 推荐搜索标签
  &__quick-tags {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    margin-right: 0.16rem;
    flex-wrap: wrap;
  }

  &__quick-label {
    font-size: 0.13rem;
    color: $text-middle;
    white-space: nowrap;
  }

  &__quick-tag {
    font-size: 0.12rem;
    color: $accent;
    border: 0.012rem solid $accent;
    border-radius: 0.04rem;
    padding: 0.03rem 0.08rem;
    cursor: pointer;
    white-space: nowrap;
    background: #fff;
    transition: background 0.15s;

    &:hover {
      background: #EDF9FA;
    }

    // 小屏（视口宽度 < 1440px）只显示第一个标签
    @media (max-width: 1439px) {
      & ~ & {
        display: none;
      }
    }
  }

  // 搜索框
  &__search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 3rem;
    background: $bg-white;
    border: 1px solid $border-color;
    border-radius: 0.08rem;
    padding: 0 0.12rem;
    height: 0.32rem;

    &:focus-within {
      border-color: $accent;
    }
  }

  &__search-icon {
    width: 0.16rem;
    height: 0.16rem;
    color: $text-light;
    flex-shrink: 0;
    cursor: pointer;

    &:hover {
      color: $accent;
    }
  }

  &__search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.13rem;
    color: $text-dark;
    background: transparent;
    padding: 0 0.08rem;
    line-height: 1;

    &::placeholder {
      color: $text-light;
    }
  }

  &__search-clear {
    font-size: 0.12rem;
    color: $text-light;
    cursor: pointer;
    padding: 0.02rem 0.04rem;
    border-radius: 50%;
    flex-shrink: 0;
    line-height: 1;

    &:hover {
      color: $text-middle;
      background: $bg-main;
    }
  }

  // 行业 Tab 筛选栏
  &__tabs {
    display: flex;
    align-items: center;
    gap: 0.00rem;
    flex-wrap: wrap;
    margin: 0 0.24rem;
    margin-bottom: 0.16rem;
    flex-shrink: 0;
    background: #fff;
    padding: 0.06rem;
    border-radius: 0.08rem;

  }

  &__tab {
    height: 0.35rem;
    text-align: center;
    padding: 0 0.16rem;
    line-height: 0.35rem;
    border-radius: 0.08rem;
    min-width: 0.8rem;
    font-size: 0.13rem;
    color: $text-middle;
    cursor: pointer;
    background: $bg-white;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;

    &:not(&--active):hover {
      color: $accent;
      border: 1px solid $accent;
    }

    &--active {
      background: $accent;
      color: $bg-white;
      border: 1px solid $accent;

      &:hover {
        color: $bg-white;

      }
    }
  }

  // 导师列表滚动容器
  &__list {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 0.24rem;
    margin: 0 0.17rem 0 0.24rem;
    padding-right: 0.04rem;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background: $border-color;
      border-radius: 2px;
    }
  }

  // 导师卡片
  &__card {
    display: flex;
    align-items: center;
    background: $bg-white;
    border-radius: 0.12rem;
    padding: 0.18rem 0.2rem;
    margin-bottom: 0.12rem;
    gap: 0.2rem;
    transition: box-shadow 0.15s;

    &:hover {
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }
  }

  // 卡片左侧 — 限制最大宽度让右侧话题纵向对齐
  &__card-left {
    flex: 1 1 0;
    max-width: 50%;
    display: flex;
    align-items: center;
    gap: 0.14rem;
    min-width: 0;
  }

  // 头像
  &__avatar-wrap {
    flex-shrink: 0;
    width: 0.56rem;
  }

  &__avatar {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    object-fit: cover;
  }

  &__avatar-placeholder {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: $accent;
    color: $bg-white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.18rem;
    font-weight: 600;
  }

  // 导师信息文字区
  &__card-info {
    flex: 1;
    min-width: 0;
  }

  &__card-name {
    font-size: 0.15rem;
    font-weight: 600;
    color: $text-dark;
    margin-bottom: 0.04rem;
    white-space: nowrap;
  }

  &__card-meta {
    font-size: 0.12rem;
    color: $text-middle;
    margin-bottom: 0.06rem;
  }

  &__card-sep {
    margin: 0 0.04rem;
    color: $border-color;
  }

  &__card-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.06rem;
  }

  &__card-label {
    font-size: 0.11rem;
    color: $accent;
    background: rgba(18, 199, 190, 0.1);
    border-radius: 0.1rem;
    padding: 0.02rem 0.08rem;
  }

  // 咨询价格
  &__card-price {
    display: flex;
    align-items: baseline;
    gap: 0.04rem;
    margin-top: 0.06rem;
  }

  &__card-price-label {
    font-size: 0.12rem;
    color: $text-middle;
  }

  &__card-price-value {
    font-size: 0.18rem;
    font-weight: 700;
    color: #f5a623;
  }

  &__card-price-suffix {
    font-size: 0.12rem;
    color: $text-middle;
  }

  // 卡片右侧 — flex:1 让话题区自适应剩余空间，窄屏不会撑出滚动条
  &__card-right {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 0.12rem;
    min-width: 0;
  }

  // 话题列表 — 占据右侧剩余空间，自动截断
  &__card-topics {
    flex: 1;
    min-width: 0;
  }

  // 单条话题，跟随容器宽度自动截断，不设死宽度
  &__card-topic {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.12rem;
    color: $text-middle;
    line-height: 1.6;
  }

  // 查看详情按钮
  &__detail-btn {
    display: flex;
    justify-content: center;
    gap: 0.06rem;
    align-items: center;
    height: 0.32rem;
    line-height: 0.32rem;
    width: 0.92rem;
    text-align: center;
    background: $bg-white;
    border: 0.01rem solid $btn-dark;
    color: $btn-dark;
    border-radius: 0.08rem;
    font-size: 0.12rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s;

    &:hover {
      background: $btn-dark;
      color: $bg-white;
    }
  }

  // 加载中提示
  &__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    padding: 0.2rem;
    color: $text-middle;
    font-size: 0.13rem;
  }

  &__loading-spinner {
    width: 0.18rem;
    height: 0.18rem;
    border: 2px solid $border-color;
    border-top-color: $accent;
    border-radius: 50%;
    animation: mentorSpin 0.7s linear infinite;
  }

  @keyframes mentorSpin {
    to { transform: rotate(360deg); }
  }

  // 没有更多
  &__no-more {
    text-align: center;
    font-size: 0.12rem;
    color: $text-light;
    padding: 0.16rem;
  }

  // 空列表
  &__empty {
    text-align: center;
    font-size: 0.13rem;
    color: $text-light;
    padding: 0.4rem;
  }

  // 右侧广告区域（固定 4rem）
  &__aside {
    width: 3.6rem;
    flex-shrink: 0;
    height: 100%;
    background: $bg-white;
    overflow-y: auto;
  }
}
