/* components.css - UI 组件与交互 */

.profile-header .name {
    font-size: 1.0em;
    /* 字体调小 */
    margin-bottom: 0px;
}

.profile-header .location,
.profile-header .role {
    font-size: 0.9em;
    color: var(--gray-text);
    margin-bottom: 3px;
    font-weight: 300;
    /* 字体更纤细 */
}

/* 头像容器 */
.avatar-container {
    margin-bottom: 0px;
    /* 与下方文本的间距 */
    text-align: left;
    /* 保持左对齐 */
}

.profile-avatar {
    width: 60px;
    /* 头像大小 */
    height: 60px;
    /* 头像大小 */
    border-radius: 50%;
    /* 关键：使图片变为圆形 */
    object-fit: cover;
    /* 确保图片覆盖整个圆形区域，不被拉伸 */
    display: block;
    /* 确保图片独占一行，方便对齐 */
    border: 1px solid var(--border-color);
    /* 添加一个细微的边框，增加质感 */
}

/* 侧边栏导航 */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* 间距缩小 */
    margin-top: 50px;
    flex-grow: 1;
}

.nav-item {
    text-decoration: none;
    color: var(--gray-text);
    /* 默认颜色调浅 */
    font-size: 0.9em;
    padding: 2px 0;
    transition: color 0.2s, font-weight 0.2s;
}

/* 移除粗体和激活状态的强调 */
.nav-item:hover,
.nav-item.is-active {
    color: var(--accent-color);
    /* 保持深色强调 */
    /* font-weight: 500; */
    text-decoration: none;
    /* 使用下划线来强调激活或悬停 */
}

/* 确保激活状态颜色与 hover 相同 */
.nav-item.is-active {
    color: var(--accent-color);
}

.sidebar-footer {
    font-size: 0.75em;
    color: var(--light-gray);
    margin-bottom: 25px;
}

#intro .bio-text{
    margin-top: 70px;
}

.bio-text {
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 1.1em;
    line-height: 1.8;
}

.updated-date {
    font-size: 0.8em;
    /* 进一步调小日期字体 */
    color: var(--light-gray);
    margin-bottom: 15px;
}



