/* ========================================
   灵柏科技 - 全站响应式优化
   Mobile-first responsive styles for all screen sizes
   ======================================== */

/* === Very Small Phones (< 360px) === */
@media (max-width: 359px) {
    .container { padding: 0 16px; }
    .section { padding: 48px 0; }
    .section-header { margin-bottom: 36px; }
    .section-title { font-size: 1.5rem; }
    .section-desc { font-size: 0.9rem; }

    /* Logo */
    .logo { font-size: 1.1rem; gap: 8px; }
    .logo-icon, .logo-img { width: 34px; height: 34px; border-radius: 8px; }
    .logo-sub { display: none; }

    /* Nav */
    .btn-consult { display: none; }
    .theme-toggle { width: 38px; height: 38px; }

    /* Hero */
    .hero-content h1 { font-size: 1.8rem; }
    .hero-content h1 .line-2 { font-size: 0.55em; letter-spacing: 2px; }
    .hero-desc { font-size: 0.92rem; }
    .hero-badge { font-size: 0.75rem; padding: 6px 14px; }
    .hero-stats { gap: 16px; margin-top: 36px; }
    .stat-number { font-size: 1.6rem; }
    .stat-label { font-size: 0.75rem; }
    .hero-actions { gap: 10px; }
    .hero-actions .btn-primary,
    .hero-actions .btn-secondary { padding: 10px 20px; font-size: 0.85rem; }

    /* Cards */
    .glass-card { padding: 20px 16px; }
    .service-card { padding: 24px 16px; }
    .service-icon { width: 52px; height: 52px; font-size: 1.3rem; }
    .ai-card { padding: 24px 16px; }
    .product-card-body { padding: 16px; }
    .news-card-body { padding: 16px; }

    /* Product Map (immersive) */
    .project-map-canvas-wrap { min-height: 400px; }
    .map-hub-inner { width: 60px; height: 60px; }
    .map-hub-name { font-size: 0.85rem; }
    .map-hub-sub { font-size: 0.55rem; }
    .node-lg .project-node-inner { width: 60px; height: 60px; font-size: 1.2rem; }
    .node-md .project-node-inner { width: 50px; height: 50px; font-size: 1rem; }
    .node-sm .project-node-inner { width: 42px; height: 42px; font-size: 0.9rem; }
    .project-node-label { font-size: 0.72rem; }
    .project-node-family { font-size: 0.55rem; }
    .project-sub-node { min-width: 48px; height: 22px; font-size: 0.55rem; padding: 0 8px; border-radius: 11px; }

    /* Brand Reveal */
    .brand-reveal-logo { width: 120px; height: 120px; margin-bottom: 20px; }
    .brand-reveal-logo-img { width: 100px; height: 100px; }
    .brand-reveal-title { letter-spacing: 4px; }
    .brand-reveal-sub { font-size: 0.7rem; letter-spacing: 3px; }
    .brand-reveal-tagline { font-size: 0.8rem; letter-spacing: 1px; }

    /* About */
    .about-features { grid-template-columns: 1fr; }
    .about-feature-item { padding: 10px 12px; font-size: 0.82rem; }

    /* Process */
    .process-step-num { width: 44px; height: 44px; font-size: 1rem; }
    .process-step h4 { font-size: 0.88rem; }
    .process-step p { font-size: 0.75rem; }

    /* Footer */
    .footer-grid { gap: 24px; }
    .footer-brand p { font-size: 0.82rem; }
    .footer-col h4 { font-size: 0.9rem; }
    .footer-col a { font-size: 0.82rem; }
    .footer-bottom { font-size: 0.75rem; flex-direction: column; text-align: center; }

    /* Page Hero */
    .page-hero { min-height: 28vh; padding-top: 60px; }
    .page-hero h1 { font-size: 1.6rem; }

    /* Pages */
    .solution-detail-card { padding: 20px 16px; }
    .solution-icon-lg { width: 52px; height: 52px; font-size: 1.4rem; }
    .solution-header h3 { font-size: 1.15rem; }
    .solution-feature-item { padding: 12px; }
    .contact-form { padding: 20px 16px; }
    .contact-info-item { padding: 16px; }
    .contact-map { aspect-ratio: 16/9; }

    /* Products */
    .pdc-header { padding: 16px; }
    .pdc-body { padding: 16px; }
    .pdc-icon { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 12px; }
    .pdc-header h3 { font-size: 0.95rem; }
    .pdc-features li { font-size: 0.82rem; }
    .pdc-tags .tag { font-size: 0.7rem; padding: 3px 10px; }

    /* Buttons */
    .btn-primary, .btn-secondary { padding: 10px 20px; font-size: 0.85rem; }

    /* Chat Widget */
    .chat-widget { bottom: 80px; right: 16px; }
    .chat-btn { width: 48px; height: 48px; font-size: 1.2rem; }

    /* Back to Top */
    .back-to-top { bottom: 20px; right: 16px; width: 42px; height: 42px; font-size: 1.1rem; }

    /* Modal */
    .modal { padding: 24px 20px; max-width: 95%; }
    .modal h3 { font-size: 1.2rem; }

    /* Team */
    .team-card { padding: 20px 16px; }
    .team-avatar { width: 60px; height: 60px; font-size: 1.4rem; }
    .team-card .bio { font-size: 0.78rem; }

    /* Values */
    .value-card { padding: 24px 16px; }
    .value-icon { width: 48px; height: 48px; font-size: 1.3rem; }

    /* Partners */
    .partner-item { padding: 12px 20px; font-size: 0.78rem; }
}

