/* 前端响应式覆盖样式 (mobile-first 适配) */

/* ===== PC端图标大小设置 ===== */
.notice-module-title img {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
}

.common-module-title img {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
}

/* 默认在大屏下隐藏移动菜单按钮，移动端再显示 */
.nav-menu {
    display: none;
    cursor: pointer;
}

.nav .nav-menu {
    display: none !important;
}

/* 让导航项在小屏时垂直排列并折行 */
.nav-wrapper .nav-list {
    display: flex;
    gap: 8px;
}

.nav-wrapper {
    position: relative;
}

/* 图片与轮播自适应 */
.carousel-img, .notice-module img, .carousel-notice-item img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
}

.article-detail, .article-card, .main-index {
    width: 100% !important;
}

/* ===== 中等屏幕以下 ===== */
@media (max-width: 991.98px) {
    :root { --main-width: 100%; }
    .web-container { max-width: 100%; padding: 0 16px; }
    .web-container.flex { flex-wrap: wrap; }
    
    /* 强制导航样式 */
    .nav-menu {
        display: block !important;
        z-index: 102 !important;
        position: relative !important;
    }
    
    .nav .nav-menu {
        display: block !important;
        z-index: 102 !important;
    }
    
    .nav-wrapper .nav-list { display: none !important; width: 100%; }
    .nav .nav-list { display: none !important; }
    .nav-list.mobile-open { display: flex !important; }
    
    .logo img { max-width: 140px; height: auto; }
    .search-box .form-control { width: 140px; }
    .index-slide, .notice-module .carousel-notice-module, .carousel-notice-item { height: auto !important; }
    .notice-module img, .carousel-img { width: 100%; height: auto; }
    .article-detail { padding: 0 12px; max-width: 100%; }
}