/* 内容导航/筛选栏 */
.content-tabs {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    overflow-x: auto;
    white-space: nowrap;
    /* 隐藏滚动条但保持滚动功能 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Webkit browsers (Chrome, Safari, Opera) */
.content-tabs::-webkit-scrollbar {
    display: none;
}

.tab-item {
    text-decoration: none;
    color: var(--gray-text);
    font-weight: 400;
    /* 字体更轻 */
    font-size: 0.95em;
    padding: 5px 0;
    transition: color 0.2s;
    flex-shrink: 0;
}

.tab-item:hover,
.tab-item.is-active {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
}

/* 瀑布流/网格展示区 */
.portfolio-grid {
    display: grid;
    /* 核心：使用 auto-fit 和 minmax，让Grid具有最大的弹性 */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* grid-template-columns: repeat(4, 1fr); <--- 不使用固定的列数 */
    gap: 10px;
    margin-top: 20px;
}

.grid-item {
    position: relative;
    overflow: hidden;
    /* 确保图片放大时不会溢出容器 */
    cursor: pointer;
    /* 添加鼠标指针样式 */
}

.grid-item img,
.grid-item video {
    background-color: #f0f0f0;
    /* 核心：使用 aspect-ratio 确保宽高比为 1:1 (正方形) */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 确保图片填充容器 */
    border-radius: 2px;
    display: flex;
    /* 保持 flex，方便内部文字居中 */
    align-items: center;
    justify-content: center;
    color: var(--gray-text);
    /* 占位符文字颜色 */
    font-size: 0.9em;
    /* 占位符文字大小 */
    overflow: hidden;
    /* 防止内部内容溢出，如果将来有图片 */
    transition: transform 0.3s ease, scale 0.3s ease, opacity 0.3s ease;
    /* 添加平滑的缩放过渡效果 */
    transform-origin: center center;
    /* 从中心点缩放 */
    transform: scale(1);
    /* 确保初始缩放为1 */
}

/* 懒加载图片的占位符样式 */
.grid-item img.lazy,
.visual-showcase img.lazy {
    opacity: 0.7;
    /* 未加载时稍微透明 */
    background-color: #f0f0f0;
}

.grid-item img.lazy:not([data-src]),
.visual-showcase img.lazy:not([data-src]) {
    opacity: 1;
    /* 加载完成后完全不透明 */
}

/* PC端：鼠标悬停时放大图片 */
@media (min-width: 769px) {
    .grid-item:hover img,
    .grid-item:hover video {
        transform: scale(1.1);
        /* 放大10% */
    }
    
    .grid-item:hover {
        z-index: 10;
        /* 悬停时提升层级 */
    }
}

/* 优化头像链接样式 */
.avatar-link {
    text-decoration: none;
    /* 移除下划线 */
    color: inherit;
    /* 继承颜色 */
}

/* 鼠标悬停时，通常头像应该提示可点击 */
.avatar-link:hover {
    opacity: 0.8;
    /* 悬停时变暗一点 */
    cursor: pointer;
    /* 确保显示手型光标 */
    text-decoration: none;
    /* 再次确认移除下划线 */
}

/* 弱化引用样式 */
.bio-text [cite] {
    font-size: 1.1em;
    color: var(--light-gray);
    /* 使用浅灰色 */
    margin-left: 5px;
    opacity: 0.5;
    /* 稍微透明化 */
}

.list-detail [cite] {
    font-size: 0.8em;
    color: var(--light-gray);
    margin-left: 5px;
    opacity: 0.5;
}

/* ⬇️ 移动端适配：组件样式 ⬇️ */
@media (max-width: 768px) {
    .profile-avatar {
        width: 80px;
        height: 80px;
        /* 修正：确保在移动端头像居中且清除行高间隙 */
        margin: 0 auto;
        display: block;

        /* ⬇️ 终极修正：强制清除图片自身的边框和背景 ⬇️ */
        border: none !important;
        background-color: transparent !important;
    }

    .avatar-container {
        /* ⬇️ 终极修正：强制清除容器自身的边框和背景 ⬇️ */
        background-color: transparent !important;
        border: none !important;
        text-align: center;
        padding: 0;
        margin-top: 0;
        margin-bottom: 10px;
        line-height: 1;
    }

    /* ⬇️ 终极修复：彻底移除链接标签的盒模型，但保留内容 ⬇️ */
    .avatar-link {
        display: contents;
        text-decoration: none;
        border: none;
        line-height: 1;
        margin: 0 !important;
        padding: 0 !important;
        background-color: transparent !important;
    }

    .profile-header {
        /* 修正：手机上个人信息居中对齐 */
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* ⬇️ 修正：头像和名字间的间距 ⬇️ */
    .profile-header .name {
        margin-top: 10px;
    }


    /* 导航栏调整：使用 Flexbox 横向排布 */
    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 20px;
        justify-content: flex-start;
        /* 导航靠左 */
    }

    .nav-item {
        font-size: 0.9em;
        padding: 4px 8px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        color: var(--gray-text);
    }

    .nav-item:hover,
    .nav-item.is-active {
        color: var(--accent-color);
        border-color: var(--accent-color);
        background-color: transparent;
        /* 保持极简 */
    }

    .sidebar-footer {
        display: none;
    }

    /* 网格调整：在小屏幕上保证两列 */
    .portfolio-grid {
        /* 手机上调整为两列，每个最小 120px 宽 */
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
        /* 手机上间距可以稍微缩小 */
    }

    .grid-item {
        /* 移动端也保持正方形 */
        aspect-ratio: 1 / 1;
    }

    .portfolio-grid .grid-item {
        /* 强制单项目在移动端的最大尺寸，适配手机阅读 */
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        box-sizing: border-box;
        /* 确保不会超出屏幕 */
    }
}