/* ========================================
   川渝好门户 - 统一响应式适配样式
   版本：1.0
   更新日期：2026-08-10
   ======================================== */

/* ========== 基础响应式变量 ========== */
:root {
    /* 断点定义 */
    --breakpoint-xs: 480px;   /* 超小屏手机 */
    --breakpoint-sm: 576px;   /* 小屏手机 */
    --breakpoint-md: 768px;   /* 平板 */
    --breakpoint-lg: 992px;   /* 小屏桌面 */
    --breakpoint-xl: 1200px;  /* 大屏桌面 */
    --breakpoint-xxl: 1400px; /* 超大屏 */
}

/* ========== 通用响应式工具类 ========== */

/* 隐藏元素 */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* 文本对齐 */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* 弹性布局方向 */
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }

/* ========== 移动端优先策略 ========== */

/* 默认样式针对移动设备 */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* ========== 超小屏 (≤480px) ========== */
@media (max-width: var(--breakpoint-xs)) {
    /* 容器宽度 */
    .wp, .container, .main-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* 字体大小调整 */
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }
    
    /* 按钮尺寸 */
    .btn, button {
        min-height: 40px !important;
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    
    /* 输入框 */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
        font-size: 16px !important; /* 防止 iOS 缩放 */
        padding: 10px !important;
    }
    
    /* 图片自适应 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* 表格横向滚动 */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* 导航菜单 */
    .nav-menu, .navbar-nav {
        flex-direction: column !important;
    }
    
    /* 网格布局 */
    .row-cols-1 > * {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ========== 小屏手机 (≤576px) ========== */
@media (max-width: var(--breakpoint-sm)) {
    /* 侧边栏隐藏或底部显示 */
    .sidebar, .aside {
        display: none !important;
    }
    
    /* 主内容区全宽 */
    .main-content, .content-area {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* 卡片堆叠 */
    .card-grid, .item-list {
        grid-template-columns: 1fr !important;
    }
}

/* ========== 平板 (≤768px) ========== */
@media (max-width: var(--breakpoint-md)) {
    /* 三列变两列 */
    .grid-3col, .three-columns {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* 两列变一列 */
    .grid-2col, .two-columns {
        grid-template-columns: 1fr !important;
    }
    
    /* 头部导航简化 */
    .header-nav, .top-nav {
        display: none;
    }
    
    .mobile-nav-toggle {
        display: block !important;
    }
    
    /* 统计信息单列 */
    .stats-row, .counter-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    /* 表单布局 */
    .form-row, .form-group {
        flex-direction: column !important;
    }
    
    .form-row .form-control {
        width: 100% !important;
    }
}

/* ========== 小屏桌面 (≤992px) ========== */
@media (max-width: var(--breakpoint-lg)) {
    /* 侧边栏可折叠 */
    .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 280px;
        background: #fff;
        z-index: 1000;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    
    .sidebar.active {
        left: 0;
    }
    
    /* 遮罩层 */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    /* 主内容区调整 */
    .main-content {
        margin-left: 0 !important;
    }
}

/* ========== 大屏桌面 (≤1200px) ========== */
@media (max-width: var(--breakpoint-xl)) {
    /* 最大宽度限制 */
    .container, .wp {
        max-width: 1140px !important;
    }
}

/* ========== 论坛页面响应式 ========== */
@media (max-width: var(--breakpoint-md)) {
    /* 论坛板块列表 */
    .forum-item {
        flex-wrap: wrap;
    }
    
    .forum-stats, .forum-lastpost {
        display: none;
    }
    
    /* 帖子列表 */
    .thread-row {
        flex-wrap: wrap;
    }
    
    .thread-nums .views, .thread-last {
        display: none;
    }
    
    /* 热门话题网格 */
    .hot-threads-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: var(--breakpoint-xs)) {
    /* 论坛导航 */
    .forum-nav-menu {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }
    
    .forum-nav-item span {
        display: none;
    }
    
    .forum-nav-icon {
        margin: 0;
    }
}

/* ========== 微博页面响应式 ========== */
@media (max-width: var(--breakpoint-md)) {
    /* 三栏变两栏 */
    .wb-main {
        grid-template-columns: 200px 1fr !important;
    }
    
    /* 右侧边栏隐藏 */
    .wb-right-sidebar {
        display: none;
    }
}

@media (max-width: var(--breakpoint-sm)) {
    /* 两栏变单栏 */
    .wb-main {
        grid-template-columns: 1fr !important;
    }
    
    .wb-sidebar {
        display: none;
    }
    
    .wb-compose {
        margin: 0 !important;
    }
    
    /* 微博内容 */
    .wb-feed-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    
    .wb-feed-actions {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ========== 个人空间页面响应式 ========== */
@media (max-width: var(--breakpoint-md)) {
    /* 个人资料卡片 */
    .profile-card-header {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-info-section {
        margin-top: 20px;
    }
    
    /* 资料网格 */
    .profile-grid-section {
        grid-template-columns: 1fr !important;
    }
    
    /* 统计数据 */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: var(--breakpoint-xs)) {
    /* 统计数据单列 */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* 操作按钮 */
    .profile-actions-section {
        flex-direction: column;
    }
    
    .profile-actions-section .btn {
        width: 100%;
    }
}

/* ========== 门户页面响应式 ========== */
@media (max-width: var(--breakpoint-md)) {
    /* 新闻列表 */
    .news-list {
        grid-template-columns: 1fr !important;
    }
    
    /* 分类导航 */
    .category-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ========== 通用组件响应式 ========== */

/* 模态框 */
.modal-dialog {
    margin: 10px !important;
}

@media (max-width: var(--breakpoint-sm)) {
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    .modal-content {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* 分页 */
.pagination {
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: var(--breakpoint-xs)) {
    .pagination a,
    .pagination span {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
        padding: 0 8px;
    }
}

/* 面包屑 */
.breadcrumb {
    flex-wrap: wrap;
    font-size: 13px;
}

/* 工具提示 */
.tooltip {
    max-width: 200px;
}

/* ========== 触摸优化 ========== */
@media (hover: none) and (pointer: coarse) {
    /* 增大点击区域 */
    a, button, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 移除悬停效果 */
    .btn:hover,
    a:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ========== 打印样式 ========== */
@media print {
    .no-print,
    .sidebar,
    .navbar,
    .footer,
    .mobile-nav,
    .back-to-top {
        display: none !important;
    }
    
    .main-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
}

/* ========== 横屏模式优化 ========== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    /* 横屏时减少垂直空间占用 */
    .header,
    .footer {
        padding: 10px 0;
    }
    
    .hero-section,
    .banner-section {
        padding: 20px 0;
    }
}

/* ========== 高对比度模式支持 ========== */
@media (prefers-contrast: high) {
    :root {
        --cy-primary: #d32f2f;
        --cy-text: #000;
        --cy-border: #000;
    }
    
    .btn,
    a {
        border: 2px solid currentColor;
    }
}

/* ========== 暗色模式支持 ========== */
@media (prefers-color-scheme: dark) {
    :root {
        --cy-bg: #1a1a2e;
        --cy-bg-card: #16213e;
        --cy-text: #e8e8e8;
        --cy-text-secondary: #b8b8b8;
        --cy-border: rgba(255, 255, 255, 0.1);
    }
    
    .card,
    .bm,
    .modal-content {
        background: var(--cy-bg-card);
    }
}

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