/* =========================================================
   06-responsive · 响应式断点
   承载范围：原 style.css 第 1979-2090 行
   本节包含：
     - 移动端整体适配（侧边栏收纳、内边距、栅格）
   ========================================================= */

/* ============= 响应式 ============= */
@media (max-width: 768px) {
    :root {
        --banner-height: 200px;
        --divider-height: 70px;
    }

    .banner-title {
        font-size: 26px;
    }

    /* 侧边导航收成图标栏，尽量把宽度让给正文 */
    .sidebar {
        width: 58px;
        min-width: 58px;
        padding: 12px 6px;
        gap: 14px;
        border-radius: 18px;
        top: 8px;
        height: calc(100vh - 16px);
        height: calc(100svh - 16px);
        margin: 8px 0 8px 8px;
    }

    .sidebar-brand h3,
    .sidebar-brand p {
        display: none;
    }

    .sidebar-avatar {
        width: 40px;
        height: 40px;
    }

    .sidebar-avatar::after {
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
    }

    .sidebar-avatar .avatar-placeholder {
        font-size: 18px;
    }

    .nav-item {
        justify-content: center;
        padding: 10px 8px;
        font-size: 0;
    }

    .nav-item .nav-icon {
        font-size: 20px;
    }

    .sidebar-footer {
        display: none;
    }

    .main-content {
        padding: 14px 10px;
    }

    /* 卡片是正文的直接容器，手机端必须收紧内边距，否则正文宽度会被吃掉一半 */
    .card {
        padding: 18px 16px;
        border-radius: 22px;
        margin-bottom: 16px;
    }

    .card h2 {
        font-size: 18px;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    .hero-section {
        padding: 24px 8px 20px;
    }

    .hero-title {
        font-size: 26px;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0;
    }

    .stat-card {
        padding: 16px 10px 14px;
    }

    .stat-num {
        font-size: 26px;
    }

    .blog-item {
        padding: 16px 14px;
        gap: 12px;
    }

    .message-board-panel {
        padding: 12px;
    }

    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}