/* ============================================================
   川渝好门户 - 全站统一响应式适配样式
   版本：2.0
   更新日期：2026-09-09
   覆盖范围：门户首页、论坛、新闻、房产、招聘、二手、游戏等全站
   ============================================================ */

/* ========== 1. 设计令牌（断点定义） ========== */
:root {
    --bp-xs: 480px;    /* 超小屏手机 */
    --bp-sm: 576px;    /* 小屏手机 */
    --bp-md: 768px;    /* 平板 */
    --bp-lg: 992px;    /* 小屏桌面 */
    --bp-xl: 1200px;   /* 大屏桌面 */
    --bp-xxl: 1400px;  /* 超大屏 */
}

/* ========== 2. 通用响应式工具类 ========== */
.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; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-1 { flex: 1; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.overflow-hidden { overflow: hidden !important; }

/* ========== 3. 移动端优先基础 ========== */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* 防止 iOS 输入框缩放 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    font-size: 16px !important;
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    a, button, input, select, textarea, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 禁用悬停效果，改为点击反馈 */
    .cy-card:hover,
    .news-card:hover,
    .forum-item:hover,
    .merchant-card:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    
    a:active, button:active, .cy-btn:active {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

/* ========== 4. 超小屏 (≤480px) ========== */
@media (max-width: var(--bp-xs)) {
    /* 容器 */
    .wp, .container, .main-container, .wrap {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* 字体 */
    h1 { font-size: 22px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
    h4 { font-size: 14px !important; }
    body { font-size: 13px !important; }
    
    /* 按钮 */
    .cy-btn, .btn, button, input[type="submit"] {
        padding: 10px 16px !important;
        font-size: 14px !important;
        min-height: 40px;
    }
    
    /* 卡片 */
    .cy-card { margin-bottom: 12px; }
    .cy-card-body { padding: 12px !important; }
    
    /* 表格 */
    table { display: block; overflow-x: auto; white-space: nowrap; }
    
    /* 网格 - 单列 */
    .cy-grid-2, .cy-grid-3, .cy-grid-4, .cy-grid-5, .cy-grid-6, .cy-grid-8 {
        grid-template-columns: 1fr !important;
    }
    
    /* 分页 */
    .pg a, .pg strong {
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
}

/* ========== 5. 小屏手机 (≤576px) ========== */
@media (max-width: var(--bp-sm)) {
    /* 侧边栏隐藏 */
    .sidebar, .aside, .pls { display: none !important; }
    
    /* 主内容区全宽 */
    .main-content, .content-area {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* 网格 - 1-2列 */
    .cy-grid-3, .cy-grid-4, .cy-grid-5, .cy-grid-6, .cy-grid-8 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* 模态框 */
    .modal-dialog { margin: 0 !important; max-width: 100% !important; }
    .modal-content { height: 100vh; max-height: 100vh; border-radius: 0; }
}

/* ========== 6. 平板 (≤768px) ========== */
@media (max-width: var(--bp-md)) {
    /* 容器 */
    .wp { padding: 0 12px; }
    
    /* 网格 - 2列 */
    .cy-grid-4, .cy-grid-5, .cy-grid-6, .cy-grid-8 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .cy-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .cy-grid-2 { grid-template-columns: 1fr !important; }
    
    /* 头部导航 */
    .header-nav, .top-nav { display: none; }
    
    /* 统计信息 */
    .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; }
    
    /* 面包屑 */
    .breadcrumb { flex-wrap: wrap; font-size: 12px; }
    
    /* 论坛页面 */
    .forum-item { flex-wrap: wrap; }
    .forum-stats, .forum-lastpost { display: none; }
    .thread-row { flex-wrap: wrap; }
    .thread-nums .views, .thread-last { display: none; }
    
    /* 微博页面 */
    .wb-main { grid-template-columns: 1fr !important; }
    .wb-right-sidebar { display: none; }
    
    /* 个人资料 */
    .profile-card-header { flex-direction: column; text-align: center; }
    .profile-grid-section { grid-template-columns: 1fr !important; }
    .stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
    
    /* 新闻列表 */
    .news-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .news-thumb { height: 120px; }
    
    /* 便民服务 */
    .convenience-grid { grid-template-columns: repeat(4, 1fr) !important; }
    
    /* 页脚 */
    .ft-nav-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .ft-bottom-area { grid-template-columns: 1fr !important; }
    
    /* 帖子内容 */
    .t_f { font-size: 15px !important; line-height: 1.7 !important; }
    .t_f img { max-width: 100% !important; height: auto !important; }
    
    /* 发帖编辑器 */
    .edt_wrap, .tedt { width: 100% !important; }
    
    /* 用户资料侧栏 */
    .pls { display: none !important; }
    .pi { padding: 10px !important; }
}

/* ========== 7. 小屏桌面 (≤992px) ========== */
@media (max-width: var(--bp-lg)) {
    /* 侧边栏可折叠 */
    .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 280px;
        background: var(--cy-bg-card, #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; }
    
    /* 网格 */
    .cy-grid-6, .cy-grid-8 { grid-template-columns: repeat(3, 1fr) !important; }
    .cy-grid-4, .cy-grid-5 { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ========== 8. 大屏桌面 (≤1200px) ========== */
@media (max-width: var(--bp-xl)) {
    .container, .wp { max-width: 1140px !important; }
}

/* ========== 9. 论坛页面响应式增强 ========== */
@media (max-width: var(--bp-md)) {
    /* 论坛头部 */
    .forum-page-header { padding: 16px 12px; }
    .forum-title { font-size: 20px; }
    .forum-subtitle { font-size: 13px; }
    .forum-page-stats { flex-direction: column; gap: 8px; }
    
    /* 论坛导航 */
    .forum-nav-menu {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 8px 0;
    }
    .forum-nav-item span { display: none; }
    .forum-nav-icon { margin: 0; }
    
    /* 快捷操作卡片 */
    .forum-quick-actions {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .quick-action-card {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }
    .quick-action-btn { width: 100%; }
    
    /* 热门话题 */
    .hot-threads-grid { grid-template-columns: 1fr !important; }
    
    /* 论坛板块 */
    .forum-group-header { padding: 12px; font-size: 15px; }
    .forum-item { padding: 12px; }
    .forum-icon { width: 40px; height: 40px; }
    .forum-name { font-size: 14px; }
    .forum-desc { font-size: 12px; }
}

/* ========== 10. 门户首页响应式 ========== */
@media (max-width: var(--bp-md)) {
    /* 轮播图 */
    .banner-area .swiper-container { height: 220px; }
    .banner-caption { padding: 20px; }
    .banner-caption h3 { font-size: 18px; }
    
    /* 快捷导航 */
    .klp_cyt01ico li {
        min-width: calc(50% - 6px) !important;
        padding: 12px 8px;
    }
    
    /* 新闻网格 */
    .news-grid { grid-template-columns: repeat(2, 1fr) !important; }
    
    /* 频道布局 */
    .food-grid, .property-grid, .auto-grid,
    .baby-grid, .travel-grid, .social-grid,
    .job-grid, .market-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* 生活服务 */
    .service-blocks { grid-template-columns: 1fr !important; }
    
    /* 图说城市 */
    .photo-layout { grid-template-columns: 1fr !important; }
    .photo-carousel { height: 260px; }
}

/* ========== 11. 游戏页面响应式 ========== */
@media (max-width: var(--bp-md)) {
    /* 游戏导航 */
    #nv { overflow-x: auto; white-space: nowrap; padding: 8px 0; }
    #nv li { flex-shrink: 0; }
    .user-info { margin-right: 0; margin-bottom: 10px; width: 100%; justify-content: center; }
    
    /* 游戏卡片 */
    .game-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
    
    /* 游戏列表 */
    .game-list-item { flex-direction: column; align-items: flex-start; }
}

/* ========== 12. 横屏模式优化 ========== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .mobile-top-bar { height: 40px; }
    .mobile-top-inner { height: 40px; }
    body { padding-top: 40px; }
    .module-con { margin-top: 46px; }
    
    .hero-section, .banner-section { padding: 10px 0; }
    .slidewrap { height: 150px !important; }
}

/* ========== 13. 安全区域适配（刘海屏） ========== */
@supports (padding: max(0px)) {
    .mobile-top-bar {
        padding-top: max(0px, env(safe-area-inset-top));
    }
    .mobile-bottom-nav {
        padding-bottom: max(4px, env(safe-area-inset-bottom));
    }
    .back-to-top {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        right: max(24px, env(safe-area-inset-right, 24px));
    }
}

/* ========== 14. 暗黑模式 ========== */
@media (prefers-color-scheme: dark) {
    .mobile-top-bar { background: #1a1d23; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
    .mobile-menu-toggle span { background: #e8eaed; }
    .mobile-sidebar { background: #1a1d23; }
    .mobile-search-input { background: #242830; border-color: #2a2e36; color: #e8eaed; }
    .mobile-nav-list > li > a { color: #e8eaed; }
    .mobile-sub-nav { background: #242830; }
    .mobile-sub-nav li a { color: #b0b5bd; }
    .mobile-action-btn { background: #242830; }
}

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

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

/* ========== 17. 招聘频道组件 ========== */
@media (max-width: var(--bp-md)) {
    .jobs-container { padding: 10px 8px !important; }
    .jobs-header { padding: 15px !important; }
    .jobs-search { flex-direction: column !important; gap: 8px !important; }
    .jobs-search input { font-size: 16px !important; padding: 12px 14px !important; }
    .jobs-search button { width: 100% !important; padding: 12px !important; }
    .jobs-post-btn { width: 100% !important; padding: 12px !important; font-size: 15px !important; }
    .job-card { padding: 12px !important; }
    .job-footer { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
    .job-apply-btn, .job-applied { width: 100% !important; text-align: center !important; min-height: 44px; }
}

/* ========== 18. 二手市场组件 ========== */
@media (max-width: var(--bp-md)) {
    .market-container { padding: 10px 8px !important; }
    .market-header { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }
    .market-post-btn { width: 100% !important; padding: 12px !important; }
    .market-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .market-card-img { height: 120px !important; }
}

@media (max-width: var(--bp-xs)) {
    .market-grid { grid-template-columns: 1fr !important; }
    .market-card-img { height: 180px !important; }
}

/* ========== 19. 动态/朋友圈组件 ========== */
@media (max-width: var(--bp-md)) {
    .moments-container { padding: 10px 8px !important; max-width: 100% !important; }
    .moment-post-box { padding: 12px !important; }
    .moment-post-box textarea { font-size: 16px !important; height: 100px !important; }
    .moment-post-actions { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
    .moment-post-btn { width: 100% !important; padding: 12px !important; }
    .moment-card { padding: 12px !important; }
    .moment-avatar { width: 36px !important; height: 36px !important; }
    .moment-images { grid-template-columns: repeat(2, 1fr) !important; }
    .moment-actions { gap: 15px !important; }
    .moment-comment-input { flex-direction: column !important; }
    .moment-comment-input button { width: 100% !important; }
}

/* ========== 20. 微博组件 ========== */
@media (max-width: var(--bp-md)) {
    .wb-container { padding: 10px 8px !important; }
    .wb-main { grid-template-columns: 1fr !important; }
    .wb-sidebar { display: none !important; }
    .wb-compose { margin: 0 !important; }
    .wb-feed-avatar { width: 36px !important; height: 36px !important; }
    .wb-feed-actions { flex-wrap: wrap !important; justify-content: center !important; }
    .wb-feed-action { min-height: 44px; padding: 8px 12px !important; }
}

/* ========== 21. 帖子详情页组件 ========== */
@media (max-width: var(--bp-md)) {
    .thread-interaction { flex-direction: column !important; gap: 8px !important; }
    .thread-interaction > * { width: 100% !important; text-align: center !important; }
    .redpacket-modal { width: 95% !important; max-width: 95% !important; }
    .thread-avatar { width: 40px !important; height: 40px !important; }
    .thread-author-info { font-size: 13px !important; }
    .thread-content { padding: 12px !important; font-size: 15px !important; line-height: 1.7 !important; }
    .thread-content img { max-width: 100% !important; height: auto !important; }
    .thread-content pre { overflow-x: auto !important; font-size: 13px !important; }
    .thread-content blockquote { margin: 8px 0 !important; padding: 8px 12px !important; }
    .post-footer { flex-direction: column !important; gap: 8px !important; }
    .post-footer > * { width: 100% !important; }
}

/* ========== 22. 发帖编辑器组件 ========== */
@media (max-width: var(--bp-md)) {
    .editor-container { padding: 10px 8px !important; }
    .editor-toolbar { flex-wrap: wrap !important; gap: 4px !important; }
    .editor-toolbar button { min-height: 40px !important; padding: 8px 12px !important; }
    .editor-textarea { font-size: 16px !important; min-height: 200px !important; }
    .editor-submit { width: 100% !important; padding: 14px !important; font-size: 16px !important; }
}

/* ========== 23. 登录注册组件 ========== */
@media (max-width: var(--bp-md)) {
    .login-container, .register-container {
        padding: 20px 16px !important;
        max-width: 100% !important;
    }
    .login-form, .register-form { padding: 20px !important; }
    .login-form h2, .register-form h2 { font-size: 20px !important; }
    .form-input { font-size: 16px !important; padding: 12px 14px !important; }
    .form-submit { width: 100% !important; padding: 14px !important; font-size: 16px !important; }
    .social-login-btn { width: 100% !important; padding: 12px !important; margin: 4px 0 !important; }
}

/* ========== 24. 模态框全局响应式 ========== */
@media (max-width: var(--bp-sm)) {
    .modal-overlay { padding: 10px !important; align-items: flex-end !important; }
    .modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85vh !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 20px 16px !important;
    }
    .modal h3 { font-size: 18px !important; }
    .form-group { margin-bottom: 14px !important; }
    .form-group input, .form-group textarea, .form-group select {
        font-size: 16px !important;
        padding: 12px 14px !important;
    }
    .form-submit { padding: 14px !important; font-size: 16px !important; }
}

/* ========== 25. 分页组件 ========== */
@media (max-width: var(--bp-xs)) {
    .pg { padding: 10px 0 !important; }
    .pg a, .pg strong {
        padding: 8px 12px !important;
        font-size: 14px !important;
        min-height: 40px !important;
        min-width: 40px !important;
    }
    .pg .pcnt { display: none !important; }
}

/* ========== 26. 频道切换卡片 ========== */
@media (max-width: var(--bp-md)) {
    .channel-switch { flex-wrap: wrap !important; gap: 8px !important; }
    .channel-switch a { padding: 8px 14px !important; font-size: 13px !important; }
}

/* ========== 27. 文章摘要/列表项 ========== */
@media (max-width: var(--bp-md)) {
    .article-summary { padding: 12px !important; }
    .article-thumb { width: 100% !important; height: 180px !important; }
    .article-card { flex-direction: column !important; }
    .list-item { padding: 12px !important; }
    .list-item-title { font-size: 14px !important; }
}

/* ========== 28. 通知/公告组件 ========== */
@media (max-width: var(--bp-md)) {
    .notice-item { flex-direction: column !important; align-items: flex-start !important; padding: 10px 12px !important; }
    .notice-type { margin-bottom: 5px !important; }
    .notice-title { font-size: 13px !important; }
    .notice-time { font-size: 11px !important; margin-top: 5px !important; }
}

/* ========== 29. 标签/话题组件 ========== */
@media (max-width: var(--bp-md)) {
    .topics-cloud { gap: 8px !important; }
    .topic-tag { padding: 6px 12px !important; font-size: 13px !important; }
    .topic-count { font-size: 10px !important; }
}

/* ========== 30. 商家/本地生活组件 ========== */
@media (max-width: var(--bp-md)) {
    .merchant-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .merchant-logo { width: 60px !important; height: 60px !important; }
    .merchant-info h4 { font-size: 14px !important; }
    .merchant-rating .stars { font-size: 12px !important; }
    .merchant-address, .merchant-tel { font-size: 11px !important; }
}

@media (max-width: var(--bp-xs)) {
    .merchant-grid { grid-template-columns: 1fr !important; }
}

/* ========== 31. 图片/相册组件 ========== */
@media (max-width: var(--bp-md)) {
    .photo-layout { grid-template-columns: 1fr !important; }
    .photo-carousel { height: 260px !important; }
    .photo-grid ul { grid-template-columns: 1fr !important; }
    .photo-overlay h5 { font-size: 13px !important; }
}

/* ========== 32. 便民服务组件 ========== */
@media (max-width: var(--bp-md)) {
    .convenience-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
    .convenience-item { padding: 12px 8px !important; }
    .convenience-item p { font-size: 11px !important; }
}

@media (max-width: var(--bp-xs)) {
    .convenience-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ========== 33. 页脚组件 ========== */
@media (max-width: var(--bp-md)) {
    .ft-nav-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
    .ft-bottom-area { grid-template-columns: 1fr !important; gap: 20px !important; }
    .ft-qrcode { justify-content: center !important; }
    .ft-brand p { max-width: 100% !important; }
}

@media (max-width: var(--bp-xs)) {
    .ft-nav-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .ft-qrcode { gap: 12px !important; }
    .ft-qrcode-img { width: 80px !important; height: 80px !important; }
}