/* ========== 沉默传奇主题 - 移动端适配（完整版） ========== */
/* 支持：首页、文章落地页、列表页等 */

/* 全局box-sizing */
* {
    box-sizing: border-box;
}

/* 图片、视频、iframe自适应 */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* 表格在手机上可横向滚动 */
table {
    width: 100%;
    overflow-x: auto;
    display: table;
}

/* 滚动表格容器 */
.server-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========== 手机端（宽度 ≤ 768px） ========== */
@media (max-width: 768px) {

    /* 整体容器 */
    .wrapper {
        width: 100%;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
    }

    /* ===== Header区域 ===== */
    .header {
        padding: 15px 10px;
        text-align: center;
    }

    .logo-area h1 {
        font-size: 22px;
        margin: 5px 0;
    }

    .logo-area p {
        font-size: 12px;
    }

    .version-badge {
        font-size: 12px;
        padding: 5px 10px;
        margin-top: 8px;
        display: inline-block;
    }

    /* ===== 导航菜单 ===== */
    .nav-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        padding: 10px 5px;
    }

    .nav-bar a {
        flex: 0 0 auto;
        padding: 8px 12px;
        font-size: 13px;
        margin: 2px;
        border-radius: 20px;
        white-space: nowrap;
    }

    /* ===== 首页卡片区域 ===== */
    .card {
        margin: 15px 10px;
        padding: 15px 12px;
        border-radius: 12px;
    }

    .section-title {
        font-size: 18px;
        text-align: center;
        margin-bottom: 8px;
    }

    .section-sub {
        font-size: 12px;
        text-align: center;
        margin-bottom: 15px;
    }

    /* 两列布局改成单列（首页用） */
    .grid-2col {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .grid-2col > div {
        width: 100% !important;
    }

    /* 信息块 */
    .info-block {
        margin-bottom: 15px;
        padding: 10px;
    }

    .info-block h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .info-list {
        padding-left: 0;
        margin: 0;
    }

    .info-list li {
        font-size: 14px;
        padding: 8px 0;
        line-height: 1.5;
        list-style: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .map-detail {
        font-size: 12px;
        margin-top: 5px;
        padding-left: 5px;
        opacity: 0.8;
    }

    .badge,
    .tag-sm {
        font-size: 10px;
        padding: 2px 6px;
        margin-left: 6px;
        display: inline-block;
        vertical-align: middle;
    }

    /* 表格优化 */
    .server-table {
        font-size: 12px;
        min-width: 500px;
    }

    .server-table th,
    .server-table td {
        padding: 8px 6px;
        white-space: nowrap;
    }

    .btn-sm {
        padding: 4px 8px;
        font-size: 11px;
        white-space: nowrap;
    }

    /* ===== 文章落地页 ===== */
    /* 两列布局（主要内容区 + 侧边栏）改成单列 */
    .two-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .main-content {
        width: 100% !important;
        order: 1;
        padding: 0 10px;
    }

    .sidebar {
        width: 100% !important;
        order: 2;
        padding: 0 10px;
    }

    /* 文章卡片 */
    .article-card {
        margin: 0;
        padding: 15px;
        border-radius: 12px;
    }

    /* 面包屑导航 */
    .breadcrumb {
        font-size: 12px;
        margin-bottom: 15px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
    }

    /* 文章标题 */
    .article-title {
        font-size: 22px;
        line-height: 1.35;
        margin: 10px 0;
    }

    /* 文章元信息 */
    .article-meta {
        font-size: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* 文章正文 */
    .article-content {
        font-size: 16px;
        line-height: 1.7;
    }

    .article-content p {
        font-size: 16px;
        margin-bottom: 1em;
        word-wrap: break-word;
    }

    .article-content h2 {
        font-size: 20px;
        margin: 24px 0 12px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .article-content h3 {
        font-size: 18px;
        margin: 20px 0 10px 0;
    }

    .article-content ul,
    .article-content ol {
        padding-left: 20px;
        margin: 12px 0;
    }

    .article-content li {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .article-content img {
        max-width: 100%;
        height: auto;
        margin: 15px 0;
        border-radius: 8px;
    }

    /* 侧边栏卡片 */
    .sidebar-card {
        margin-bottom: 20px;
        padding: 15px;
        border-radius: 12px;
        background: #f8f9fa;
    }

    .sidebar-card h3 {
        font-size: 16px;
        margin: 0 0 12px 0;
        padding-bottom: 8px;
        border-bottom: 2px solid #ffd700;
    }

    .hot-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .hot-item {
        padding: 12px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .hot-item a {
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        display: block;
        margin-bottom: 5px;
    }

    .hot-meta {
        font-size: 11px;
        color: #888;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .more-link {
        margin-top: 12px;
        text-align: right;
    }

    .more-link a {
        font-size: 12px;
        text-decoration: none;
    }

    /* ===== 页脚 ===== */
    .footer {
        padding: 15px 10px;
        text-align: center;
    }

    .footer p {
        font-size: 11px;
        margin: 5px 0;
        line-height: 1.4;
    }
}

/* ========== 小手机（宽度 ≤ 480px）额外优化 ========== */
@media (max-width: 480px) {
    .nav-bar a {
        padding: 6px 10px;
        font-size: 12px;
    }

    .logo-area h1 {
        font-size: 18px;
    }

    .section-title {
        font-size: 16px;
    }

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

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

    .article-content h2 {
        font-size: 18px;
    }

    .article-content h3 {
        font-size: 17px;
    }
}

/* ========== 平板端（769px - 1024px） ========== */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-2col {
        gap: 15px;
    }

    .nav-bar a {
        padding: 10px 16px;
    }

    .card {
        margin: 20px 15px;
    }

    .two-columns {
        gap: 20px;
        padding: 0 15px;
    }

    .main-content {
        width: 65%;
    }

    .sidebar {
        width: 30%;
    }
}