/* ========================================
   响应式设计 - Responsive CSS
   凌越传奇官网 H5 自适配
   ======================================== */

/* ==================== 
   平板端 (768px - 991px)
   ==================== */
@media (max-width: 991px) {

    /* 分类页 - Category Page */
    .category-header {
        padding: 30px 15px;
    }

    .category-title {
        font-size: 28px;
    }

    .category-desc {
        font-size: 15px;
    }

    .article-list {
        max-width: 100%;
        padding: 15px;
    }

    .article-item {
        padding: 18px;
        gap: 15px;
    }

    /* 首页 - Homepage */
    .news-columns {
        padding: 20px 15px;
    }

    .columns-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .category-navigation {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 0 15px !important;
    }

    /* 通用容器 */
    .page-container {
        padding: 0 15px;
    }
}

/* ==================== 
   手机端 (≤ 768px) - 核心适配
   ==================== */
@media (max-width: 768px) {

    /* === 通用布局 === */
    body {
        font-size: 14px;
    }

    .page-container {
        max-width: 100%;
        padding: 0 10px;
    }

    /* === 分类页适配 === */
    .category-header {
        padding: 20px 10px;
    }

    .category-title {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .category-desc {
        font-size: 14px;
        padding: 0 10px;
        line-height: 1.6;
    }

    .breadcrumb {
        max-width: 100%;
        padding: 10px;
        font-size: 12px;
        margin: 10px auto;
    }

    .breadcrumb a {
        padding: 2px 4px;
    }

    .article-list {
        max-width: 100%;
        padding: 10px;
    }

    .article-item {
        flex-direction: column;
        /* 关键：改为竖向布局 */
        padding: 12px;
        gap: 10px;
        margin-bottom: 15px;
    }

    .article-title {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 8px;
    }

    .article-meta {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .article-meta span {
        display: inline-block;
        margin-right: 10px;
    }

    .article-excerpt {
        font-size: 14px;
        line-height: 1.6;
    }

    /* === 分页适配 === */
    .pagination {
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 6px;
    }

    .pagination-btn,
    .pagination-current {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-width: 40px;
        text-align: center;
    }

    .pagination+div {
        font-size: 12px;
        margin-top: 15px;
        padding: 0 10px;
    }

    /* === 首页适配 === */

    /* Banner/Video */
    #Flash,
    #bigpic {
        max-height: 300px;
        overflow: hidden;
    }

    #top-video,
    #bigpic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Logo 图片 */
    .center>div[align="center"] img {
        max-width: 90%;
        height: auto;
    }

    /* 游戏版本卡片 */
    .ver {
        margin-bottom: 15px;
    }

    .ver .photo img {
        max-width: 100%;
        height: auto;
    }

    .ver .text {
        padding: 10px;
    }

    ._down a {
        font-size: 13px;
        padding: 8px 12px;
        margin: 4px;
        display: inline-block;
    }

    /* 分类导航卡片 */
    .category-navigation {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 10px !important;
        margin: 20px auto !important;
    }

    .category-link {
        padding: 20px !important;
    }

    .category-link>div:first-child {
        font-size: 20px !important;
    }

    .category-link>div:nth-child(2) {
        font-size: 16px !important;
    }

    .category-link>div:nth-child(3) {
        font-size: 12px !important;
    }

    /* 文章列表（首页） */
    .news-columns {
        padding: 15px 10px;
    }

    .news-columns h2 {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .columns-wrapper {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .news-column {
        padding: 12px;
    }

    .column-title {
        font-size: 14px;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    .news-item {
        margin-bottom: 6px;
        padding: 4px 6px;
    }

    .news-item a {
        font-size: 11px;
    }

    .news-date {
        font-size: 9px;
    }

    /* 通告栏适配 */
    .notice-bar {
        width: calc(100% - 20px) !important;
        margin: 0 10px 10px !important;
        height: 35px !important;
        line-height: 35px !important;
    }

    .notice-icon {
        width: 80px !important;
        font-size: 12px !important;
    }

    .notice-content {
        left: 80px !important;
    }

    .notice-marquee {
        font-size: 12px !important;
    }

    /* === 页脚适配 === */
    .site-footer-custom {
        padding: 15px 10px;
    }

    .footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .footer-logo img {
        max-width: 150px;
        margin-bottom: 15px;
    }

    .footer-features {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .footer-features span {
        font-size: 12px;
        margin: 2px 4px;
        padding: 4px 8px;
    }

    .footer-links-label {
        font-size: 13px;
        margin-top: 12px;
    }

    .footer-links-display {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-links-display a {
        font-size: 12px;
        margin: 4px 6px;
    }

    .footer-warning,
    .footer-copyright,
    .footer-credit {
        font-size: 11px;
        line-height: 1.6;
        padding: 0 5px;
    }

    /* === 侧边浮动栏适配 === */
    #Floatingbar {
        display: none;
        /* 手机端隐藏浮动栏，避免遮挡 */
    }

    /* === 文章详情页适配 === */
    .article-detail-page .article-header {
        padding: 15px 10px;
    }

    .article-detail-page .article-title {
        font-size: 20px;
        line-height: 1.4;
    }

    .article-detail-page .article-meta {
        font-size: 12px;
    }

    .article-detail-page .article-content {
        padding: 15px 10px;
        font-size: 15px;
        line-height: 1.8;
    }

    .article-detail-page .article-content img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 10px auto;
    }

    .article-detail-page .article-content p {
        margin-bottom: 12px;
    }

    .article-detail-page .article-content h2 {
        font-size: 18px;
        margin: 20px 0 12px;
    }

    .article-detail-page .article-content h3 {
        font-size: 16px;
        margin: 16px 0 10px;
    }

    /* 相关文章 */
    .related-articles {
        padding: 15px 10px;
    }

    .related-articles-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ==================== 
   小屏手机 (≤ 480px) - 进一步优化
   ==================== */
@media (max-width: 480px) {
    .category-title {
        font-size: 20px;
    }

    .article-title {
        font-size: 15px;
    }

    .article-excerpt {
        font-size: 13px;
    }

    .pagination-btn,
    .pagination-current {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-width: 36px;
    }

    ._down a {
        font-size: 12px;
        padding: 6px 10px;
    }

    .news-columns h2 {
        font-size: 20px;
    }
}

/* ==================== 
   触摸优化
   ==================== */
@media (max-width: 768px) {

    /* 所有可点击元素增大点击区域 */
    a,
    button,
    input[type="submit"],
    .pagination-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 链接增加间距 */
    .article-title a,
    .breadcrumb a,
    .footer-links-display a {
        padding: 4px 2px;
    }
}

/* ==================== 
   防止横向滚动
   ==================== */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    * {
        max-width: 100%;
    }

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

    /* 确保所有宽度固定的元素在移动端变为100% */
    [style*="width: 1200px"],
    [style*="width: 1000px"],
    [style*="max-width: 1200px"],
    [style*="max-width: 1000px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}