/**
 * HaiQi Website - Mobile Optimization Enhancements
 * Version: 20260822
 * Purpose: Provide production-grade mobile UX without modifying original style.css
 */

/* ========== 1. Hero Section Mobile Layout (900px and below) ========== */
@media (max-width: 900px) {
    /* Keep hero-visual visible but shrink and right-align */
    .hero-visual {
        display: flex !important;
        width: 45% !important;
        max-width: 300px !important;
        margin-left: auto !important;
        animation: none !important;
    }
    
    /* Left-alignment text area becomes more compact */
    .hero-content {
        gap: 20px !important;
        padding-top: 100px !important;
    }
}

/* ========== 2. Restore Mobile CTA Button in Hamburger Menu (768px and below) ========== */
@media (max-width: 768px) {
    .btn-nav {
        display: inline-flex !important;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }
    
    /* Hide primary CTA from hero section to avoid redundancy */
    .hero-btns .btn-primary {
        display: none;
    }
}

/* ========== 3. Touch Target Optimization (Universal) ========== */
.btn,
.ft-btn,
.service-card,
.case-card,
.cf-tag,
.contact-card,
.btn-outline,
.btn-primary {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
}

/* Force button padding for clickable areas */
.btn span,
.ft-btn span,
.service-card h3,
.case-card h4 {
    padding: 8px 12px;
    display: block;
}

/* Make touch targets generous within cards */
.service-card:hover,
.service-card:active {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

/* Case card touch enhancement */
.case-card {
    position: relative;
    overflow: visible;
}

.case-info {
    padding-bottom: 12px !important;
    min-height: 60px;
}

/* ========== 4. Media Query Refinements by Device Size ========== */

/* iPhone SE / Small phones (375px) */
@media (max-width: 375px) {
    .section {
        padding: 32px 0;
    }
    
    .case-card {
        min-height: 260px;
    }
    
    .service-card {
        padding: 16px 12px;
        font-size: 14px;
    }
    
    .footer-qrcodes {
        flex-direction: column;
        align-items: center;
    }
    
    .qr-item img {
        width: 80px;
        height: 80px;
    }
    
    .qr-item span {
        font-size: 10px;
    }
}

/* Standard phones (414px) */
@media (max-width: 414px) {
    .hero-line1 {
        font-size: 22px;
    }
    
    .hero-line2 {
        font-size: 24px;
    }
    
    .h-stat {
        margin: 4px 0;
    }
}

/* Tablet range (up to 768px) */
@media (max-width: 768px) {
    /* Footer QR codes and copy centered */
    .footer-content {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 24px !important;
    }
    
    .footer-logo {
        justify-content: center !important;
    }
    
    .footer-desc {
        max-width: none !important;
        text-align: center !important;
    }
    
    .footer-nav ul {
        justify-content: center !important;
    }
    
    .footer-qrcodes {
        justify-content: center !important;
    }
}

/* ========== 5. Mobile Case CTA Full-Width Promotion ========== */
@media (max-width: 768px) {
    .case-cta {
        display: block !important;
        width: 100% !important;
        background: #00d4ff !important;
        color: #fff !important;
        border-radius: 6px !important;
        padding: 14px 16px !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3) !important;
        margin-top: 8px !important;
        text-align: center !important;
    }
    
    .case-cta:hover {
        background: #00b8e6 !important;
        transform: translateY(-1px);
    }
}

/* ========== 6. Demand Form Mobile Fix ========== */
@media (max-width: 768px) {
    .demand-form input[type="text"],
    .demand-form input[type="email"],
    .demand-form input[type="tel"],
    .demand-form textarea,
    .demand-form select {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }
    
    .demand-form .form-group {
        margin-bottom: 16px !important;
    }
    
    .demand-form .form-row {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    /* Submit button minimum height */
    .demand-form button[type="submit"] {
        min-height: 48px !important;
        height: auto !important;
        line-height: 1.2 !important;
    }
    
    /* Remove horizontal scroll prevention hacks */
    body.demand-page {
        overflow-x: visible !important;
        max-width: 100vw !important;
    }
}

/* ========== 7. Smooth Scroll Behavior Enhancement ========== */
@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
    }
    
    /* Prevent rubber-banding on iOS */
    body {
        overscroll-behavior-y: contain;
    }
}

