/**
 * 0shequcn 响应式样式
 * 北天咨询服务平台前端升级
 */

/* ==================== 移动端基础适配 ==================== */

/* 触摸优化 */
@media (hover: none) and (pointer: coarse) {
    * {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .btn-tech:hover,
    .btn-outline:hover {
        transform: none;
        box-shadow: none;
    }

    .tech-card:hover {
        transform: none;
    }

    .tech-card:hover img {
        transform: none;
    }
}

/* ==================== 手机端 (< 576px) ==================== */

@media (max-width: 575.98px) {
    /* 字号适配 */
    :root {
        --text-5xl: 28px;
        --text-4xl: 24px;
        --text-3xl: 22px;
        --text-2xl: 20px;
    }

    /* 布局调整 */
    .tc-main {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
        padding-bottom: 80px; /* 底部固定栏占位 */
    }

    .tc-gridbox {
        margin: 0 0 var(--space-4) 0;
    }

    /* 网格改为单列 */
    .tech-grid-4,
    .tech-grid-3,
    .tech-grid-2 {
        grid-template-columns: 1fr;
    }

    /* 导航 */
    .navbar-brand {
        font-size: var(--text-lg);
    }

    .navbar-nav > li > a {
        padding: var(--space-3) var(--space-4);
    }

    /* 移动端底部固定操作栏 */
    .mobile-fixed-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--white);
        padding: var(--space-3) var(--space-4);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: var(--z-sticky);
        display: flex;
        gap: var(--space-3);
    }

    .mobile-fixed-bottom .btn-tech,
    .mobile-fixed-bottom .btn-outline {
        flex: 1;
    }

    /* 隐藏PC端元素 */
    .hide-mobile {
        display: none !important;
    }

    /* 图片全宽 */
    .tech-card-image {
        aspect-ratio: 16 / 9;
    }

    /* 区块标题 */
    .tech-section-header {
        margin-bottom: var(--space-8);
    }

    .tech-section-title {
        font-size: var(--text-2xl);
    }

    .tech-section-subtitle {
        font-size: var(--text-sm);
    }

    /* 面包屑 */
    .tech-breadcrumb {
        font-size: var(--text-xs);
        overflow-x: auto;
        white-space: nowrap;
    }

    /* 标签页 */
    .tech-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tech-tab {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
        white-space: nowrap;
    }

    /* 分页 */
    .tech-pagination {
        gap: var(--space-1);
    }

    .tech-pagination-item {
        min-width: 36px;
        height: 36px;
        font-size: var(--text-xs);
    }

    /* 模态框适配 */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
    }

    .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }

    /* 商品详情页适配 */
    .item-gallery {
        margin-left: calc(-1 * var(--space-3));
        margin-right: calc(-1 * var(--space-3));
        border-radius: 0;
    }

    .item-info {
        padding: var(--space-4);
    }

    .item-price {
        font-size: var(--text-3xl);
    }

    /* 专家卡片 */
    .expert-card-body {
        padding: var(--space-4);
    }

    /* 侧边栏 */
    .sidebar-nav {
        display: none;
    }

    .sidebar-nav.mobile-open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        background: var(--white);
        z-index: var(--z-modal);
        padding: var(--space-6);
        overflow-y: auto;
        box-shadow: var(--shadow-2xl);
    }

    /* 汉堡菜单按钮 */
    .hamburger {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        cursor: pointer;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--neutral-700);
        transition: all var(--transition-normal);
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* 关闭遮罩 */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: calc(var(--z-modal) - 1);
    }

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

    /* 时间线适配 */
    .tech-timeline {
        padding-left: var(--space-6);
    }

    .tech-timeline::before {
        left: 3px;
    }

    .tech-timeline-dot {
        left: calc(-1 * var(--space-6) + 1px);
    }

    /* 统计卡片 */
    .tech-stat-card {
        padding: var(--space-5);
    }

    .tech-stat-number {
        font-size: var(--text-4xl);
    }

    /* 筛选器 */
    .tech-filter-group {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-2);
        -webkit-overflow-scrolling: touch;
    }

    .tech-filter-tag {
        flex-shrink: 0;
    }
}

/* ==================== 大手机 (576px - 767px) ==================== */

@media (min-width: 576px) and (max-width: 767.98px) {
    .tech-grid-4,
    .tech-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .hide-tablet {
        display: none !important;
    }
}

/* ==================== 平板 (768px - 991px) ==================== */

@media (min-width: 768px) and (max-width: 991.98px) {
    .tech-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .tc-main .col-md-9 {
        width: 100%;
    }

    .tc-main .col-md-3 {
        width: 100%;
    }

    /* 侧边栏变为顶部导航 */
    .sidebar-nav {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .hide-tablet-down {
        display: none !important;
    }
}

/* ==================== 桌面端 (992px - 1199px) ==================== */

@media (min-width: 992px) and (max-width: 1199.98px) {
    .tech-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .tc-main .container {
        max-width: 960px;
    }
}

/* ==================== 大屏 (>= 1200px) ==================== */

@media (min-width: 1200px) {
    .tc-main .container {
        max-width: 1140px;
    }

    .tech-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==================== 超大屏 (>= 1400px) ==================== */

@media (min-width: 1400px) {
    .tc-main .container {
        max-width: 1320px;
    }
}

/* ==================== 打印样式 ==================== */

@media print {
    .navbar,
    .footer,
    .mobile-fixed-bottom,
    .btn,
    .tech-social,
    .tech-pagination {
        display: none !important;
    }

    .tc-main {
        padding: 0;
    }

    .tech-card {
        break-inside: avoid;
    }
}

/* ==================== 横屏手机适配 ==================== */

@media (max-height: 500px) and (orientation: landscape) {
    .mobile-fixed-bottom {
        padding: var(--space-2);
    }

    .tech-section-title {
        font-size: var(--text-xl);
    }
}

/* ==================== 暗黑模式支持 ==================== */

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --card-bg: var(--dark-2);
        --navbar-bg: var(--dark);
        --border-color: rgba(255, 255, 255, 0.1);
        --text-primary: #F1F5F9;
        --text-secondary: #94A3B8;
    }
}

/* ==================== 减少动画模式 ==================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-animate],
    [data-animate-left],
    [data-animate-right] {
        opacity: 1;
        transform: none;
    }
}

/* ==================== 高对比度模式 ==================== */

@media (prefers-contrast: high) {
    :root {
        --border-color: rgba(0, 0, 0, 0.3);
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
    }

    .tech-card {
        border-width: 2px;
        border-color: var(--dark);
    }

    .tech-tab {
        border-bottom: 3px solid transparent;
    }

    .tech-tab.active {
        border-bottom-color: var(--primary);
    }
}

/* ==================== 滚动条美化 (仅桌面端) ==================== */

@media (hover: hover) and (pointer: fine) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: var(--neutral-100);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--neutral-300);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--neutral-400);
    }
}