/* media.css - 专用于移动设备 (屏幕宽度 <= 768px) 的样式 */

@media (max-width: 768px) {

    /* ------------------------------------------- */
    /* --- 0. 基础溢出与宽度保护 (更安全的方式) --- */
    /* ------------------------------------------- */
    *::before,
    *::after {
        box-sizing: border-box !important;
    }


    body {
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        width: 100% !important;
        /* 确保body不会产生水平滚动 */
    }
    
    /* 全局确保所有元素不会超出屏幕 */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* 特别处理图片和媒体元素 */
    img, video, iframe, object, embed {
        max-width: 100% !important;
        height: auto !important;
    }

    #app-container {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #app-container,
    #main-content {
        width: 100% !important;
        margin: 0 !important;
        /* 确保没有外部边距干扰 */
    }

    /* ------------------------------------------- */
    /* --- 1. 布局核心重置 (layout.css 抽取) --- */
    /* ------------------------------------------- */
    body {
        font-size: 16px;
    }

    #sidebar {
        position: relative;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: var(--padding-unit);
        width: 100% !important;
    }

    #main-content {
        margin-left: 0 !important;
        padding: var(--padding-unit);
        width: 100% !important;
    }

    /* --------------------------------------------- */
    /* --- 2. UI 组件与交互 (components.css 抽取 + 修复) --- */
    /* --------------------------------------------- */

    /* ❗ 修正：作品网格强制为两列 ❗ */
    .portfolio-grid {
        /* ⭐ 强制两列，使用 50% - gap/2 的计算方式保证间距 ⭐ */
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .grid-item {
        aspect-ratio: 1 / 1;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        /* 防止内容溢出 */
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        /* 添加弹性过渡效果 */
    }
    
    /* 移动端点击时的缩小效果（按钮感觉） */
    .grid-item:active {
        transform: scale(0.95);
        /* 点击时缩小5%，模拟按钮按下效果 */
    }
    
    /* 确保网格项目中的图片不会超出 */
    .grid-item img,
    .grid-item video {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        /* 保持图片比例并填充容器 */
        transform: scale(1);
        /* 确保初始缩放为1 */
        transition: transform 0.3s ease;
    }
    
    /* 确保图片在返回后恢复到正常大小 */
    .grid-item img[style*="scale"] {
        transform: scale(1) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* 确保过滤切换时的动画效果在移动端也有效 */
    .portfolio-grid .grid-item {
        transition: opacity 0.3s ease, transform 0.3s ease !important;
    }

    /* 确保头像/导航居中和按钮样式正确 */
    .profile-avatar {
        width: 80px;
        height: 80px;
        margin: 0 auto;
        display: block;
        border: none !important;
        background-color: transparent !important;
    }

    .avatar-container,
    .profile-header,
    .profile-header .degree-info,
    .profile-header .location,
    .profile-header .english-tags,
    .profile-header .chinese-tags {
        text-align: center;
    }

    .profile-header .name {
        margin-top: 10px;
        font-size: 1.1em;
    }

    .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 10px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        color: var(--gray-text);
        margin-right: 5px;
    }

    .sidebar-footer {
        display: none;
    }


    /* ------------------------------------------- */
    /* --- 3. 页面样式 (pages.css 抽取 + 修复) --- */
    /* ------------------------------------------- */

    .visual-showcase {
        grid-template-columns: 1fr;
    }

    .visual-showcase img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        /* 确保图片不会超出屏幕 */
    }
    
    /* 确保所有内容区域的宽度限制在移动端正确 */
    .content-section,
    .about-long-section,
    .now-section,
    .done-section {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
        /* 包含内边距在宽度内 */
    }
    
    /* 修复移动端自我简介部分的顶部留白 */
    #intro {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    #intro .bio-text {
        margin-top: 10px !important;
        /* 大幅减少顶部留白 */
    }
    
    .bio-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* 优化移动端字体大小 - 确保最小14px可读性 */
    body {
        font-size: 16px !important;
        /* 移动端基础字体增大到16px */
    }
    
    p, .bio-text, .project-detail-text {
        font-size: 16px !important;
        /* 正文确保16px，提升可读性 */
        line-height: 1.6 !important;
    }
    
    .project-detail-text {
        font-size: 16px !important;
        line-height: 1.7 !important;
        /* 详情页正文行高增大，更易读 */
    }
    
    /* 确保文本内容不会超出 */
    p, .bio-text, .project-detail-text, .list-detail, .now-list, .done-list {
        max-width: 100% !important;
        word-wrap: break-word;
        /* 允许长单词换行 */
        overflow-wrap: break-word;
        /* 现代浏览器支持 */
        box-sizing: border-box;
    }
    
    /* 确保标题不会超出 */
    h3, h4, .project-title, .detail-subtitle {
        max-width: 100% !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }
    
    h3 {
        font-size: 1.5em !important;
        /* 约24px */
    }
    
    h4, .detail-subtitle {
        font-size: 1.25em !important;
        /* 约20px */
    }
    
    .project-title {
        font-size: 1.75em !important;
        /* 约28px */
    }
    
    .list-detail li,
    .now-list li,
    .done-list li {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    /* 项目详情区域的内容 */
    #project-content-wrapper,
    #project-content-body {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* 列表项内容 */
    .list-detail li,
    .now-list li,
    .done-list li {
        max-width: 100% !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* 确保链接不会超出屏幕 */
    a, .nav-item, .tab-item {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    /* 确保项目信息头部不会超出 */
    .project-info-header {
        max-width: 100% !important;
        width: 100% !important;
        flex-wrap: wrap;
        box-sizing: border-box;
    }
    
    /* 确保所有容器都有正确的盒模型 */
    .content-block,
    .visual-showcase .content-block {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    
    /* 确保项目标题不会超出 */
    #portfolio h3 {
        max-width: 100% !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* ❗ Project Detail 覆盖整个移动视口 ❗ */
    #project-detail {
        position: fixed;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        z-index: 9999;
        overflow-y: auto !important;
        /* 隐藏滚动条但保持滚动功能 */
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE and Edge */
        padding: var(--padding-unit);
    }

    /* Webkit browsers (Chrome, Safari, Opera) */
    #project-detail::-webkit-scrollbar {
        display: none !important;
    }

    #project-content-wrapper {
        max-width: 100%;
        margin: 0;
    }
    
    /* 移动端显示返回和分享按钮容器 */
    .project-detail-actions {
        display: flex !important;
        position: fixed;
        top: 15px;
        left: 15px;
        right: 15px;
        z-index: 10000;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    
    /* 移动端显示返回按钮 - 去掉圆形框 */
    .back-to-portfolio {
        display: flex !important;
        /* 使用flex确保对齐 */
        align-items: center !important;
        /* 垂直居中 */
        background-color: transparent !important;
        /* 透明背景 */
        backdrop-filter: none !important;
        /* 去掉毛玻璃效果 */
        padding: 10px 0 !important;
        /* 统一内边距 */
        height: 40px !important;
        /* 与分享按钮高度一致 */
        border: none !important;
        /* 去掉边框 */
        border-radius: 0 !important;
        /* 去掉圆角 */
        font-size: 0.95em !important;
        font-weight: 500;
        color: var(--text-color);
        text-decoration: none;
        box-shadow: none !important;
        /* 去掉阴影 */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        /* 弹性过渡 */
        line-height: 1 !important;
        /* 确保行高一致 */
    }
    
    .back-to-portfolio:active {
        transform: scale(0.95);
        /* 点击时缩小，有反馈感 */
        opacity: 0.7;
    }
    
    /* 分享按钮 */
    .share-button {
        display: flex !important;
        align-items: center !important;
        /* 垂直居中 */
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        /* 与返回按钮高度一致 */
        background-color: transparent;
        border: none;
        border-radius: 50%;
        font-size: 1.3em !important;
        color: var(--text-color);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0 !important;
        line-height: 1 !important;
        /* 确保行高一致 */
    }
    
    .share-button::before {
        display: none;
        /* 不在CSS中添加内容，使用HTML中的文字 */
    }
    
    .share-button:active {
        transform: scale(0.9);
        opacity: 0.7;
    }
    
    /* 项目详情正文增加留白空间 */
    #project-content-wrapper {
        padding-top: 60px;
        /* 为返回按钮留出空间 */
        padding-left: 0 !important;
        /* 与about/now保持一致，去除默认内边距 */
        max-width: 700px !important;
        /* 与about/now的max-width保持一致 */
    }
    
    #project-content-body {
        margin-top: 20px;
        /* 增加顶部留白 */
        padding-left: 0 !important;
        /* 确保与about/now对齐 */
    }
    
    #project-title {
        margin-top: 20px;
        /* 标题下方留白 */
    }
    
    /* 确保详情页所有文本内容的左边距与about/now一致 */
    #project-content-wrapper {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    #project-content-wrapper p,
    #project-content-wrapper h3,
    #project-content-wrapper h4,
    #project-content-wrapper ul,
    #project-content-wrapper .project-detail-text,
    #project-content-wrapper .list-detail {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    /* 分享按钮样式修正 */
    .share-button::before {
        display: none;
        /* 不在CSS中添加内容，使用HTML中的文字 */
    }