/* === Small Phones (360px - 479px) === */
@media (min-width: 360px) and (max-width: 479px) {
    .container { padding: 0 18px; }
    .section { padding: 56px 0; }
    .section-header { margin-bottom: 40px; }
    .section-title { font-size: 1.65rem; }

    .logo { font-size: 1.15rem; }
    .logo-icon, .logo-img { width: 36px; height: 36px; }

    .hero-content h1 { font-size: 2rem; }
    .hero-desc { font-size: 0.95rem; }
    .hero-stats { gap: 20px; margin-top: 40px; }
    .stat-number { font-size: 1.8rem; }

    .project-map-canvas-wrap { min-height: 440px; }
    .node-lg .project-node-inner { width: 68px; height: 68px; font-size: 1.4rem; }
    .node-md .project-node-inner { width: 56px; height: 56px; font-size: 1.15rem; }
    .node-sm .project-node-inner { width: 48px; height: 48px; font-size: 1rem; }
    .project-node-label { font-size: 0.78rem; }
    .project-sub-node { min-width: 54px; height: 24px; font-size: 0.6rem; }

    .brand-reveal-logo { width: 140px; height: 140px; margin-bottom: 24px; }
    .brand-reveal-logo-img { width: 120px; height: 120px; }

    .page-hero h1 { font-size: 1.8rem; }

    .process-step-num { width: 48px; height: 48px; }

    .footer-bottom { font-size: 0.78rem; }
}

/* === Medium Phones (480px - 767px) === */
@media (min-width: 480px) and (max-width: 767px) {
    .section { padding: 64px 0; }
    .section-header { margin-bottom: 48px; }

    .hero-content h1 { font-size: 2.4rem; }
    .hero-desc { font-size: 1.05rem; }
    .hero-stats { gap: 28px; margin-top: 48px; }
    .stat-number { font-size: 2rem; }

    .project-map-canvas-wrap { min-height: 520px; }
    .map-hub-inner { width: 80px; height: 80px; }
    .node-lg .project-node-inner { width: 80px; height: 80px; font-size: 1.6rem; }
    .node-md .project-node-inner { width: 68px; height: 68px; font-size: 1.3rem; }
    .node-sm .project-node-inner { width: 56px; height: 56px; font-size: 1.1rem; }
    .project-node-label { font-size: 0.85rem; }
    .project-sub-node { min-width: 60px; height: 26px; font-size: 0.65rem; }

    .brand-reveal-logo { width: 160px; height: 160px; margin-bottom: 28px; }
    .brand-reveal-logo-img { width: 140px; height: 140px; }

    .process-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }

    .page-hero { min-height: 32vh; }
    .page-hero h1 { font-size: 2rem; }
}

