/**
 * @file about-me.css
 * @description 关于我页面的布局样式和样式引入，主要包括关于我页面的布局结构和响应式调整
 * @created 2023-02-20
 * @update 2024-08-16 - 优化结构，调整导航样式
 */

/* 导入基础样式 */
@import '../base.css';
/* 导入组件样式 */
@import '../components/header.css';
@import '../components/footer.css';
@import '../components/chat.css'; /* 导入统一的聊天组件样式 */
@import '../components/scrollbar.css'; /* 导入统一的滚动条样式 */
@import '../components/modal.css'; /* 导入统一的模态框样式 */
@import '../components/hero-section.css'; /* 新增: 英雄区样式 */
@import '../components/loading-spinner.css'; /* 导入统一的加载动画样式 */
@import './profile-cards.css'; /* 个人简介卡片的统一样式 */

/* 关于我页面布局样式 */

/* 保留particles-js的全局背景功能 */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #f8fbff 0%, #f2f9ff 100%); /* 更亮更白的背景色 */
    z-index: -2; /* 调整z-index值，确保粒子在背景渐变之上 */
}

/* 内容容器样式 - 移除卡片效果 */
.about-me-content {
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
    background: transparent; /* 移除背景色，保持透明 */
    margin-top: 0.5rem; /* 减少与英雄区的间距 */
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
    max-width: 1200px; /* 限制最大宽度，保持内容居中 */
}

/* 主内容区域包装器，确保最小高度 */
main {
    min-height: calc(100vh - 180px); /* 调整最小高度计算，适应更小的间距 */
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, rgba(75, 108, 183, 0.05), rgba(255, 255, 255, 0)); /* 减轻渐变的蓝色强度 */
}

/* 内容区样式 */
.profile-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* 从profile-cards.css整合的属性 */
    padding: 1rem;
    width: 100%; /* 从profile-cards.css整合的属性 */
    max-width: 1200px; /* 保持与其他布局一致的最大宽度 */
    margin: 0 auto; /* 水平居中 */
}

/* 卡片之间的间距控制 - 从profile-cards.css移动到这里 */
.profile-content > *:not(:last-child) {
    margin-bottom: 1rem;
}

/* 非全屏窗口的特定调整 */
@media (max-height: 700px) {
    .about-me-content {
        margin-top: 0; /* 在小高度屏幕上减少间距 */
    }
    
    main {
        min-height: auto; /* 使用自然高度 */
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .about-me-content {
        padding: 0.75rem;
        margin-top: 0;
    }
    
    .profile-content {
        padding: 0.5rem;
    }
    
    /* 卡片间距响应式调整 - 从profile-cards.css移动到这里 */
    .profile-content > *:not(:last-child) {
        margin-bottom: 0.8rem; /* 减少卡片间距 */
    }
    
    main {
        min-height: calc(100vh - 150px);
    }
}