/* ===== 糖心vlog - 响应式样式 ===== */
/* 百度移动端适配优化 */

@media screen and (max-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .content-right {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: 15px;
    }

    .header-inner {
        height: 60px;
    }

    .nav {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--bg-dark);
        border-bottom: 1px solid var(--border-color);
        flex-direction: column;
        padding: 15px;
    }

    .nav.active {
        display: flex;
    }

    .nav a {
        width: 100%;
        padding: 12px 16px;
    }

    .nav-mobile-toggle {
        display: block;
    }

    .hero {
        padding: 40px 15px;
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .article-card {
        flex-direction: column;
    }

    .article-card-thumb {
        width: 100%;
        min-width: unset;
        height: 180px;
    }

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

    .content-right {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .article-detail {
        padding: 20px;
    }

    .article-detail h1 {
        font-size: 1.4rem;
    }

    .related-list {
        grid-template-columns: 1fr;
    }

    .article-nav {
        flex-direction: column;
        gap: 10px;
    }

    .article-nav a {
        max-width: 100%;
    }

    .page-content {
        padding: 25px 20px;
    }

    .category-nav-inner {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .category-nav a {
        white-space: nowrap;
    }

    .pagination {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 480px) {
    .video-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .section-title h2 {
        font-size: 1.2rem;
    }

    .article-detail-meta {
        flex-wrap: wrap;
        gap: 10px;
    }

    .comment-item {
        gap: 10px;
    }

    .comment-avatar {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 0.8rem;
    }
}

/* --- 打印样式优化 --- */
@media print {
    .header,
    .footer,
    .sidebar-widget,
    .category-nav,
    .pagination,
    .comments-section {
        display: none;
    }

    body {
        background: #fff;
        color: #333;
    }

    .article-detail {
        border: none;
        padding: 0;
        background: none;
    }
}