/* ===== RESPONSIVE DESIGN ===== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .feed-container {
        grid-template-columns: 1fr;
    }
    
    .feed-sidebar-left,
    .feed-sidebar-right {
        display: none;
    }
    
    .nav-right {
        gap: 12px;
    }
    
    .nav-label {
        display: none;
    }
    
    .search-box {
        width: 200px;
    }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
    .nav-container {
        padding: 8px 12px;
    }
    
    .search-box {
        display: none;
    }
    
    .nav-right {
        gap: 8px;
    }
    
    .nav-item {
        padding: 4px;
    }
    
    .page-content {
        padding: 16px 8px;
    }
    
    .auth-card {
        padding: 24px;
    }
    
    .auth-logo {
        font-size: 28px;
    }
    
    .auth-welcome {
        font-size: 20px;
    }
    
    .feed-container {
        gap: 12px;
    }
    
    .create-post-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .create-post-action {
        flex: 1;
        min-width: calc(50% - 4px);
        justify-content: center;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .logo {
        width: 30px;
        height: 30px;
    }
    
    .logo-text {
        font-size: 18px;
    }
    
    .nav-icon {
        font-size: 18px;
    }
    
    .auth-card {
        padding: 20px;
    }
    
    .page-content {
        padding: 12px 4px;
    }
}