/* ========== 8. Loading State Indicators ========== */
.btn:loading,
.ft-btn:loading {
    position: relative;
    pointer-events: none;
}

.btn:loading::after,
.ft-btn:loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========== 9. Focus States Accessibility ========== */
@media (any-hover: hover) {
    .btn:focus,
    .ft-btn:focus,
    a:focus {
        outline: 2px solid #00d4ff;
        outline-offset: 4px;
    }
}

/* Ensure focus works for keyboard navigation */
*:focus-visible {
    outline: 2px solid #00d4ff;
    outline-offset: 2px;
}


/* ============================================================
   PC 留客增强 20260822
   B4: 首屏"免费询价"主按钮呼吸光晕 + 响应说明小字（仅 PC，尊重 prefers-reduced-motion）
   B1: 案例详情弹窗底部转化引导条 .cm-cta-bar（main.js 动态插入，仅 PC 显示）
   ============================================================ */
.hero-cta-wrap { position: relative; display: inline-block; }
.hero-cta-note { display: none; }

@media (min-width: 769px) {
    .hero-cta-note {
        display: block; position: absolute; top: 100%; left: 0; width: 100%;
        margin-top: 8px; text-align: center; white-space: nowrap;
        font-size: 12px; letter-spacing: 0.5px;
        color: rgba(0, 212, 255, 0.78);
        pointer-events: none;
        animation: fadeUp 0.8s ease 1.2s both;
    }
    .hero-cta-main { animation: heroCtaBreath 5s ease-in-out 2s infinite; }
    /* 悬停时停用光晕动画，让位于 .btn-primary:hover 自身阴影 */
    .hero-cta-main:hover { animation: none; }
}
/* 每 5 秒一个周期：仅周期前 22% 轻微发光，其余时间静止（轻呼吸） */
@keyframes heroCtaBreath {
    0%, 22%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
    10% { box-shadow: 0 0 0 8px rgba(0, 212, 255, 0.16), 0 0 24px rgba(0, 212, 255, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-cta-main, .hero-cta-main:hover { animation: none; }
    .hero-cta-note { animation: none; }
}

/* B1: 案例弹窗 cm-info 底部转化引导条（≤768px 隐藏，不影响移动端弹窗与触摸滑动） */
.cm-cta-bar { display: none; }
@media (min-width: 769px) {
    .cm-cta-bar {
        display: flex; align-items: center; justify-content: center;
        margin-top: 18px; padding: 13px 20px;
        background: linear-gradient(135deg, #0088cc, #00d4ff);
        color: #fff; text-decoration: none;
        font-size: 15px; font-weight: 600; border-radius: var(--radius);
        transition: transform 0.25s, box-shadow 0.25s;
    }
    .cm-cta-bar:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 212, 255, 0.3); }
    .cm-cta-bar b { font-size: 17px; font-weight: 700; margin: 0 2px; }
}


/* ============================================================
   10. 手机端 Hero 蓝图卡片居中修复（20260822d）
   ------------------------------------------------------------
   背景：style.css ≤900px 把 .hero-content 改为纵向堆叠并把
   .hero-visual 设为 display:none；本文件 ≤900px 又用
   display:flex !important 把它重新显示，但同时设 width:45% +
   margin-left:auto，在纵向堆叠的 .hero-content 里把蓝图卡片挤到
   右侧约 45%，导致手机端卡片只占右半屏、左半屏空白。
   修复：≤768px（手机）让 .hero-visual 单列全宽并居中、蓝图自适应，
   不再右挤留白。仅作用于 ≤768px，不影响 ≥769px（PC/平板）。
   ============================================================ */
@media (max-width: 768px) {
    .hero-visual {
        display: flex !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }
    .blueprint {
        width: 100% !important;
        max-width: 340px !important;
        height: auto !important;
    }
    .hero-content {
        gap: 28px !important;
    }
}