/* === Tablets (768px - 1023px) === */
@media (min-width: 768px) and (max-width: 1023px) {
    .container { padding: 0 32px; }

    .hero-content h1 { font-size: 2.8rem; }
    .hero-desc { font-size: 1.1rem; }
    .hero-stats { gap: 36px; }

    .project-map-canvas-wrap { min-height: 650px; }
    .node-lg .project-node-inner { width: 96px; height: 96px; font-size: 1.8rem; }
    .node-md .project-node-inner { width: 80px; height: 80px; font-size: 1.5rem; }
    .node-sm .project-node-inner { width: 66px; height: 66px; font-size: 1.2rem; }
    .project-node-label { font-size: 0.9rem; }
    .project-sub-node { min-width: 66px; height: 28px; font-size: 0.68rem; }

    .map-hub-inner { width: 100px; height: 100px; }

    .brand-reveal-logo { width: 130px; height: 130px; }
    .brand-reveal-logo-img { width: 110px; height: 110px; }

    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .ai-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .products-showcase { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .news-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    .page-hero h1 { font-size: 2.6rem; }

    .process-grid { grid-template-columns: repeat(3, 1fr); }
}

/* === Large screens but narrow viewport (1024px - 1279px) === */
@media (min-width: 1024px) and (max-width: 1279px) {
    .hero-content { max-width: 650px; }
    .hero-content h1 { font-size: 3rem; }

    .project-map-canvas-wrap { min-height: 720px; }

    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .news-grid { grid-template-columns: repeat(3, 1fr); }
}

/* === Landscape phone (height < 500px, any width) === */
@media (max-height: 500px) and (orientation: landscape) {
    .home-hero { min-height: auto; padding-top: 60px; padding-bottom: 40px; }
    .hero-content h1 { font-size: 1.8rem; }
    .hero-content h1 .line-2 { font-size: 0.5em; }
    .hero-desc { font-size: 0.85rem; margin-bottom: 20px; }
    .hero-stats { gap: 16px; margin-top: 20px; flex-direction: row; }
    .stat-number { font-size: 1.4rem; }
    .hero-badge { margin-bottom: 16px; }
    .brand-reveal { padding: 20px; }
    .brand-reveal-logo { width: 60px; height: 60px; margin-bottom: 10px; }
    .brand-reveal-logo-img { width: 48px; height: 48px; }
    .brand-reveal-title { font-size: 1.4rem; letter-spacing: 4px; }
    .brand-reveal-sub { font-size: 0.6rem; }
    .brand-reveal-tagline { display: none; }
    .brand-reveal-progress { bottom: 20px; }
    .page-hero { min-height: auto; padding: 40px 0; }
}

/* === Ultra-wide screens (> 1600px) === */
@media (min-width: 1600px) {
    :root { --max-width: 1400px; }
    .hero-content { max-width: 900px; }
    .hero-content h1 { font-size: 4.5rem; }
    .project-map-canvas-wrap { min-height: 850px; }
}

/* === Touch device optimizations === */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .glass-card:hover { transform: none; }
    .service-card:hover { transform: none; }
    .product-card:hover { transform: none; }
    .news-card:hover { transform: none; }
    .ai-card:hover { transform: none; }
    .team-card:hover { transform: none; }
    .value-card:hover { transform: none; }

    /* Larger touch targets */
    .nav-links a { padding: 12px 20px; font-size: 1rem; }
    .btn-primary, .btn-secondary { padding: 14px 28px; }
    .filter-btn { padding: 12px 28px; }
    .page-btn { width: 48px; height: 48px; }
    .theme-toggle { width: 48px; height: 48px; }
    .menu-toggle { width: 48px; height: 48px; }

    /* No cursor grab on touch */
    .project-node { cursor: default; }
}

/* === Safe area insets (notch phones) === */
@supports (padding: env(safe-area-inset-top)) {
    .navbar { padding-top: calc(16px + env(safe-area-inset-top)); }
    .back-to-top { bottom: calc(32px + env(safe-area-inset-bottom)); }
    .chat-widget { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* === Accessibility: reduced motion === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* === Mobile product map container overflow fix === */
@media (max-width: 767px) {
    .project-map-canvas-wrap {
        overflow: hidden;
        position: relative;
    }
    .project-map-canvas-wrap .map-hub {
        position: absolute !important;
        z-index: 5;
    }
    .project-map-canvas-wrap .project-node {
        will-change: transform, left, top;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    /* Ensure sub-nodes stay within view */
    .project-sub-node {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 80px;
    }
    /* Compact sub-node orbit radius on small screens */
    @media (max-width: 400px) {
        .project-sub-node {
            font-size: 0.5rem;
            padding: 0 6px;
            min-width: 40px;
            max-width: 60px;
        }
    }
}

/* === Navbar mobile hamburger fix === */
@media (max-width: 767px) {
    .nav-links {
        display: none;
    }
    .nav-links.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-primary, #0a0a0f);
        padding: 20px;
        gap: 12px;
        border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        z-index: 100;
    }
    .nav-links.active a {
        padding: 12px 0;
        font-size: 1rem;
    }
    .menu-toggle {
        display: flex !important;
    }
}

/* === Ensure images are responsive === */
@media (max-width: 767px) {
    img {
        max-width: 100%;
        height: auto;
    }
    .hero-visual {
        display: none;
    }
}

/* === Fix footer on mobile === */
@media (max-width: 479px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-brand {
        order: -1;
    }
}

/* === Page hero mobile adjustments === */
@media (max-width: 479px) {
    .page-hero {
        padding-top: 80px;
        padding-bottom: 40px;
    }
    .page-hero .container {
        padding: 0 16px;
    }
}

/* === Products grid mobile === */
@media (max-width: 479px) {
    .products-showcase,
    .products-detail-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}