/* ============================================================
 * 众泰云 响应式适配 CSS (responsive.css)
 * 用途：为所有静态HTML页面提供统一的移动端适配
 * 依赖：无（独立使用）
 * ============================================================ */

/* ==================== 响应式断点 ==================== */
/* 手机: <=480px | 小平板: <=768px | 平板: <=1024px | 桌面: >1024px */

/* ==================== 安全区域适配 ==================== */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* ==================== 基础响应式重置 ==================== */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    max-width: 100vw;
    overflow-x: hidden;
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

/* ==================== 图片自适应 ==================== */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* ==================== 表格横向滚动 ==================== */
table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 表格包裹容器 */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border-radius: 8px;
}

.table-responsive table {
    display: table;
    min-width: 600px;
}

/* ==================== 移动端导航折叠 ==================== */
/* 隐藏桌面导航，显示汉堡菜单 */
@media (max-width: 480px) {
    .desktop-nav,
    .nav-links,
    .topnav-links,
    .topnav__nav {
        display: none !important;
    }

    .mobile-menu-btn,
    .topnav-hamburger,
    .topnav__hamburger {
        display: flex !important;
    }

    /* 移动端菜单展开 */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
    }

    .mobile-menu-overlay.active {
        display: block;
    }

    .mobile-menu-panel {
        position: fixed;
        top: 0;
        right: -300px;
        width: 280px;
        max-width: 80vw;
        height: 100%;
        background: #fff;
        z-index: 9999;
        transition: right var(--duration-slow) ease;
        overflow-y: auto;
        padding: 20px;
    }

    .mobile-menu-panel.active {
        right: 0;
    }
}

/* ==================== 字体大小调整 ==================== */
@media (max-width: 480px) {
    html {
        font-size: 15px;
    }

    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.125rem !important; }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.375rem !important; }
    h3 { font-size: 1.125rem !important; }
}

/* ==================== 容器自适应 ==================== */
@media (max-width: 480px) {
    .container,
    .page-container,
    .tiance-container,
    [class*="container"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
    }
}

/* ==================== 网格系统响应式 ==================== */
@media (max-width: 1024px) {
    .grid-4, [class*="grid-cols-4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-3, [class*="grid-cols-3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .grid-2, .grid-3, .grid-4,
    [class*="grid-cols-2"],
    [class*="grid-cols-3"],
    [class*="grid-cols-4"] {
        grid-template-columns: 1fr !important;
    }

    /* Flex 换行 */
    .flex-row, [class*="flex-row"] {
        flex-direction: column !important;
    }

    /* 两列布局变单列 */
    .two-col,
    .sidebar-layout,
    .pc-layout {
        flex-direction: column !important;
    }

    /* 侧边栏隐藏或折叠 */
    .sidebar {
        display: none !important;
    }
}

/* ==================== 卡片和间距调整 ==================== */
@media (max-width: 480px) {
    .card, [class*="card"] {
        border-radius: 12px !important;
        margin-bottom: 12px;
    }

    /* 减小内边距 */
    .section, [class*="section"] {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .hero, [class*="hero"] {
        padding-top: 60px !important;
        padding-bottom: 40px !important;
    }

    /* 按钮全宽 */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== 模态框适配 ==================== */
@media (max-width: 480px) {
    .modal-content,
    .modal-body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    .modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
}

/* ==================== 页脚适配 ==================== */
@media (max-width: 480px) {
    footer, .footer, .site-footer {
        padding: 32px 16px !important;
    }

    footer .grid, .site-footer__grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* ==================== 表单适配 ==================== */
@media (max-width: 480px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px !important; /* 防止iOS缩放 */
    }

    .form-row, [class*="form-row"] {
        flex-direction: column !important;
        gap: 12px !important;
    }
}

/* ==================== 底部安全区域 ==================== */
.safe-bottom-spacer {
    height: var(--safe-bottom);
    min-height: 16px;
}

/* ==================== 横屏提示（可选） ==================== */
@media (max-width: 480px) and (orientation: landscape) {
    .landscape-notice {
        display: block;
    }
}

/* ==================== 打印样式 ==================== */
@media print {
    .desktop-nav,
    .mobile-nav,
    .topnav,
    .site-footer,
    .mobile-bottom-nav,
    .topnav__hamburger,
    .btn {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}

/* ==================== 暗色模式响应式增强 ==================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --safe-top: env(safe-area-inset-top, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ==================== 无障碍：减少动画 ==================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== 触控优化 ==================== */
@media (hover: none) and (pointer: coarse) {
    /* 增大触控目标 */
    a, button, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* 移除悬停效果 */
    :hover {
        transition: none;
    }
}

/* ==================== 内联 grid 小屏塌陷（批次4 P2 响应式修复） ====================
 * 覆盖以下模板中写死的内联 grid-template-columns，使其在小屏(<=768px)塌陷为单列：
 *   - templates/pc/coding/project.php 194 (300px 1fr 320px) / 371 (1fr 360px)
 *   - templates/pc/ai/agent-project.php 99 (1fr 380px) / 103 (repeat(4,1fr))
 *   - templates/pc/ai/agent-avatar.php 55 (2fr 1fr) / 107 (repeat(3,1fr))
 * 使用 !important 覆盖内联样式。
 */
@media (max-width: 768px) {
    [style*="grid-template-columns: 300px 1fr 320px"],
    [style*="grid-template-columns: 1fr 360px"],
    [style*="grid-template-columns: 1fr 380px"],
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
    }
}