/* ============================================
   YZ-HK 响应式样式 - 手机版/平板
   ============================================ */

@media (max-width: 1024px) {
    .header-actions { display: none; }
    .mobile-menu-toggle { display: flex; }

    .hero-bg { min-height: 420px; }
    .hero-title { font-size: 2.2rem; }
    .hero-content { padding: 60px 0; }
    .stats-grid { gap: 36px; }
    .stat-number { font-size: 1.8rem; }

    .advantages-grid { grid-template-columns: repeat(2, 1fr); }

    .app-showcase-grid { gap: 36px; }
    .app-showcase-image img { max-height: 400px; }
    .app-showcase-title { font-size: 1.7rem; }
    .app-features { gap: 14px; }
    .app-feature-item { padding: 16px 14px; }

    .plans-grid { grid-template-columns: repeat(2, 1fr); }
    .tiers-grid { grid-template-columns: repeat(2, 1fr); }
    .tier-card,
    .tiers-grid .tier-card { 
        width: 100%; 
        max-width: 100%; 
        border: 2px solid var(--gray-200) !important;
    }
    .news-grid { grid-template-columns: repeat(2, 1fr); }

    .single-layout { grid-template-columns: 1fr 280px; }
    .posts-grid, .archive-grid, .search-grid { grid-template-columns: repeat(2, 1fr); }

    .about-layout { grid-template-columns: 1fr 260px; }
    .contact-layout { grid-template-columns: 1fr; }
    .contact-sidebar { order: -1; }

    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .page-layout { grid-template-columns: 1fr 280px; }
}

