/* ==========================================
   移动端适配增强 v3 - Argon 主题优化
   修复了布局崩溃问题
   ========================================== */

/* 小于768px的设备（手机横屏、小平板） */
@media screen and (max-width: 768px) {
    /* Banner区域 - 只调整字体 */
    .banner-title {
        font-size: 1.8rem !important;
    }

    .banner-subtitle {
        font-size: 1rem !important;
    }

    /* 文章列表 - 只调整内边距 */
    .post-list {
        padding: 0 10px;
    }

    /* 文章卡片 - 只调整内部间距 */
    .post .post-thumbnail {
        max-height: 200px;
    }

    .post .post-title {
        font-size: 1.2rem;
        line-height: 1.4;
    }

    .post .post-excerpt {
        font-size: 0.95rem;
    }

    /* 文章内容页 - 调整字体和内边距 */
    .article-content {
        font-size: 1rem;
        line-height: 1.8;
    }

    .article-content h1 {
        font-size: 1.6rem !important;
    }

    .article-content h2 {
        font-size: 1.4rem !important;
    }

    .article-content h3 {
        font-size: 1.2rem !important;
    }

    /* 代码块 - 允许横向滚动 */
    pre {
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-size: 0.9rem;
    }

    /* 表格响应式 */
    .article-content table {
        display: block;
        overflow-x: auto;
        font-size: 0.9rem;
    }

    /* 图片自适应 */
    .article-content img {
        max-width: 100%;
        height: auto;
    }

    /* 评论区 */
    .comment-list .comment {
        padding: 15px 10px;
    }

    /* 页脚 */
    footer {
        padding: 30px 20px;
    }

    /* ✅ 修复：只对按钮应用触摸优化，不影响普通链接 */
    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
    }

    /* ✅ 确保普通链接正常显示 */
    a:not(.btn):not([role="button"]) {
        display: inline;
        min-height: auto;
    }

    /* 导航链接 */
    .nav-link {
        padding: 10px 15px;
    }
}

/* 小于480px的设备（手机竖屏） */
@media screen and (max-width: 480px) {
    /* Banner进一步缩小 */
    .banner-title {
        font-size: 1.5rem !important;
        padding: 0 15px;
    }

    .banner-subtitle {
        font-size: 0.9rem !important;
        padding: 0 15px;
    }

    /* 文章列表 */
    .post-list {
        padding: 0 5px;
    }

    .post .post-title {
        font-size: 1.1rem;
    }

    .post .post-excerpt {
        font-size: 0.9rem;
    }

    /* 文章内容 */
    .article-content {
        font-size: 0.95rem;
    }

    .article-content h1 {
        font-size: 1.4rem !important;
    }

    .article-content h2 {
        font-size: 1.25rem !important;
    }

    .article-content h3 {
        font-size: 1.1rem !important;
    }

    /* 代码块 */
    pre {
        font-size: 0.85rem;
        padding: 10px;
    }

    code {
        font-size: 0.85rem;
    }

    /* 评论区 */
    .comment-list .comment {
        padding: 12px 8px;
    }

    .comment-content {
        font-size: 0.9rem;
    }

    /* 页脚 */
    footer {
        padding: 25px 15px;
        font-size: 0.9rem;
    }
}

/* 超小屏幕 */
@media screen and (max-width: 360px) {
    .banner-title {
        font-size: 1.3rem !important;
    }

    .post .post-title {
        font-size: 1rem;
    }
}

/* 横屏模式 */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .banner {
        min-height: 200px !important;
    }
}

/* ✅ 额外修复：确保主要内容区域正常显示 */
@media screen and (max-width: 768px) {
    /* 确保容器宽度正常 */
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 确保文章卡片正常显示 */
    .post,
    .card,
    .post-list-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 确保文字正常换行 */
    .post-title,
    .post-excerpt,
    .article-content,
    .post-content p {
        width: auto !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }
}