/* 响应式布局 CSS */

/* 卡片网格容器 */
.site-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* 卡片样式调整 */
.xe-widget.xe-conversations {
    height: auto;
    min-height: 86px;
    width: 100%;
    margin: 0;
}

/* 导航栏样式 */
.navbar-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

/* 卡片移动端调整 */
@media (max-width: 768px) {
    .site-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }
    
    .xe-comment {
        position: relative;
        transform: none;
        margin-left: 60px;
        top: 0;
        padding: 10px 0;
    }
    
    .search-form .input-group {
        width: 100%;
    }
    
    .user-info-menu.right-links {
        float: none;
        margin-top: 10px;
        width: 100%;
    }
    
    .navbar .user-info-menu {
        margin-bottom: 10px;
    }
    
    .navbar-content {
        flex-direction: column;
    }
    
    #search-suggestions {
        width: 100%;
    }
}

/* 小屏幕设备调整 */
@media (max-width: 576px) {
    .site-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .box2 {
        padding: 0 15px;
    }
    
    .main-content {
        padding: 15px;
    }
    
    .search-form {
        width: 100%;
    }
    
    .navbar-content {
        padding: 0 10px;
    }
}

/* 搜索结果调整 */
.search-results-container h4.text-gray {
    margin-top: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* 搜索结果时调整分类标题和网格之间的间距 */
.search-active .site-cards-grid {
    margin-bottom: 0; /* 减少底部间距 */
}

.search-active h4.text-gray {
    margin-top: 20px; /* 减少顶部间距 */
    margin-bottom: 15px; /* 确保与卡片有合适的间距 */
}

/* 仅保留第一个分类的较大上边距，其他分类标题紧凑显示 */
.search-active h4.text-gray:first-of-type {
    margin-top: 30px;
}

/* 当分类标题隐藏时，确保其中的图标也隐藏 */
h4.text-gray[style*="display: none"] i {
    display: none !important;
}

/* 紧凑搜索结果中相邻两个可见分类之间的间距 */
.search-active .search-result-grid + h4.text-gray {
    margin-top: 30px;
}

/* 空白网格容器的处理 */
.site-cards-grid:empty {
    display: none;
}

/* 无搜索结果提示样式 */
#no-results-message {
    margin: 20px 0;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
}

/* 搜索结果计数样式优化 */
#search-results-count {
    margin: 20px 0 30px;
    padding: 15px;
    text-align: center;
    font-size: 16px;
    border-radius: 4px;
}

/* 搜索结果计数后的第一个标题应当有正确的间距 */
#search-results-count + h4.text-gray {
    margin-top: 0 !important;
}

/* 导航栏响应式调整 */
@media (max-width: 992px) {
    .navbar .user-info-menu {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .navbar .user-info-menu.right-links {
        width: 100%;
    }
    
    .search-form {
        width: 100%;
    }
    
    .search-form .input-group {
        width: 100%;
    }
}

/* 搜索框清除按钮样式 */
.search-clear-btn {
    border: none;
    background: transparent;
    color: #999;
    padding: 0 8px;
    position: absolute;
    right: 40px;
    top: 0;
    height: 34px;
    z-index: 10;
    transition: color 0.2s;
}

.search-clear-btn:hover {
    color: #333;
}

.search-clear-btn:focus {
    outline: none;
    box-shadow: none;
}

.search-form .input-group {
    position: relative;
}

/* 搜索建议样式 */
#search-suggestions {
    position: absolute;
    z-index: 1000;
    background: white;
    width: 250px;
    border: 1px solid #ddd;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    margin-top: -1px;
}

#search-suggestions ul {
    margin: 0;
    padding: 0;
}

#search-suggestions .suggestion-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f1f1;
}

#search-suggestions .suggestion-item:hover {
    background-color: #f5f5f5;
}

/* 所有搜索结果网格容器之间的距离 */
.search-active .site-cards-grid + .site-cards-grid {
    margin-top: 30px;
}

/* 搜索结果容器适应内容高度 */
.search-active .search-result-grid {
    margin-bottom: 5px !important;
}

/* 搜索时隐藏不相关的元素 */
.search-active br {
    display: none;
}