/* 移动端自适应样式 */

/* 媒体查询 - 移动设备 */
@media (max-width: 768px) {
    /* 基础变量调整 */
    :root {
        --container-width: 100%;
        --font-size-base: 0.8125rem;
        --spacing-xl: 0.75rem;
        --spacing-2xl: 1rem;
        --spacing-3xl: 1.25rem;
    }
    
    /* 容器调整 */
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* 页头调整 */
    header {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    header .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* 轮播样式调整 */
    #home-carousel {
        height: 200px !important;
        margin-bottom: 20px;
    }
    
    .carousel-item h2 {
        font-size: 1rem !important;
    }
    
    .carousel-item p {
        font-size: 0.75rem !important;
    }
    
    /* 热门图文调整 */
    #popular-posts h2 {
        font-size: 1.25rem;
        margin-bottom: 16px;
    }
    
    #popular-posts .grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* 内容区域调整 */
    main {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    
    /* 文章列表调整 */
    .post-card {
        margin-bottom: 16px !important;
        padding: 12px !important;
    }
    
    .post-card h3 {
        font-size: 1rem;
    }
    
    /* 评论区域调整 */
    #comments-scroll-container {
        height: 60px !important;
    }
    
    /* 侧边栏调整 */
    .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
    }
    
    .md\:w-1\/4,
    .md\:w-3\/4 {
        width: 100% !important;
    }
    
    /* 按钮调整 */
    button {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    
    /* 表单调整 */
    input[type="text"],
    input[type="search"],
    textarea {
        padding: 6px 8px;
        font-size: 0.75rem;
    }
    
    /* 单页文章调整 */
    article {
        padding: 16px !important;
    }
    
    article h1 {
        font-size: 1.5rem !important;
    }
    
    article h2 {
        font-size: 1.25rem;
    }
    
    article h3 {
        font-size: 1.125rem;
    }
    
    /* 面包屑导航样式 */
    .breadcrumb {
        padding: 8px 0;
        margin-bottom: 16px;
        font-size: 0.75rem;
        color: var(--text-light);
    }
    
    .breadcrumb a {
        color: var(--text-light);
        text-decoration: none;
        transition: color 0.2s;
    }
    
    .breadcrumb a:hover {
        color: var(--primary-color);
    }
    
    .breadcrumb-separator {
        margin: 0 4px;
    }
    
    .breadcrumb-current {
        color: var(--text-primary);
        font-weight: 500;
    }
    
    /* 菜单按钮调整 */
    #mobile-menu-toggle {
        display: block !important;
    }
    
    /* 评论样式调整 */
    .comment-form {
        padding: 12px;
    }
    
    .comment-form input,
    .comment-form textarea {
        width: 100%;
        margin-bottom: 8px;
    }
    
    /* 加载更多按钮 */
    .load-more {
        width: 100%;
        padding: 8px;
        text-align: center;
    }
    
    /* 页脚调整 */
    footer {
        padding: 16px 0;
    }
    
    footer .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* 字体大小调整 */
    p {
        font-size: 0.875rem;
    }
    
    /* 图片调整 */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* 表格调整 */
    table {
        font-size: 0.75rem;
    }
    
    /* 隐藏不需要的元素 */
    .hidden-mobile {
        display: none !important;
    }
}

/* 媒体查询 - 小屏幕手机 */
@media (max-width: 480px) {
    /* 进一步调整小屏幕设备上的样式 */
    
    /* 轮播图高度进一步减小 */
    #home-carousel {
        height: 150px !important;
    }
    
    /* 导航栏高度调整 */
    header .h-20 {
        height: 16px !important;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    
    /* 标题大小调整 */
    h1 {
        font-size: 1.375rem;
    }
    
    h2 {
        font-size: 1.125rem;
    }
    
    /* 边距调整 */
    .mb-12,
    .mb-8,
    .mb-6 {
        margin-bottom: 16px !important;
    }
    
    .p-6,
    .p-5,
    .p-4 {
        padding: 12px !important;
    }
    
    /* 按钮尺寸调整 */
    button {
        padding: 4px 6px;
        font-size: 0.7rem;
    }
    
    /* 面包屑导航调整 */
    .breadcrumb {
        font-size: 0.7rem;
        padding: 6px 0;
    }
}