/* =============================================================================
   aboutme — 响应式规则
   全站唯一断点：768px。该值同时出现在 js/main.js 的 MOBILE_QUERY 中，改动需同步。
   ========================================================================== */

@media (max-width: 768px) {

    /* --- 变量覆盖：技能图谱的移动端排版 --- */
    :root {
        --skill-base-font: 0.8rem;
        --skill-scale-1: 1.4;
        --skill-scale-2: 1.15;
        --skill-scale-3: 0.95;
        --skill-scale-4: 0.8;
    }

    /* --- 通用 --- */
    .section { padding: 72px 0; }
    .section-title { font-size: 1.8rem; margin-bottom: 36px; }
    .container { padding: 0 18px; }

    /* --- 导航：折叠为汉堡菜单 --- */
    .nav-toggle { display: flex; }

    .nav-links {
        position: absolute;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 6px 18px 14px;
        background: rgba(10, 10, 10, 0.97);
        border-bottom: 1px solid var(--border-medium);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }

    .navbar.is-open .nav-links {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    .nav-links li { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
    .nav-links li:last-child { border-bottom: none; }
    .nav-links a { display: block; padding: 14px 4px; }

    /* --- Hero --- */
    .hero-title { font-size: 2.6rem; }
    .hero-slogan { font-size: 1.05rem; }
    .hero-subtitle { font-size: 1rem; margin-bottom: 32px; }
    .hero-placeholder { height: 200px; font-size: 1.05rem; }

    /* --- 技能图谱：竖直椭圆需要更高的画布 --- */
    html.gsap-ready .skills-cloud { min-height: 900px; }
    .skill-tag { padding: 8px 14px; }
    html:not(.gsap-ready) .skills-cloud { gap: 10px 12px; }

    /* --- 工作经历：强制单栏（选择器与桌面端同权重，靠加载顺序覆盖，无需 !important） --- */
    .exp-row,
    .exp-row.media-left {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }

    .exp-text,
    .exp-media { width: 100%; min-width: 0; flex: none; }
    .exp-text h3 { font-size: 1.5rem; }
    .job-details { text-align: left; }
    .exp-media img { max-width: 100%; }
    .exp-item { margin-bottom: 64px; }

    /* --- 精选项目 --- */
    .projects-grid { grid-template-columns: 1fr; gap: 20px; }

    /* --- 教育 --- */
    .education-card { padding: 28px 20px; }
    .education-card h3 { font-size: 1.5rem; }
    .honor-list { gap: 14px; font-size: 1rem; }
    .edu-gallery { grid-template-columns: 1fr; gap: 20px; }

    /* --- 页尾 --- */
    .footer h2 { font-size: 1.6rem; }
    .email-link { font-size: 1.15rem; }

    /* --- 页尾彩蛋 --- */
    .egg-section { padding: 0 0 56px; }
    .egg-card { padding: 26px 20px; border-radius: 14px; }
    .egg-title { font-size: 1.3rem; letter-spacing: 2px; }
    .egg-lead { font-size: 0.9rem; }
    .egg-address { font-size: 0.9rem; padding: 8px 14px; }
    /* 两个按钮各占一半，指头好点（flex-basis: 0 才能等宽，auto 会按文案长度分配） */
    .egg-enter,
    .egg-copy { flex: 1 1 0; text-align: center; }

    /* --- 项目详情弹窗：小屏占满可用宽度，收紧内边距并提高可滚动高度 --- */
    .modal { padding: 16px; }
    .modal-panel {
        max-height: 88vh;
        padding: 26px 20px;
        border-radius: 14px;
    }
    .modal-body { padding-right: 4px; }
    .modal-body h3 { font-size: 1.3rem; margin-bottom: 16px; }
    .modal-close { top: 10px; right: 10px; width: 32px; height: 32px; font-size: 1.3rem; }
}