/* ===== 响应式布局 (瀑布流 1-6列) ===== */

/* 超宽屏幕 (1600px+): 6列 */
@media (min-width: 1600px) {
    .wall-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 18px;
    }
}

/* 超大屏幕 (1200px - 1599px): 5列 */
@media (min-width: 1200px) and (max-width: 1599px) {
    .wall-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
    }
}

/* 中等屏幕 (900px - 1199px): 4列，Hero 双列 */
@media (min-width: 900px) and (max-width: 1199px) {
    .wall-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    .wall-main {
        padding: 12px 20px 40px;
    }

    .wall-hero {
        grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.95fr);
        gap: 22px;
    }
}

/* 小于 900px：Hero 单列堆叠，操作区重新分层 */
@media (max-width: 899px) {
    .navbar-inner {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 10px;
        padding: 10px var(--wall-content-padding);
    }

    .nav-brand {
        min-width: 0;
    }

    .nav-brand h1 {
        font-size: 1.36rem;
        line-height: 1.2;
    }

    .nav-actions {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    #btnEnterProject {
        min-height: 34px;
        padding: 6px 10px;
        font-size: 0.82rem;
    }

    #navbarUser {
        min-width: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
    }

    #navbarUser .user-meta {
        min-width: 0;
    }

    #navbarUser .user-name,
    #navbarUser .user-plan {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #navbarUser .user-name {
        font-size: 0.86rem;
    }

    #navbarUser .user-plan {
        font-size: 0.72rem;
    }

    #navbarUser .btn.ghost-sm,
    #navbarUser .btn#navbarLogout {
        min-height: 30px;
        padding: 4px 8px;
        font-size: 0.76rem;
        white-space: nowrap;
    }

    .wall-hero {
        grid-template-columns: 1fr;
        gap: 18px;
        align-items: stretch;
    }

    .hero-content,
    .hero-preview,
    .preview-card {
        width: 100%;
        max-width: none;
    }

    .hero-content {
        padding: 24px 20px;
    }

    .hero-preview {
        order: 3;
    }

    .preview-card {
        max-width: min(340px, 100%);
        margin: 0 auto;
        padding: 14px 14px;
        gap: 8px;
    }

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

    .preview-stat {
        font-size: 0.88rem;
    }

    .preview-card .stat-value {
        font-size: 1.5rem;
    }

    .preview-note {
        font-size: 0.76rem;
    }

    .hero-actions {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 10px;
        align-items: stretch;
    }

    .hero-actions .view-group {
        order: 1;
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .hero-actions .view-group .view-btn {
        justify-content: center;
        min-height: 42px;
    }

    .hero-actions .filter-group:not(.view-group) {
        order: 2;
        grid-column: 1 / 2;
        width: 100%;
        min-width: 0;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .hero-actions .filter-group:not(.view-group) .filter-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .hero-actions .sort-group {
        order: 3;
        grid-column: 2 / 3;
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        gap: 6px;
    }

    .hero-actions .sort-group label {
        white-space: nowrap;
        font-size: 0.8rem;
    }

    .hero-actions .sort-group select {
        width: 100%;
    }
}

/* 平板屏幕 (600px - 899px): 3列 */
@media (min-width: 600px) and (max-width: 899px) {
    .wall-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .wall-main {
        padding: 10px 16px 32px;
    }
}

/* 手机横屏/小平板 (480px - 599px): 2列 */
@media (min-width: 480px) and (max-width: 599px) {
    .wall-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .wall-main {
        padding: 10px 12px 24px;
        gap: 28px;
    }

    .hero-content {
        padding: 22px 18px;
    }

    .nav-actions {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: stretch;
        gap: 6px;
    }

    .nav-actions #btnEnterProject {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        justify-content: center;
        min-height: 34px;
        margin-right: 0 !important;
        padding: 6px 8px;
        font-size: 0.8rem;
    }

    .nav-actions #navbarUser {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
        padding: 6px 8px;
    }

    .nav-actions #navbarActions {
        grid-column: 1 / -1;
        justify-self: end;
    }

    #navbarUser .user-meta {
        min-width: 0;
    }

    #navbarUser .user-name,
    #navbarUser .user-plan {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #navbarUser .user-name {
        font-size: 0.82rem;
        line-height: 1.1;
    }

    #navbarUser .user-plan {
        display: none;
    }

    #navbarUser .btn.ghost-sm,
    #navbarUser .btn#navbarLogout {
        min-height: 28px;
        padding: 4px 8px;
        font-size: 0.74rem;
        white-space: nowrap;
    }

    .hero-actions {
        grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    }
}

/* 手机竖屏 (< 480px): 2列 */
@media (max-width: 479px) {
    .wall-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .wall-main {
        padding: 8px 10px 24px;
        gap: 20px;
    }

    .navbar-inner {
        padding: 8px var(--wall-content-padding);
        gap: 8px;
    }

    .nav-brand h1 {
        font-size: 1.1rem;
        margin: 0;
    }

    .nav-subtitle {
        display: none;
    }

    .nav-actions {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: stretch;
        gap: 6px;
    }

    .nav-actions #navbarUser {
        width: 100%;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 6px;
        padding: 6px 8px;
        grid-column: 2;
        grid-row: 1;
    }

    .nav-actions #btnEnterProject {
        width: 100%;
        justify-content: center;
        margin-right: 0 !important;
        min-height: 34px;
        font-size: 0.82rem;
        padding: 6px 8px;
        grid-column: 1;
        grid-row: 1;
    }

    .nav-actions #navbarActions {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .nav-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    #btnEnterProject {
        margin-right: 0 !important;
        padding: 6px 10px;
    }

    #btnEnterProject span {
        display: none;
    }

    #navbarUser .user-avatar {
        width: 30px;
        height: 30px;
    }

    #navbarUser .user-name {
        font-size: 0.82rem;
        line-height: 1.1;
    }

    #navbarUser .user-plan {
        display: none;
    }

    #navbarUser .btn.ghost-sm,
    #navbarUser .btn#navbarLogout {
        min-height: 28px;
        padding: 4px 8px;
        font-size: 0.76rem;
        white-space: nowrap;
    }

    .hero-content {
        padding: 20px 16px;
    }

    .hero-content h2 {
        font-size: 1.4rem;
        line-height: 1.3;
    }

    .hero-actions .view-group {
        grid-template-columns: 1fr 1fr;
    }

    .filter-btn,
    .view-btn {
        justify-content: center;
        padding: 8px 10px;
        font-size: 0.85rem;
        min-height: 40px;
    }

    .hero-actions {
        grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    }

    .hero-actions .sort-group label {
        font-size: 0.78rem;
    }

    .preview-card {
        padding: 12px 12px;
        gap: 8px;
    }

    .preview-stat {
        font-size: 0.84rem;
    }

    .preview-card .stat-value {
        font-size: 1.3rem;
    }

    .preview-stat + .preview-stat {
        padding-top: 8px;
        margin-top: 8px;
    }
}

/* 超小屏幕 (< 360px): 1列 */
@media (max-width: 359px) {
    .wall-grid {
        grid-template-columns: 1fr;
    }

    .nav-brand h1 {
        font-size: 1rem;
    }
}

/* 预览模态框响应式 */
@media (max-width: 960px) {
    .preview-panel {
        grid-template-columns: 1fr;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
    }

    .preview-image-wrap {
        flex-shrink: 0;
        max-height: 50vh;
        min-height: 200px;
    }

    .preview-info {
        overflow-y: auto;
        flex: 1;
        padding: 20px;
    }
}