/**
 * 雪境·智慧VR全景平台 - 响应式样式
 * 版本: 2.0
 * 更新日期: 2026-04-16
 * 版权由内蒙古智慧同城信息科技有限责任公司 张瑞雪 所有
 */

/* ==================== 响应式断点变量 ==================== */
:root {
    /* 断点定义 */
    --bp-mobile: 576px;
    --bp-tablet: 768px;
    --bp-desktop: 992px;
    --bp-wide: 1200px;
    --bp-ultra: 1400px;

    /* PC端容器宽度 */
    --container-max: 1400px;
    --container-padding: 24px;

    /* 移动端容器宽度 */
    --container-padding-mobile: 16px;
}

/* ==================== PC端基础布局 (默认) ==================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* PC端网格系统 */
.grid {
    display: grid;
    gap: var(--space-lg);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* PC端Flex布局 */
.flex { display: flex; }
.flex-col { flex-direction: row; }
.flex-wrap { flex-wrap: nowrap; }

/* PC端间距 */
.section-padding {
    padding: var(--space-2xl) 0;
}

/* PC端字体大小 */
.text-hero {
    font-size: clamp(2.5rem, 5vw, 4rem);
}

.text-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.text-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
}

/* PC端导航 */
.main-header {
    height: 70px;
}

.nav-links {
    display: flex;
    gap: var(--space-lg);
}

.nav-link {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-md);
}

/* PC端卡片 */
.card {
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

/* PC端按钮 */
.btn {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-md);
}

.btn-lg {
    padding: var(--space-lg) var(--space-2xl);
    font-size: var(--font-size-lg);
}

/* PC端表单 */
.form-input {
    padding: var(--space-md);
    font-size: var(--font-size-md);
}

/* PC端侧边栏 */
.sidebar {
    width: 280px;
    flex-shrink: 0;
}

/* PC端内容区 */
.content-area {
    flex: 1;
    min-width: 0;
}

/* PC端表格 */
.table-responsive {
    overflow-x: auto;
}

/* PC端模态框 */
.modal {
    max-width: 600px;
}

.modal-lg {
    max-width: 900px;
}

/* ==================== 平板端适配 (768px - 991px) ==================== */
@media screen and (max-width: 991px) {
    :root {
        --container-padding: 20px;
        --header-height: 60px;
    }

    .container {
        padding: 0 var(--container-padding);
    }

    /* 平板网格 */
    .grid-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }

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

    /* 平板导航 */
    .main-header {
        height: 60px;
    }

    .nav-links {
        gap: var(--space-md);
    }

    .nav-link {
        padding: var(--space-sm);
        font-size: var(--font-size-sm);
    }

    /* 平板间距 */
    .section-padding {
        padding: var(--space-xl) 0;
    }

    /* 平板侧边栏 */
    .sidebar {
        width: 240px;
    }

    /* 隐藏移动端元素 */
    .mobile-menu-toggle {
        display: flex;
    }
}

/* ==================== 大手机端适配 (576px - 767px) ==================== */
@media screen and (max-width: 767px) {
    :root {
        --container-padding: 16px;
    }

    .container {
        padding: 0 var(--container-padding-mobile);
    }

    /* 手机网格 */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    /* 手机Flex */
    .flex-col-mobile {
        flex-direction: column;
    }

    .flex-wrap-mobile {
        flex-wrap: wrap;
    }

    /* 手机导航 - 汉堡菜单 */
    .main-header {
        height: 60px;
    }

    .nav-links {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-card);
        flex-direction: column;
        padding: var(--space-lg);
        gap: var(--space-md);
        z-index: 1000;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-link {
        padding: var(--space-md);
        font-size: var(--font-size-lg);
        border-bottom: 1px solid var(--border-color);
    }

    /* 汉堡菜单按钮 */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: var(--space-sm);
        background: none;
        border: none;
        cursor: pointer;
    }

    .menu-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--text-primary);
        transition: var(--transition-normal);
    }

    /* 手机间距 */
    .section-padding {
        padding: var(--space-lg) 0;
    }

    /* 手机卡片 */
    .card {
        padding: var(--space-md);
        border-radius: var(--radius-md);
    }

    /* 手机按钮 */
    .btn {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-sm);
    }

    .btn-lg {
        padding: var(--space-md) var(--space-lg);
        font-size: var(--font-size-md);
    }

    /* 手机表单 */
    .form-input {
        padding: var(--space-sm);
        font-size: var(--font-size-sm);
    }

    /* 手机侧边栏 - 隐藏 */
    .sidebar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform var(--transition-normal);
    }

    .sidebar.active {
        display: block;
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* 手机表格 */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 手机模态框 */
    .modal,
    .modal-lg {
        max-width: 100%;
        margin: var(--space-md);
        max-height: 90vh;
        overflow-y: auto;
    }

    /* 手机字体 */
    .text-hero {
        font-size: 2rem;
    }

    .text-title {
        font-size: 1.5rem;
    }

    .text-subtitle {
        font-size: 1rem;
    }

    /* 内容网格单列 */
    .content-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== 小手机端适配 (< 576px) ==================== */
@media screen and (max-width: 575px) {
    /* 小手机网格 */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: 1fr;
    }

    /* 小手机间距 */
    .section-padding {
        padding: var(--space-md) 0;
    }

    /* 小手机字体 */
    .text-hero {
        font-size: 1.75rem;
    }

    .text-title {
        font-size: 1.25rem;
    }

    /* 小手机隐藏元素 */
    .hide-mobile {
        display: none !important;
    }

    /* Logo文字隐藏 */
    .logo-text {
        display: none;
    }
}

/* ==================== 超大屏幕适配 (> 1400px) ==================== */
@media screen and (min-width: 1400px) {
    .container {
        max-width: 1600px;
    }

    /* 超大屏网格 */
    .grid-cols-xl-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .grid-cols-xl-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    /* 超大屏字体 */
    .text-hero {
        font-size: 4.5rem;
    }
}

/* ==================== 打印样式 ==================== */
@media print {
    .no-print {
        display: none !important;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    body {
        background: white;
    }

    .main-header,
    .main-footer {
        display: none;
    }
}

/* ==================== 工具类 ==================== */

/* 显示/隐藏 */
.hide { display: none !important; }
.show { display: block !important; }

@media screen and (max-width: 767px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
}

@media screen and (min-width: 768px) {
    .hide-desktop { display: none !important; }
    .show-desktop { display: block !important; }
}

/* 文本截断 */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 滚动 */
.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.scroll-y {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 固定定位 */
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* 全宽 */
.w-full { width: 100%; }
.h-full { height: 100%; }

/* 弹性布局工具 */
.flex-1 { flex: 1; }
.flex-none { flex: none; }
.flex-auto { flex: 1 1 auto; }

/* 间距工具类 */
.gap-0 { gap: 0; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* FlexGrow */
.flex-grow { flex-grow: 1; }

/* 对齐工具 */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* 安全区域适配 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .safe-area-top {
        padding-top: env(safe-area-inset-top);
    }
}

/* 横屏适配 */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .main-header {
        height: 50px;
    }

    .main-content {
        padding-top: 50px;
    }
}