/* ===== 小屏幕 (手机) ===== */
@media (max-width: 767.98px) {
    /* ===== 导航菜单按钮 - 现代化设计 ===== */
    .nav-menu { 
        display: block !important; 
        font-size: 32px !important;
        position: relative !important;
        cursor: pointer !important;
        z-index: 102 !important;
        padding: 6px 10px !important;
        margin: 0 !important;
        color: #fff !important;
        background: linear-gradient(135deg, #103e94 0%, #164eb7 100%) !important;
        border: 2px solid #fff !important;
        line-height: 1 !important;
        border-radius: 8px !important;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        min-width: 50px !important;
        min-height: 50px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 8px rgba(16, 62, 148, 0.3) !important;
    }
    
    .nav-menu:active {
        transform: scale(0.95) !important;
        box-shadow: 0 1px 4px rgba(16, 62, 148, 0.5) !important;
    }
    
    .nav {
        position: relative !important;
    }
    
    .nav .nav-menu {
        display: flex !important;
        position: static !important;
        margin-left: 12px !important;
        transform: none !important;
        font-size: 32px !important;
        padding: 6px 10px !important;
        z-index: 102 !important;
        color: #fff !important;
        background: linear-gradient(135deg, #103e94 0%, #164eb7 100%) !important;
        border: 2px solid #fff !important;
        border-radius: 8px !important;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        min-width: 50px !important;
        min-height: 50px !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 8px rgba(16, 62, 148, 0.3) !important;
    }
    
    .nav .nav-menu:active {
        transform: scale(0.95) !important;
        box-shadow: 0 1px 4px rgba(16, 62, 148, 0.5) !important;
    }
    
    /* ===== 导航列表样式 - 现代美观设计 ===== */
    /* navList 默认隐藏 */
    #navList {
        display: none !important;
        position: fixed !important;
        right: auto !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        z-index: 100 !important;
        background: #fff !important;
        margin: 0 !important;
        padding: 60px 0 20px 0 !important;
        flex-direction: column !important;
        gap: 0 !important;
        overflow-y: auto !important;
        /* 重置原始类的效果 */
        justify-content: flex-start !important;
        align-items: stretch !important;
        animation: slideInRight 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* navList 打开时显示 */
    #navList.mobile-open {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* 菜单动画 */
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(100%);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes slideOutRight {
        from {
            opacity: 1;
            transform: translateX(0);
        }
        to {
            opacity: 0;
            transform: translateX(100%);
        }
    }
    
    /* 导航项目样式 - 现代大气 */
    .nav-item { 
        margin: 0 !important;
        border-bottom: none !important;
        padding: 0 !important;
        width: 100% !important;
        flex: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .nav-item:first-child {
        border-top: 1px solid #f0f0f0 !important;
    }
    
    .nav-item-p { 
        padding: 16px 18px !important; 
        font-size: 15px !important;
        display: block !important;
        line-height: 1.4 !important;
        height: auto !important;
        text-align: left !important;
        color: #333 !important;
        margin: 0 !important;
        transition: all 0.2s ease !important;
        font-weight: 500 !important;
    }
    
    .nav-item-p:active {
        background: #f0f7ff !important;
        color: #103e94 !important;
    }
    
    .nav-item.selected .nav-item-p {
        background: #f0f7ff !important;
        color: #103e94 !important;
        border-left: 4px solid #103e94 !important;
        padding-left: 14px !important;
    }
    
    .nav-item-second {
        position: static !important;
        width: 100% !important;
        font-size: 13px !important;
        display: block !important;
        background: #f9f9f9 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .nav-item-second a { 
        display: block !important;
        text-align: left !important;
        padding: 10px 18px 10px 40px !important;
        position: relative !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        color: #666 !important;
        transition: all 0.2s ease !important;
        border-left: 3px solid transparent !important;
    }
    
    .nav-item-second a:active {
        background: #eff5ff !important;
        color: #103e94 !important;
        border-left: 3px solid #103e94 !important;
    }
    
    .nav-item-second a:before {
        content: "▸" !important;
        position: absolute !important;
        left: 18px !important;
        top: 10px !important;
        color: #103e94 !important;
    }
    
    /* 其他基础样式 */
    .web-container.flex.y-center { align-items: center; }
    .frontend-header .logo img { max-width: 120px; }
    .search-box { margin-left: 8px; }
    .search-box .form-control { width: 100px; }
    .quick-link { flex-direction: column; gap: 12px; align-items: flex-start; }
    .footer-wrapper { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
    .erweima img { width: 60px; height: 60px; }
    .web-container { padding: 0 12px; }
    .article-card .card-img-top { height: auto; }

    /* 文章列表（meeting-list）在手机上堆叠 */
    .meeting-list .meeting-item {
        display: flex !important;
        gap: 12px;
        align-items: flex-start;
        padding: 10px 0;
        margin-bottom: 10px;
        border-bottom: 1px dashed rgba(0,0,0,0.08);
    }
    .meeting-list .meeting-item-avatar-wrapper {
        flex: 0 0 72px !important;
    }
    .meeting-list .meeting-item-avatar { padding-top: 72% !important; }
    .meeting-list .meeting-item-avatar img { object-fit: cover; }
    .meeting-list .meeting-item-details { width: calc(100% - 84px) !important; }
    .meeting-list .meeting-item-details-title { font-size: 0.95rem; }
    .meeting-list .meeting-item .row-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* 页脚文字 */
    .footer .call-module-link-list li { font-size: 0.9rem; }
    
    /* 其他基础样式 */
    
    /* 文章标题 */
    .common-module-item-title {
        line-height: 1.4;
        word-spacing: 0.05em;
        letter-spacing: 0.02em;
    }
    
    .xueshu-module-middle-desc-title {
        line-height: 1.5;
        letter-spacing: 0.02em;
    }
}

/* ===== 极小屏幕优化 ===== */
@media (max-width: 479.98px) {
    .logo img { max-width: 110px; }
    .search-box .form-control { width: 90px; font-size: 0.75rem; }
    .nav-item-p { padding: 6px 8px; display: block; }
    .footer .call-module-link-list li { font-size: 0.85rem; }
}

/* 保证某些 flex 布局在小屏幕上可换行 */
.flex-wrap { flex-wrap: wrap; }

/* 文章卡片响应式网格 */
.article-list { display: flex; flex-wrap: wrap; gap: 16px; }
.article-list .article-card { flex: 1 1 calc(33.333% - 16px); }

@media (max-width: 991.98px) {
    .article-list .article-card { flex: 1 1 calc(50% - 12px); }
}

@media (max-width: 767.98px) {
    .article-list .article-card { flex: 1 1 100%; }
}

/* 导航项在平板上的紧凑调整 */
@media (max-width: 991.98px) and (min-width: 768px) {
    .nav-list { display: flex !important; flex-wrap: wrap; gap: 6px; }
    .nav-item { margin: 4px 6px; }
    .nav-item-p { padding: 6px 10px; }
}

/* 优先级更高的响应式按钮样式，避免修改后端 js */
.mobile-only { display: none; }
@media (max-width: 767.98px) { .mobile-only { display: inline-block; } }

/* 结束 */