/**
 * 响应式布局样式
 * 文件: responsive.css
 * 作者: 灵链
 * 日期: 2026-03-27
 * 说明: 适配PC、平板、手机等不同屏幕尺寸
 */

/* ==================== 断点定义 ==================== */
/* 
 * 超大屏幕: >= 1400px (默认)
 * 大屏幕:   >= 1200px
 * 中等屏幕: >= 992px  (平板横屏)
 * 小屏幕:   >= 768px  (平板竖屏)
 * 超小屏幕: < 768px   (手机)
 */

/* ==================== 大屏幕 (1200px - 1399px) ==================== */
@media (max-width: 1399px) {
    .tech-container {
        max-width: 1200px;
        padding: var(--tech-spacing-md);
    }
    
    .tech-swiper-img {
        height: 450px;
    }
}

/* ==================== 中等屏幕 (992px - 1199px) ==================== */
@media (max-width: 1199px) {
    .tech-container {
        max-width: 992px;
    }
    
    /* 调整主内容和侧边栏比例 */
    .tech-col-main {
        flex: 0 0 65%;
        max-width: 65%;
    }
    
    .tech-col-side {
        flex: 0 0 calc(35% - var(--tech-spacing-md));
        max-width: calc(35% - var(--tech-spacing-md));
    }
    
    .tech-swiper-img {
        height: 400px;
    }
    
    /* 缩小卡片标题 */
    .tech-card__title {
        font-size: 16px;
    }
    
    /* 缩小热门资讯缩略图 */
    .tech-hot-thumb {
        width: 70px;
        height: 70px;
    }
}

/* ==================== 平板横屏 (768px - 991px) ==================== */
@media (max-width: 991px) {
    .tech-container {
        max-width: 768px;
        padding: var(--tech-spacing-sm);
    }
    
    /* 调整行间距 */
    .tech-row {
        gap: var(--tech-spacing-md);
    }
    
    /* 调整主内容和侧边栏比例 */
    .tech-col-main {
        flex: 0 0 60%;
        max-width: 60%;
    }
    
    .tech-col-side {
        flex: 0 0 calc(40% - var(--tech-spacing-md));
        max-width: calc(40% - var(--tech-spacing-md));
        position: static; /* 取消粘性定位 */
    }
    
    .tech-swiper-img {
        height: 350px;
    }
    
    /* 缩小轮播导航按钮 */
    .tech-nav-btn {
        width: 40px;
        height: 40px;
    }
    
    .tech-nav-btn::after {
        font-size: 16px;
    }
    
    /* 缩小卡片间距 */
    .tech-card {
        margin-bottom: var(--tech-spacing-sm);
    }
    
    .tech-card__header,
    .tech-card__body {
        padding: var(--tech-spacing-sm);
    }
    
    /* 缩小最新动态标题 */
    .tech-latest-title {
        font-size: 13px;
    }
    
    /* 缩小热门资讯 */
    .tech-hot-thumb {
        width: 60px;
        height: 60px;
    }
    
    .tech-hot-title {
        font-size: 13px;
    }
    
    .tech-hot-desc {
        font-size: 11px;
    }
}

/* ==================== 平板竖屏 (576px - 767px) ==================== */
@media (max-width: 767px) {
    .tech-container {
        max-width: 100%;
        padding: var(--tech-spacing-xs);
    }
    
    /* 改为单列布局 */
    .tech-row {
        flex-direction: column;
        gap: var(--tech-spacing-sm);
    }
    
    .tech-col-main,
    .tech-col-side {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* 轮播图高度调整 */
    .tech-swiper-img {
        height: 300px;
    }
    
    /* 隐藏轮播导航按钮 */
    .tech-nav-btn {
        display: none;
    }
    
    /* 调整轮播分页器 */
    .tech-pagination {
        bottom: 10px !important;
    }
    
    .tech-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }
    
    /* 卡片标题居中 */
    .tech-card__header {
        justify-content: center;
    }
    
    .tech-card__icon {
        display: none; /* 隐藏图标节省空间 */
    }
    
    /* 最新动态简化 */
    .tech-latest-item {
        padding: var(--tech-spacing-xs);
    }
    
    .tech-latest-btn {
        width: 28px;
        height: 28px;
    }
    
    /* 热门资讯简化 */
    .tech-hot-item {
        padding: var(--tech-spacing-xs);
    }
    
    .tech-hot-thumb {
        width: 50px;
        height: 50px;
    }
    
    /* 友情链接简化 */
    .tech-link-item {
        padding: var(--tech-spacing-xs);
    }
    
    .tech-link-icon {
        width: 24px;
        height: 24px;
    }
}

