/* ============================================
   DevStudio Pro - 响应式样式
   移动优先，5个断点
   ============================================ */

/* ---- 极小屏 < 480px ---- */
@media (max-width: 479px) {
    :root {
        --text-5xl: 2rem;
        --text-4xl: 1.75rem;
        --text-3xl: 1.5rem;
        --text-2xl: 1.25rem;
    }

    .container { padding-left: var(--space-4); padding-right: var(--space-4); }

    /* Hero */
    .hero-section { padding: 100px 0 60px; min-height: auto; }
    .hero-title { font-size: 1.75rem; }
    .hero-subtitle { font-size: 0.9rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { justify-content: center; }

    /* 导航 - 始终显示汉堡按钮 */
    .menu-toggle { display: flex; }

    /* 统计 */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

    /* 服务 */
    .services-grid { grid-template-columns: 1fr; }

    /* 项目 */
    .projects-grid { grid-template-columns: 1fr; }

    /* 团队 */
    .team-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
    .team-social { opacity: 1; transform: none; } /* 移动端默认显示社交链接 */

    /* 页脚 */
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }

    /* CTA */
    .cta-actions { flex-direction: column; align-items: stretch; }

    /* 面包屑 */
    .breadcrumbs ol { font-size: var(--text-xs); }

    /* 玻璃卡片内边距缩小 */
    .glass-card { padding: 1.25rem; border-radius: var(--radius-lg); }

    /* 按钮 */
    .btn-lg { padding: 0.75rem 1.5rem; font-size: var(--text-sm); }

    /* 评价轮播 */
    .slider-controls { flex-wrap: wrap; }
}

/* ---- 手机 < 768px ---- */
@media (max-width: 767px) {
    /* 导航栏：显示汉堡菜单，隐藏桌面菜单 */
    .nav-menu { display: none; }
    .nav-cta { display: none; }
    .mode-toggle { display: none; }
    .menu-toggle { display: flex; }

    /* Hero */
    .hero-content { padding: 0 var(--space-6); }
    .hero-stats { flex-direction: column; gap: 1.5rem; }

    /* 统计 */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .stat-item { padding: 1.25rem 0.75rem; }
    .stat-number { font-size: var(--text-2xl); }

    /* 服务 */
    .services-grid { grid-template-columns: 1fr; gap: 1rem; }
    .service-card { padding: 1.5rem; }

    /* 项目 */
    .projects-grid { grid-template-columns: 1fr; gap: 1rem; }

    /* 技术栈 */
    .tech-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .tech-item { padding: 1rem; }

    /* 团队 */
    .team-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

    /* 评价 */
    .testimonial-text { font-size: var(--text-base); }

    /* 页脚 */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

    /* 文章 */
    .entry-content { padding: 1.5rem 0; }
    .post-navigation { flex-direction: column; gap: 1rem; }
    .post-nav-link { max-width: 100%; }
    .author-card { flex-direction: column; text-align: center; }
    .entry-meta { font-size: var(--text-xs); }

    /* 筛选标签 */
    .filter-tabs { gap: 0.4rem; }
    .filter-tab { padding: 0.35rem 0.85rem; font-size: var(--text-xs); }

    /* 搜索结果 */
    .search-result-item { flex-direction: column; }
    .result-thumbnail { width: 100%; height: 160px; }

    /* 返回顶部 */
    .back-to-top { bottom: 1rem; right: 1rem; width: 38px; height: 38px; }

    /* Section 内边距调整 */
    .section { padding: 4rem 0; }
    .section-header h2 { font-size: var(--text-2xl); }
}

/* ---- 平板 ≥ 768px ---- */
@media (min-width: 768px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
    .tech-grid { grid-template-columns: repeat(3, 1fr); }
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}

/* ---- 小桌面 ≥ 1024px ---- */
@media (min-width: 1024px) {
    /* 显示桌面导航 */
    .nav-menu { display: flex; }
    .nav-cta { display: block; }
    .mode-toggle { display: flex; }
    .menu-toggle { display: none; }

    /* Hero */
    .hero-title { font-size: clamp(2.5rem, 5vw, 4.5rem); }

    /* 统计 */
    .stats-grid { grid-template-columns: repeat(4, 1fr); }

    /* 服务 */
    .services-grid { grid-template-columns: repeat(3, 1fr); }

    /* 项目 */
    .projects-grid { grid-template-columns: repeat(2, 1fr); }

    /* 技术 */
    .tech-grid { grid-template-columns: repeat(4, 1fr); }

    /* 团队 */
    .team-grid { grid-template-columns: repeat(3, 1fr); }

    /* 页脚 */
    .footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); }

    /* Section */
    .section { padding: 6rem 0; }
}

/* ---- 大桌面 ≥ 1280px ---- */
@media (min-width: 1280px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .projects-grid { grid-template-columns: repeat(3, 1fr); }
    .tech-grid { grid-template-columns: repeat(5, 1fr); }
    .team-grid { grid-template-columns: repeat(4, 1fr); }

    .container { padding-left: var(--space-8); padding-right: var(--space-8); }
}

/* ---- 超大屏 ≥ 1536px ---- */
@media (min-width: 1536px) {
    .container { max-width: var(--container-2xl); }
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .projects-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 触控设备优化 ---- */
@media (hover: none) and (pointer: coarse) {
    /* 项目卡片在触控设备上默认显示叠加信息 */
    .project-card:hover .project-overlay { opacity: 0; }
    .project-overlay { opacity: 1; }

    /* 增大点击区域 */
    .nav-menu > li > a { padding: 0.6rem 1.25rem; }
    .filter-tab { padding: 0.5rem 1.5rem; }
    .btn { min-height: 44px; min-width: 44px; }
}

/* ---- 打印样式 ---- */
@media print {
    .site-header, .back-to-top, .mobile-menu-panel,
    .mobile-menu-overlay, .scroll-indicator,
    #particles-canvas, .hero-glow { display: none !important; }

    body { background: #fff; color: #000; }
    .gradient-text { -webkit-text-fill-color: #000; }
    .glass-card { background: transparent; border: 1px solid #ddd; backdrop-filter: none; }

    .hero-section { min-height: auto; padding: 2rem 0; }
    .section { padding: 2rem 0; }
}