@media (max-width: 768px) {
    html { font-size: 15px; }
    .container { padding: 0 16px; }

    /* Header */
    .header-top-bar { display: none; }
    .header-main { position: sticky; top: 0; }
    .header-inner { padding: 10px 0; }
    .site-branding .custom-logo { max-height: 36px; }
    .main-navigation { display: none; }

    /* Hero */
    .hero-bg { min-height: 300px; }
    .hero-title { font-size: 1.7rem; }
    .hero-subtitle { font-size: .9rem; }
    .hero-content { padding: 30px 0; text-align: center; }
    .hero-actions { justify-content: center; gap: 10px; }
    .btn-hero { padding: 10px 24px; font-size: .9rem; }
    .btn-hero-outline { padding: 9px 20px; font-size: .85rem; }
    .hero-stats { padding: 16px 0; }
    .stats-grid { gap: 10px; }
    .stat-item { 
        padding: 14px 16px; 
        min-width: auto;
        border-radius: 8px;
    }
    .stat-number { font-size: 1.4rem; }
    .stat-label { font-size: .7rem; margin-top: 6px; letter-spacing: normal; }
    .hero-slider { min-height: 260px; }
    .hero-slider .slide-item img { min-height: 280px; }
    .hero-slider .hero-text-overlay .hero-title { font-size: 1.6rem; }
    .btn-purchase { padding: 12px 28px; font-size: .9rem; }
    .btn-purchase-lg { padding: 16px 40px; font-size: 1.05rem; }
    .single-purchase-bottom { padding: 20px 0 12px; }

    /* Sections */
    .section-title { font-size: 1.5rem; }
    .section-header { margin-bottom: 32px; }

    .advantages-section { padding: 48px 0; }
    .advantages-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .advantage-card { padding: 24px 14px; }
    .advantage-icon { width: 48px; height: 48px; }
    .advantage-icon i { font-size: 1.2rem; }

    .app-showcase-section { padding: 60px 0 48px; }
    .app-showcase-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .app-showcase-image { order: -1; }
    .app-showcase-image img { max-height: 320px; }
    .app-showcase-placeholder { width: 180px; height: 340px; margin: 0 auto; }
    .app-showcase-title { font-size: 1.5rem; }
    .app-showcase-subtitle { max-width: 100%; margin-left: auto; margin-right: auto; }
    .app-features { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .app-feature-item { 
        flex-direction: column !important; 
        text-align: center !important; 
        align-items: center !important; 
        padding: 20px 14px !important;
        border-radius: var(--radius) !important;
        background: var(--gray-100) !important;
        border: 1px solid transparent !important;
        transition: var(--transition) !important;
    }
    .app-feature-item:hover {
        border-color: var(--primary) !important;
        transform: translateY(-4px) !important;
        box-shadow: var(--shadow-lg) !important;
        background: #fff !important;
    }
    .app-feature-icon { 
        transform: none !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, rgba(26,110,240,.1), rgba(26,110,240,.2)) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 12px !important;
    }
    .app-feature-icon i {
        font-size: 1.2rem !important;
        color: var(--primary) !important;
    }
    .app-feature-info h4,
    .app-feature-info p { 
        text-align: center !important; 
    }
    .app-feature-info h4 {
        font-size: 1rem !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
        color: var(--gray-900) !important;
    }
    .app-feature-info p {
        font-size: .85rem !important;
        color: var(--gray-600) !important;
        line-height: 1.5 !important;
    }

    .products-section { padding: 48px 0; }
    .plans-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .plan-card-header { padding: 16px 14px 8px; }
    .plan-card-body { padding: 0 14px 12px; }
    .plan-card-footer { padding: 12px 14px; flex-direction: column; gap: 8px; align-items: flex-start; }

    .agent-tiers-section { padding: 48px 0; }
    .tiers-grid { grid-template-columns: 1fr; gap: 16px; }
    .tier-card,
    .tiers-grid .tier-card,
    .tiers-grid .tier-card:first-child,
    .tiers-grid .tier-card:nth-child(2),
    .tiers-grid .tier-card:last-child,
    .tiers-grid .tier-card.tier-card-popular { 
        padding: 28px 20px !important; 
        border: 2px solid var(--gray-200) !important; 
        border-radius: 16px !important; 
        background: #fff !important;
        width: 100% !important; 
        max-width: 100% !important; 
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .news-section { padding: 48px 0; }
    .news-grid { grid-template-columns: 1fr; }

    .partners-section { padding: 40px 0; }
    .partners-grid { gap: 20px; }
    .partner-item { width: 100px; }

    .cta-section { padding: 48px 0; }
    .cta-content h2 { font-size: 1.5rem; }

    /* Single */
    .single-layout { grid-template-columns: 1fr; }
    .single-sidebar { display: none; }
    .single-article { padding: 20px 16px; border-radius: 0; }
    .single-thumbnail { margin: -20px -16px 24px; border-radius: 0; }
    .single-featured-image { max-height: 280px; }
    .single-title { font-size: 1.35rem; }
    .single-price { font-size: 1.5rem; }
    .plan-info-row { flex-direction: column; }
    .plan-info-row .plan-info-label { width: 100%; }
    .breadcrumbs { display: none; }
    .single-post-nav { grid-template-columns: 1fr; }
    .comment-respond { padding: 20px 16px; }
    .comment-list .children { margin-left: 20px; padding-left: 12px; border-left-width: 2px; }
    .comment-list .comment-author img { width: 40px; height: 40px; }
    .single-search-input { padding: 12px 100px 12px 40px; font-size: .88rem; }
    .single-search-btn { padding: 8px 18px; font-size: .82rem; }
    .single-search-icon { left: 12px; font-size: .9rem; }

    /* Archive */
    .posts-grid, .archive-grid, .search-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .post-card-content { padding: 14px 14px 16px; }

    /* Pages */
    .page-layout { grid-template-columns: 1fr; }
    .page-article { padding: 20px 16px; }
    .page-sidebar { display: none; }

    /* About */
    .about-layout { grid-template-columns: 1fr; }
    .about-sidebar { display: none; }
    .about-content { padding: 20px 16px; }
    .about-features { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .about-stats { gap: 20px; }

    /* Contact */
    .contact-cards { grid-template-columns: 1fr; }
    .contact-card { padding: 20px 16px; }
    .contact-form .form-row { grid-template-columns: 1fr; }
    .contact-form-area { padding: 20px 16px; }

    /* Footer */
    .footer-widgets { padding: 40px 0 20px !important; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .footer-desc { max-width: 100% !important; }
    .footer-col-nav .footer-menu { 
        display: grid !important; 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 8px !important; 
    }
    .footer-col-nav .footer-menu li { margin-bottom: 0 !important; }
    .footer-col-nav .footer-menu li a { 
        display: block !important; 
        padding: 10px 14px !important; 
        background: rgba(255,255,255,.06) !important; 
        border-radius: 8px !important; 
        text-align: center !important; 
        border: 1px solid rgba(255,255,255,.08) !important;
    }
    .footer-col-nav .footer-menu li a:hover { padding-left: 14px !important; background: rgba(255,255,255,.1) !important; }

    /* Mobile bottom bar */
    .mobile-bottom-bar { display: flex !important; }
    .mbb-item { 
        flex: 1 !important; 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: center !important; 
        justify-content: center !important; 
        gap: 2px !important; 
        padding: 4px 0 !important; 
        color: var(--gray-500) !important; 
        font-size: .65rem !important; 
        min-width: 0 !important; 
        width: 25% !important; 
        max-width: 25% !important; 
    }
    .mbb-item i, .mbb-item .mbb-icon { 
        font-size: 1.1rem !important; 
        width: 22px !important; 
        height: 22px !important; 
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important; 
    }
    .mbb-item .mbb-icon { 
        width: 22px !important; 
        height: 22px !important; 
        object-fit: contain !important; 
    }
    .site-footer { padding-bottom: 70px; }

    /* No results / 404 */
    .error-404-content { padding: 40px 20px; }
    .error-404-title { font-size: 4rem; }
}

@media (max-width: 480px) {
    html { font-size: 14px; }
    
    /* Hero 超小屏幕优化 */
    .hero-bg { min-height: 280px; }
    .hero-title { font-size: 1.5rem; }
    .hero-subtitle { font-size: .85rem; }
    .hero-content { padding: 24px 0; }
    .hero-actions { gap: 8px; flex-direction: column; }
    .hero-actions .btn { width: 100%; max-width: 240px; }
    .btn-hero { padding: 9px 20px; font-size: .85rem; }
    .btn-hero-outline { padding: 8px 16px; font-size: .8rem; }
    .hero-stats { padding: 12px 0; }
    .stats-grid { gap: 8px; }
    .stat-item { 
        padding: 12px 14px; 
        min-width: auto;
        border-radius: 6px;
    }
    .stat-number { font-size: 1.3rem; }
    .stat-label { font-size: .65rem; margin-top: 4px; }
    .hero-slider { min-height: 240px; }
    
    /* 手机底部栏小屏幕优化 */
    .mobile-bottom-bar { display: flex !important; }
    .mbb-item { 
        flex: 1 !important; 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: center !important; 
        justify-content: center !important; 
        gap: 2px !important; 
        padding: 4px 0 !important; 
        color: var(--gray-500) !important; 
        font-size: .6rem !important; 
        min-width: 0 !important; 
        width: 25% !important; 
        max-width: 25% !important; 
    }
    .mbb-item i, .mbb-item .mbb-icon { 
        font-size: 1rem !important; 
        width: 20px !important; 
        height: 20px !important; 
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important; 
    }
    .mbb-item .mbb-icon { 
        width: 20px !important; 
        height: 20px !important; 
        object-fit: contain !important; 
    }

    .hero-bg { min-height: 280px; }
    .hero-title { font-size: 1.5rem; }
    .hero-subtitle { font-size: .85rem; }
    .hero-content { padding: 30px 0; }
    .hero-actions { flex-direction: column; gap: 10px; }
    .btn-hero, .btn-hero-outline { width: 100%; justify-content: center; }

    .stats-grid { gap: 12px; }
    .stat-number { font-size: 1.3rem; }
    .stat-label { font-size: .7rem; }

    .advantages-grid { grid-template-columns: repeat(2, 1fr); }

    .app-showcase-section { padding: 48px 0 40px; }
    .app-showcase-image img { max-height: 240px; }
    .app-showcase-placeholder { width: 140px; height: 260px; }
    .app-showcase-title { font-size: 1.3rem; }
    .app-features { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .app-feature-item { 
        padding: 18px 12px !important;
    }

    .plans-grid { grid-template-columns: 1fr; }
    .posts-grid, .archive-grid, .search-grid { grid-template-columns: 1fr; }

    .section-title { font-size: 1.3rem; }

    .slider-prev, .slider-next { width: 32px; height: 32px; font-size: .8rem; }
    .slider-prev { left: 8px; }
    .slider-next { right: 8px; }

    .about-features { grid-template-columns: 1fr; }
    .about-stats { flex-direction: column; align-items: center; }

    .footer-bottom-inner { flex-direction: column; align-items: center; text-align: center; }

    .mobile-menu-panel { width: 280px; }
    
    /* 热门套餐手机端优化 */
    .footer-col-products .footer-menu-desktop { display: none !important; }
    .footer-col-products .footer-hot-plans-mobile { display: flex !important; }
    .footer-hot-plans { gap: 12px !important; }
    .footer-hot-plan-item { 
        padding: 14px 16px !important; 
        border-radius: 12px !important; 
    }
    .hot-plan-icon { 
        width: 44px !important; height: 44px !important; min-width: 44px !important;
    }
    .hot-plan-icon i { font-size: 1.2rem !important; }
    .hot-plan-title { font-size: .88rem !important; }
    .hot-plan-price { font-size: .78rem !important; }
}

/* 横屏手机 */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-bg { min-height: 240px; }
    .hero-slider { min-height: 240px; }
    .hero-slider .slide-item img { min-height: 240px; }
    .hero-content { padding: 24px 0; }
}