/* ==================== 手机 (< 576px) ==================== */
@media (max-width: 575px) {
    /* 进一步缩小容器内边距 */
    .tech-container {
        padding: 8px;
    }
    
    /* 缩小轮播图高度 */
    .tech-swiper-img {
        height: 250px;
    }
    
    /* 缩小轮播图圆角 */
    .tech-swiper-wrapper,
    .tech-swiper {
        border-radius: var(--tech-radius-sm);
    }
    
    /* 缩小卡片圆角 */
    .tech-card {
        border-radius: var(--tech-radius-sm);
    }
    
    /* 缩小卡片标题 */
    .tech-card__title {
        font-size: 14px;
    }
    
    /* 缩小卡片内边距 */
    .tech-card__header,
    .tech-card__body {
        padding: 10px;
    }
    
    /* 最新动态进一步简化 */
    .tech-latest-title {
        font-size: 12px;
    }
    
    .tech-latest-time {
        font-size: 11px;
    }
    
    .tech-latest-btn {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    
    /* 热门资讯进一步简化 */
    .tech-hot-thumb {
        width: 45px;
        height: 45px;
    }
    
    .tech-hot-title {
        font-size: 12px;
    }
    
    .tech-hot-desc {
        font-size: 10px;
        line-height: 1.3;
    }
    
    /* 友情链接进一步简化 */
    .tech-link-text {
        font-size: 12px;
    }
    
    .tech-link-icon {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    
    /* 缩小间距变量 */
    :root {
        --tech-spacing-xs: 6px;
        --tech-spacing-sm: 10px;
        --tech-spacing-md: 15px;
        --tech-spacing-lg: 20px;
        --tech-spacing-xl: 25px;
    }
}

/* ==================== 超小手机 (< 375px) ==================== */
@media (max-width: 374px) {
    /* 轮播图高度进一步缩小 */
    .tech-swiper-img {
        height: 200px;
    }
    
    /* 卡片标题更小 */
    .tech-card__title {
        font-size: 13px;
    }
    
    /* 热门资讯缩略图更小 */
    .tech-hot-thumb {
        width: 40px;
        height: 40px;
    }
    
    /* 文字更小 */
    .tech-latest-title,
    .tech-hot-title,
    .tech-link-text {
        font-size: 11px;
    }
    
    .tech-latest-time,
    .tech-hot-desc {
        font-size: 10px;
    }
}

/* ==================== 横屏模式优化 ==================== */
@media (max-height: 600px) and (orientation: landscape) {
    /* 横屏时减小轮播图高度 */
    .tech-swiper-img {
        height: 250px;
    }
    
    /* 减小卡片间距 */
    .tech-card {
        margin-bottom: 10px;
    }
    
    /* 减小容器内边距 */
    .tech-container {
        padding: 10px;
    }
}

/* ==================== 触摸设备优化 ==================== */
@media (hover: none) and (pointer: coarse) {
    /* 增大可点击区域 */
    .tech-latest-btn,
    .tech-link-icon {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* 禁用悬停效果，改为点击效果 */
    .tech-card--glow:hover {
        transform: none;
    }
    
    .tech-card--glow:active {
        transform: scale(0.98);
    }
    
    /* 禁用鼠标悬停动画 */
    .tech-latest-item:hover,
    .tech-hot-item:hover,
    .tech-link-item:hover {
        transform: none;
    }
    
    .tech-latest-item:active,
    .tech-hot-item:active,
    .tech-link-item:active {
        transform: scale(0.98);
    }
}

/* ==================== 打印样式 ==================== */
@media print {
    /* 隐藏背景效果 */
    .tech-bg-canvas,
    .tech-particles {
        display: none;
    }
    
    /* 隐藏导航按钮 */
    .tech-nav-btn,
    .swiper-pagination {
        display: none;
    }
    
    /* 移除阴影和发光效果 */
    .tech-card,
    .tech-swiper {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    /* 改为白色背景 */
    body {
        background: white;
        color: black;
    }
    
    .tech-card {
        background: white;
        border: 1px solid #ddd;
    }
    
    /* 文字改为黑色 */
    .tech-card__title,
    .tech-latest-title,
    .tech-hot-title,
    .tech-link-text {
        color: black;
    }
}

/* ==================== 高对比度模式 ==================== */
@media (prefers-contrast: high) {
    :root {
        --tech-primary: #00ffff;
        --tech-secondary: #ff00ff;
        --tech-text-primary: #ffffff;
        --tech-card-border: rgba(255, 255, 255, 0.3);
    }
    
    .tech-card {
        border-width: 2px;
    }
}

/* ==================== 减少动画模式 ==================== */
@media (prefers-reduced-motion: reduce) {
    /* 禁用所有动画 */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    /* 禁用滚动动画 */
    .scroll-animate {
        opacity: 1;
        transform: none;
    }
}

/* ==================== 暗色模式支持 ==================== */
@media (prefers-color-scheme: dark) {
    /* 已经是暗色主题，无需额外调整 */
    /* 如果需要更深的暗色，可以在这里覆盖 */
}

/* ==================== 亮色模式支持 ==================== */
@media (prefers-color-scheme: light) {
    /* 如果用户系统偏好亮色，可以提供亮色主题 */
    /* 暂时保持暗色科技风，不提供亮色版本 */
}

/* ==================== 文章卡片响应式 ==================== */

/* 大屏幕 (1200px - 1399px) */
@media (max-width: 1399px) {
    .tech-article-card__thumb {
        flex: 0 0 180px;
        width: 180px;
        height: 135px;
    }
    
    .tech-article-card__title {
        font-size: 17px;
    }
}

/* 中等屏幕 (992px - 1199px) */
@media (max-width: 1199px) {
    .tech-article-card__thumb {
        flex: 0 0 160px;
        width: 160px;
        height: 120px;
    }
    
    .tech-article-card__title {
        font-size: 16px;
    }
    
    .tech-article-card__desc {
        font-size: 13px;
    }
}

/* 平板横屏 (768px - 991px) */
@media (max-width: 991px) {
    .tech-article-card__inner {
        padding: var(--tech-spacing-sm);
        gap: var(--tech-spacing-sm);
    }
    
    .tech-article-card__thumb {
        flex: 0 0 140px;
        width: 140px;
        height: 105px;
    }
    
    .tech-article-card__title {
        font-size: 15px;
    }
    
    .tech-article-card__desc {
        font-size: 12px;
        -webkit-line-clamp: 2;
    }
    
    .tech-article-card__tag {
        font-size: 11px;
        padding: 3px 8px;
    }
    
    .tech-article-card__meta-item {
        font-size: 12px;
    }
}

/* 平板竖屏 (576px - 767px) */
@media (max-width: 767px) {
    .tech-article-card__inner {
        flex-direction: column;
        gap: var(--tech-spacing-sm);
    }
    
    .tech-article-card__thumb {
        flex: 0 0 auto;
        width: 100%;
        height: 200px;
    }
    
    .tech-article-card__title {
        font-size: 16px;
    }
    
    .tech-article-card__desc {
        font-size: 13px;
        -webkit-line-clamp: 3;
    }
    
    .tech-article-card__meta {
        gap: var(--tech-spacing-sm);
    }
}

/* 手机 (< 576px) */
@media (max-width: 575px) {
    .tech-article-card {
        margin-bottom: var(--tech-spacing-sm);
    }
    
    .tech-article-card__inner {
        padding: var(--tech-spacing-xs);
    }
    
    .tech-article-card__thumb {
        height: 180px;
    }
    
    .tech-article-card__title {
        font-size: 15px;
    }
    
    .tech-article-card__desc {
        font-size: 12px;
    }
    
    .tech-article-card__tag {
        font-size: 10px;
        padding: 2px 6px;
    }
    
    .tech-article-card__meta-item {
        font-size: 11px;
    }
}

/* 超小手机 (< 375px) */
@media (max-width: 374px) {
    .tech-article-card__thumb {
        height: 150px;
    }
    
    .tech-article-card__title {
        font-size: 14px;
    }
    
    .tech-article-card__desc {
        font-size: 11px;
        -webkit-line-clamp: 2;
    }
    
    .tech-article-card__tags {
        gap: 4px;
    }
    
    .tech-article-card__meta {
        gap: var(--tech-spacing-xs);
    }
}