@use '@/style/functions.scss' as *;

.home_wrap {
  min-height: 100vh;
  background: url('@/assets/images/home_bg.jpg') top center no-repeat;
  background-size: cover;
  .content_box {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 120px;
    padding-bottom: 40px;
  }
  .title {
    font-weight: bold;
    font-size: 48px;
  }
  .text-gradient {
    background-image: linear-gradient(
      45deg,
      #44c3e3 0%,
      #4c8cff 18%,
      #3646e9 68%,
      #9a66e2 100%
    );
    -webkit-background-clip: text; /* 将背景裁剪为文本形状 */
    background-clip: text;
    color: transparent; /* 隐藏原始文本颜色 */
  }
  .menu_wrap {
    margin-top: 110px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(365px, 365px));
    gap: 24px;
    justify-content: center;
  }
  .menu_item {
    padding: 24px 28px;
    border-radius: 24px;
    background: rgba(236, 247, 250, 0.8);
    box-shadow:
      0px 4px 30px 1px rgba(0, 119, 155, 0.1),
      inset 0px 3px 6px 1px #ffffff;
    border: 1px solid #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 365px;
    height: 160px;
    &:hover {
      transform: translateY(-2px);
      box-shadow:
        0px 8px 40px 1px rgba(0, 119, 155, 0.15),
        inset 0px 3px 6px 1px #ffffff;
    }
    .menu_left { flex: 1; min-width: 0; padding-right: 12px; }
    .menu_item_title {
      color: #32375a;
      font-size: 20px;
      font-weight: bold;
      line-height: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      .menu_item_title_text {
        max-width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .verify_badge { color: #28c76f; }
    }
    .menu_item_content {
      margin-top: 12px;
      font-size: 14px;
      color: #7a829c;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .menu_meta { margin-top: 14px; }
    .menu_tag {
      display: inline-block;
      padding: 4px 8px;
      background: #e6f7ff;
      color: #1890ff;
      border-radius: 6px;
      font-size: 12px;
    }
    .menu_right { flex: none; }
    .menu_avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      object-fit: cover;
      &.placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(45deg, #6633ff, #9966ff);
        color: #fff;
        font-weight: bold;
      }
    }
  }
  
  // 测试工具区域样式
  .test_tools_section {
    margin-top: 60px;
    
    .section_title {
      font-size: 24px;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 20px;
      text-align: center;
    }
    
    .test_tools_grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    
    .test_tool_item {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 16px;
      padding: 24px;
      cursor: pointer;
      transition: all 0.3s ease;
      color: white;
      display: flex;
      align-items: center;
      gap: 16px;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
      }
      
      .test_tool_icon {
        font-size: 32px;
        flex-shrink: 0;
      }
      
      .test_tool_info {
        flex: 1;
        
        .test_tool_title {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 8px;
        }
        
        .test_tool_desc {
          font-size: 14px;
          opacity: 0.9;
          line-height: 1.4;
        }
      }
    }
  }

  .empty_state {
    text-align: center;
    margin-top: 60px;
    color: #7a829c;
    font-size: 18px;
  }
}

/* 自适应网格无需额外断点，以下保留标题字号与容器宽度的渐进优化 */
@media (max-width: 1280px) {
  .home_wrap .content_box { max-width: 1000px; }
}
@media (max-width: 1080px) {
  .home_wrap .content_box { max-width: 860px; }
}

.layout_mobile {
  .content_box {
    max-width: 100%;
    padding: 0 px2vw(40);
    padding-top: px2vw(42);
    padding-bottom: px2vw(40);
  }
  .title {
    font-size: px2vw(48);
    text-align: center;
  }
  .menu_wrap {
    grid-template-columns: 1fr;
    margin-top: px2vw(60);
    gap: px2vw(20);
  }

  .menu_item {
    width: 100%;
    border-radius: px2vw(32);
    padding: px2vw(32);
    .menu_icon {
      width: px2vw(72);
      height: px2vw(72);
    }
    .menu_info {
      margin-left: px2vw(32);
    }
    .menu_item_title {
      font-size: px2vw(28);
    }

    .menu_item_content {
      margin-top: px2vw(16);
      font-size: px2vw(24);
    }
  }
}
